How to Build Billing system with V0

1// Paste this prompt into V0's AI chat:
2// Build a subscription billing system with Stripe and Supabase. Create these tables:
3// 1. plans: id (uuid PK), stripe_product_id (text), stripe_price_id (text), name (text), price (numeric), interval (text CHECK in 'month','year'), features (jsonb), is_active (boolean default true)
4// 2. subscriptions: id (uuid PK), user_id (uuid FK to auth.users), plan_id (uuid FK), stripe_subscription_id (text unique), status (text), current_period_start (timestamptz), current_period_end (timestamptz), cancel_at_period_end (boolean default false), created_at (timestamptz)
5// 3. invoices: id (uuid PK), subscription_id (uuid FK), stripe_invoice_id (text unique), amount (numeric), status (text), pdf_url (text), created_at (timestamptz)
6// 4. payment_methods: id (uuid PK), user_id (uuid FK), stripe_payment_method_id (text), brand (text), last4 (text), is_default (boolean)
7// Add RLS so users can only see their own subscriptions, invoices, and payment methods.

1// Paste this prompt into V0's AI chat:
2// Build a pricing page at app/pricing/page.tsx (Server Component).
3// Requirements:
4// - Fetch all active plans from Supabase ordered by price
5// - Display plans in a responsive grid of shadcn/ui Cards (2-3 columns)
6// - Each Card shows: plan name, price with interval (e.g. $25/month), feature list from jsonb
7// - Highlight the recommended plan with a Badge and ring border
8// - RadioGroup toggle at the top to switch between monthly and annual pricing
9// - Subscribe Button on each Card that POSTs to /api/stripe/checkout with the plan's stripe_price_id
10// - If user is logged in and already subscribed, show "Current Plan" Badge instead of Button
11// - Annual plans should show the monthly equivalent and savings percentage

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 { priceId, userId, email } = await req.json()
8
9  const session = await stripe.checkout.sessions.create({
10    mode: 'subscription',
11    payment_method_types: ['card'],
12    line_items: [{ price: priceId, quantity: 1 }],
13    success_url: `${req.nextUrl.origin}/billing?success=true`,
14    cancel_url: `${req.nextUrl.origin}/pricing`,
15    customer_email: email,
16    metadata: { user_id: userId },
17    subscription_data: {
18      metadata: { user_id: userId },
19    },
20  })
21
22  return NextResponse.json({ url: session.url })
23}

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.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const body = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
18  } catch {
19    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
20  }
21
22  switch (event.type) {
23    case 'customer.subscription.created':
24    case 'customer.subscription.updated': {
25      const sub = event.data.object as Stripe.Subscription
26      const userId = sub.metadata.user_id
27      await supabase.from('subscriptions').upsert({
28        user_id: userId,
29        stripe_subscription_id: sub.id,
30        status: sub.status,
31        current_period_start: new Date(sub.current_period_start * 1000).toISOString(),
32        current_period_end: new Date(sub.current_period_end * 1000).toISOString(),
33        cancel_at_period_end: sub.cancel_at_period_end,
34      }, { onConflict: 'stripe_subscription_id' })
35      break
36    }
37    case 'customer.subscription.deleted': {
38      const sub = event.data.object as Stripe.Subscription
39      await supabase.from('subscriptions').update({ status: 'canceled' })
40        .eq('stripe_subscription_id', sub.id)
41      break
42    }
43    case 'invoice.paid': {
44      const invoice = event.data.object as Stripe.Invoice
45      await supabase.from('invoices').upsert({
46        stripe_invoice_id: invoice.id,
47        amount: (invoice.amount_paid ?? 0) / 100,
48        status: 'paid',
49        pdf_url: invoice.invoice_pdf ?? null,
50      }, { onConflict: 'stripe_invoice_id' })
51      break
52    }
53  }
54
55  return NextResponse.json({ received: true })
56}

1// Paste this prompt into V0's AI chat:
2// Build a billing dashboard at app/billing/page.tsx.
3// Requirements:
4// - Show current subscription Card: plan name, status Badge, price, next billing date, payment method (brand + last4)
5// - "Manage Subscription" Button that redirects to Stripe Customer Portal via /api/stripe/portal
6// - Invoice history Table with columns: Date, Amount, Status Badge (paid/failed), PDF download link
7// - If user has no subscription, show the pricing page CTA
8// - AlertDialog for cancellation confirmation with warning about losing access
9// - Use Server Components to fetch subscription and invoice data from Supabase
10// - Show a success toast if redirected from Stripe Checkout with ?success=true query param