How to Build Subscription system with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a SaaS subscription system:
3// 1. plans table: id (uuid PK), name (text), stripe_price_id (text NOT NULL), features (jsonb — array of feature strings), price_cents (int), interval (text DEFAULT 'month')
4// 2. subscriptions table: id (uuid PK), user_id (uuid FK references auth.users), plan_id (uuid FK), stripe_subscription_id (text UNIQUE), stripe_customer_id (text), status (text — 'active', 'trialing', 'past_due', 'cancelled'), current_period_end (timestamptz), cancel_at_period_end (boolean DEFAULT false)
5// RLS: users can only read their own subscription row.
6// Seed 3 plans: Free (no stripe_price_id, $0), Pro ($20/mo), Enterprise ($50/mo) with feature lists.
7// Generate the SQL migration.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Button } from '@/components/ui/button'
5import { Check } from 'lucide-react'
6
7export default async function PricingPage() {
8  const supabase = await createClient()
9  const { data: plans } = await supabase
10    .from('plans')
11    .select('*')
12    .order('price_cents')
13
14  return (
15    <div className="max-w-5xl mx-auto p-6">
16      <h1 className="text-4xl font-bold text-center mb-2">Simple Pricing</h1>
17      <p className="text-center text-muted-foreground mb-8">
18        Choose the plan that fits your needs.
19      </p>
20      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
21        {plans?.map((plan) => (
22          <Card key={plan.id} className={plan.name === 'Pro' ? 'border-primary shadow-lg' : ''}>
23            <CardHeader>
24              <div className="flex justify-between">
25                <CardTitle>{plan.name}</CardTitle>
26                {plan.name === 'Pro' && <Badge>Popular</Badge>}
27              </div>
28            </CardHeader>
29            <CardContent className="space-y-4">
30              <p className="text-3xl font-bold">
31                {plan.price_cents === 0
32                  ? 'Free'
33                  : `$${(plan.price_cents / 100).toFixed(0)}/mo`}
34              </p>
35              <ul className="space-y-2">
36                {(plan.features as string[])?.map((feature: string) => (
37                  <li key={feature} className="flex items-center gap-2 text-sm">
38                    <Check className="w-4 h-4 text-green-500" />
39                    {feature}
40                  </li>
41                ))}
42              </ul>
43            </CardContent>
44            <CardFooter>
45              {plan.stripe_price_id ? (
46                <form action="/api/stripe/create-checkout" method="POST" className="w-full">
47                  <input type="hidden" name="priceId" value={plan.stripe_price_id} />
48                  <Button className="w-full" type="submit">Subscribe</Button>
49                </form>
50              ) : (
51                <Button className="w-full" variant="outline" disabled>Current Plan</Button>
52              )}
53            </CardFooter>
54          </Card>
55        ))}
56      </div>
57    </div>
58  )
59}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3
4const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
5
6export async function POST(req: NextRequest) {
7  const formData = await req.formData()
8  const priceId = formData.get('priceId') as string
9
10  const session = await stripe.checkout.sessions.create({
11    payment_method_types: ['card'],
12    line_items: [{ price: priceId, quantity: 1 }],
13    mode: 'subscription',
14    subscription_data: { trial_period_days: 14 },
15    success_url: `${req.nextUrl.origin}/account?subscribed=true`,
16    cancel_url: `${req.nextUrl.origin}/pricing`,
17  })
18
19  return NextResponse.redirect(session.url!, { status: 303 })
20}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!
19    )
20  } catch {
21    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
22  }
23
24  if (event.type === 'checkout.session.completed') {
25    const session = event.data.object as Stripe.Checkout.Session
26    const subscription = await stripe.subscriptions.retrieve(
27      session.subscription as string
28    )
29
30    await supabase.from('subscriptions').upsert({
31      user_id: session.client_reference_id,
32      stripe_subscription_id: subscription.id,
33      stripe_customer_id: session.customer as string,
34      plan_id: null,
35      status: subscription.status,
36      current_period_end: new Date(subscription.current_period_end * 1000).toISOString(),
37    })
38  }
39
40  if (event.type === 'customer.subscription.updated') {
41    const sub = event.data.object as Stripe.Subscription
42    await supabase.from('subscriptions').update({
43      status: sub.status,
44      current_period_end: new Date(sub.current_period_end * 1000).toISOString(),
45      cancel_at_period_end: sub.cancel_at_period_end,
46    }).eq('stripe_subscription_id', sub.id)
47  }
48
49  if (event.type === 'customer.subscription.deleted') {
50    const sub = event.data.object as Stripe.Subscription
51    await supabase.from('subscriptions').update({
52      status: 'cancelled',
53    }).eq('stripe_subscription_id', sub.id)
54  }
55
56  return NextResponse.json({ received: true })
57}

1import { createClient } from '@/lib/supabase/server'
2import { cache } from 'react'
3
4export const getSubscription = cache(async () => {
5  const supabase = await createClient()
6  const { data: { user } } = await supabase.auth.getUser()
7
8  if (!user) return null
9
10  const { data: subscription } = await supabase
11    .from('subscriptions')
12    .select('*, plans(*)')
13    .eq('user_id', user.id)
14    .in('status', ['active', 'trialing'])
15    .single()
16
17  return subscription
18})
19
20export async function requireSubscription() {
21  const subscription = await getSubscription()
22  if (!subscription) {
23    throw new Error('Subscription required')
24  }
25  return subscription
26}
27
28export async function hasFeature(feature: string) {
29  const subscription = await getSubscription()
30  if (!subscription) return false
31  const features = subscription.plans?.features as string[] ?? []
32  return features.includes(feature)
33}