How to Integrate Supabase with Stripe

1-- Create the subscriptions table
2create table public.subscriptions (
3  id uuid primary key default gen_random_uuid(),
4  user_id uuid references auth.users(id) on delete cascade not null,
5  stripe_customer_id text unique,
6  stripe_subscription_id text unique,
7  plan text not null default 'free',
8  status text not null default 'inactive',
9  current_period_end timestamptz,
10  created_at timestamptz default now(),
11  updated_at timestamptz default now()
12);
13
14-- Enable RLS
15alter table public.subscriptions enable row level security;
16
17-- Users can read their own subscription
18create policy "Users can view own subscription"
19on public.subscriptions for select
20to authenticated
21using (auth.uid() = user_id);
22
23-- Only service role can insert/update (Edge Function)
24-- No INSERT/UPDATE policies for authenticated role
25-- The Edge Function uses SUPABASE_SERVICE_ROLE_KEY which bypasses RLS
26
27-- Create index for fast lookups
28create index idx_subscriptions_user_id on public.subscriptions(user_id);
29create index idx_subscriptions_stripe_customer on public.subscriptions(stripe_customer_id);

1# Get your keys from Stripe Dashboard > Developers > API keys
2# Webhook signing secret from Stripe Dashboard > Developers > Webhooks > endpoint > Signing secret
3
4# Set secrets in Supabase
5supabase secrets set STRIPE_SECRET_KEY=sk_live_your_key_here
6supabase secrets set STRIPE_WEBHOOK_SIGNING_SECRET=whsec_your_secret_here
7
8# Verify secrets are set
9supabase secrets list
10
11# For local development, add to supabase/functions/.env:
12# STRIPE_SECRET_KEY=sk_test_your_test_key
13# STRIPE_WEBHOOK_SIGNING_SECRET=whsec_your_test_secret

1// supabase/functions/stripe-webhook/index.ts
2import Stripe from 'npm:stripe@14'
3import { createClient } from 'npm:@supabase/supabase-js@2'
4
5const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!, {
6  apiVersion: '2024-12-18.acacia',
7})
8
9const corsHeaders = {
10  'Access-Control-Allow-Origin': '*',
11  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type, stripe-signature',
12}
13
14Deno.serve(async (req) => {
15  if (req.method === 'OPTIONS') {
16    return new Response('ok', { headers: corsHeaders })
17  }
18
19  try {
20    const body = await req.text()
21    const signature = req.headers.get('stripe-signature')!
22    const webhookSecret = Deno.env.get('STRIPE_WEBHOOK_SIGNING_SECRET')!
23
24    // Verify the webhook signature
25    const event = await stripe.webhooks.constructEventAsync(
26      body,
27      signature,
28      webhookSecret
29    )
30
31    // Create Supabase client with service role (bypasses RLS)
32    const supabase = createClient(
33      Deno.env.get('SUPABASE_URL')!,
34      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
35    )
36
37    console.log('Processing event:', event.type)
38
39    // Handle the event
40    switch (event.type) {
41      case 'checkout.session.completed': {
42        const session = event.data.object as Stripe.Checkout.Session
43        // Handle in next step
44        break
45      }
46      case 'customer.subscription.updated':
47      case 'customer.subscription.deleted': {
48        const subscription = event.data.object as Stripe.Subscription
49        // Handle in next step
50        break
51      }
52    }
53
54    return new Response(JSON.stringify({ received: true }), {
55      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
56    })
57  } catch (err) {
58    console.error('Webhook error:', err.message)
59    return new Response(
60      JSON.stringify({ error: err.message }),
61      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
62    )
63  }
64})

1// Add these handlers inside the switch statement:
2
3case 'checkout.session.completed': {
4  const session = event.data.object as Stripe.Checkout.Session
5  const userId = session.metadata?.user_id // Set when creating checkout
6
7  if (userId && session.subscription) {
8    const subscription = await stripe.subscriptions.retrieve(
9      session.subscription as string
10    )
11
12    await supabase.from('subscriptions').upsert({
13      user_id: userId,
14      stripe_customer_id: session.customer as string,
15      stripe_subscription_id: subscription.id,
16      plan: subscription.items.data[0]?.price?.lookup_key || 'pro',
17      status: subscription.status,
18      current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
19      updated_at: new Date().toISOString(),
20    }, { onConflict: 'user_id' })
21
22    console.log('Subscription created for user:', userId)
23  }
24  break
25}
26
27case 'customer.subscription.updated': {
28  const subscription = event.data.object as Stripe.Subscription
29
30  await supabase
31    .from('subscriptions')
32    .update({
33      status: subscription.status,
34      plan: subscription.items.data[0]?.price?.lookup_key || 'pro',
35      current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
36      updated_at: new Date().toISOString(),
37    })
38    .eq('stripe_subscription_id', subscription.id)
39
40  console.log('Subscription updated:', subscription.id)
41  break
42}
43
44case 'customer.subscription.deleted': {
45  const subscription = event.data.object as Stripe.Subscription
46
47  await supabase
48    .from('subscriptions')
49    .update({
50      status: 'canceled',
51      plan: 'free',
52      updated_at: new Date().toISOString(),
53    })
54    .eq('stripe_subscription_id', subscription.id)
55
56  console.log('Subscription canceled:', subscription.id)
57  break
58}

1# Deploy the Edge Function (no JWT verification for webhooks)
2supabase functions deploy stripe-webhook --no-verify-jwt
3
4# The function URL will be:
5# https://your-project-ref.supabase.co/functions/v1/stripe-webhook
6
7# Configure in Stripe Dashboard:
8# 1. Go to Stripe Dashboard > Developers > Webhooks
9# 2. Click 'Add endpoint'
10# 3. URL: https://your-project-ref.supabase.co/functions/v1/stripe-webhook
11# 4. Select events:
12#    - checkout.session.completed
13#    - customer.subscription.updated
14#    - customer.subscription.deleted
15#    - invoice.payment_succeeded
16#    - invoice.payment_failed
17# 5. Copy the Signing secret (whsec_...)
18# 6. Update your Supabase secret if needed:
19#    supabase secrets set STRIPE_WEBHOOK_SIGNING_SECRET=whsec_new_secret

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  'https://your-project.supabase.co',
5  'your-anon-key'
6)
7
8// Check current user's subscription
9async function getSubscription() {
10  const { data: { user } } = await supabase.auth.getUser()
11  if (!user) return null
12
13  const { data, error } = await supabase
14    .from('subscriptions')
15    .select('plan, status, current_period_end')
16    .eq('user_id', user.id)
17    .single()
18
19  if (error || !data) {
20    return { plan: 'free', status: 'inactive', current_period_end: null }
21  }
22
23  return data
24}
25
26// Check if user has active premium
27async function isPremium(): Promise<boolean> {
28  const sub = await getSubscription()
29  return sub?.plan !== 'free' && sub?.status === 'active'
30}
31
32// Usage in React:
33// const subscription = await getSubscription()
34// if (subscription.plan === 'pro') { show premium features }