How to Build a Billing System with Lovable

1Create a billing system schema in Supabase:
2
3Tables:
4- billing_plans: id (uuid pk), name (text), stripe_price_id (text unique), stripe_product_id (text), amount_cents (int), currency (text default 'usd'), interval (text: month|year), features (text array), is_active (bool default true), created_at
5- subscriptions: id (uuid pk), user_id (references auth.users), stripe_subscription_id (text unique), stripe_customer_id (text), plan_id (uuid references billing_plans), status (text: active|past_due|canceled|trialing|unpaid), current_period_start (timestamptz), current_period_end (timestamptz), cancel_at_period_end (bool default false), created_at, updated_at
6- invoices: id (uuid pk), user_id (references auth.users), subscription_id (uuid references subscriptions), stripe_invoice_id (text unique), amount_due (int), amount_paid (int), currency (text), status (text: draft|open|paid|void|uncollectible), due_date (timestamptz), paid_at (timestamptz), hosted_invoice_url (text), invoice_pdf_url (text), period_start (timestamptz), period_end (timestamptz), created_at
7- billing_events: id (uuid pk), user_id (references auth.users), stripe_event_id (text unique), event_type (text), payload (jsonb), processed_at (timestamptz)
8
9RLS: users can SELECT their own rows across all tables. Service role has full access.

1Create a Supabase Edge Function at supabase/functions/create-subscription/index.ts.
2
3Accept POST body: { planId: string, paymentMethodId: string }
4
5Logic:
61. Get the authenticated user from the Authorization header (Supabase JWT)
72. Look up billing_plans by planId to get stripe_price_id
83. Check if the user already has a stripe_customer_id in the subscriptions table
94. If not: create a Stripe customer via POST to https://api.stripe.com/v1/customers with the user's email
105. Attach the payment method to the customer: POST to /v1/payment_methods/{paymentMethodId}/attach with customer ID
116. Set it as the default payment method: POST to /v1/customers/{customerId} with invoice_settings[default_payment_method]
127. Create the subscription: POST to /v1/subscriptions with customer, items[0][price] = stripe_price_id, expand[]=latest_invoice.payment_intent
138. If the subscription's latest_invoice.payment_intent.status is 'requires_action', return { requiresAction: true, clientSecret: pi.client_secret }
149. Insert into subscriptions table with status from Stripe response
1510. Return { subscriptionId, status }

1// supabase/functions/billing-webhook/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4import Stripe from 'https://esm.sh/stripe@14?target=deno'
5
6const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY') ?? '', {
7  apiVersion: '2023-10-16',
8  httpClient: Stripe.createFetchHttpClient(),
9})
10const cryptoProvider = Stripe.createSubtleCryptoProvider()
11
12serve(async (req: Request) => {
13  const body = await req.text()
14  const sig = req.headers.get('stripe-signature') ?? ''
15
16  let event: Stripe.Event
17  try {
18    event = await stripe.webhooks.constructEventAsync(body, sig, Deno.env.get('STRIPE_WEBHOOK_SECRET') ?? '', undefined, cryptoProvider)
19  } catch {
20    return new Response('Webhook signature failed', { status: 400 })
21  }
22
23  const supabase = createClient(Deno.env.get('SUPABASE_URL') ?? '', Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '')
24
25  const { error: dupError } = await supabase.from('billing_events').insert({ stripe_event_id: event.id, event_type: event.type, payload: event.data.object, processed_at: new Date().toISOString() })
26  if (dupError?.code === '23505') return new Response(JSON.stringify({ received: true }), { status: 200 })
27
28  switch (event.type) {
29    case 'invoice.finalized':
30    case 'invoice.paid': {
31      const inv = event.data.object as Stripe.Invoice
32      const subId = typeof inv.subscription === 'string' ? inv.subscription : inv.subscription?.id
33      const { data: sub } = await supabase.from('subscriptions').select('id, user_id').eq('stripe_subscription_id', subId).single()
34      if (sub) {
35        await supabase.from('invoices').upsert({
36          user_id: sub.user_id,
37          subscription_id: sub.id,
38          stripe_invoice_id: inv.id,
39          amount_due: inv.amount_due,
40          amount_paid: inv.amount_paid,
41          currency: inv.currency,
42          status: inv.status ?? 'open',
43          due_date: inv.due_date ? new Date(inv.due_date * 1000).toISOString() : null,
44          paid_at: inv.status_transitions?.paid_at ? new Date(inv.status_transitions.paid_at * 1000).toISOString() : null,
45          hosted_invoice_url: inv.hosted_invoice_url,
46          invoice_pdf_url: inv.invoice_pdf,
47          period_start: new Date(inv.period_start * 1000).toISOString(),
48          period_end: new Date(inv.period_end * 1000).toISOString(),
49        }, { onConflict: 'stripe_invoice_id' })
50      }
51      break
52    }
53    case 'customer.subscription.updated':
54    case 'customer.subscription.deleted': {
55      const sub = event.data.object as Stripe.Subscription
56      await supabase.from('subscriptions').update({
57        status: sub.status,
58        cancel_at_period_end: sub.cancel_at_period_end,
59        current_period_end: new Date(sub.current_period_end * 1000).toISOString(),
60        updated_at: new Date().toISOString(),
61      }).eq('stripe_subscription_id', sub.id)
62      break
63    }
64  }
65
66  return new Response(JSON.stringify({ received: true }), { status: 200 })
67})

1Build an invoice management page at src/pages/Invoices.tsx.
2
3Requirements:
4- Fetch all invoices for the current user from Supabase, ordered by created_at DESC
5- Render as a shadcn/ui DataTable with columns:
6  - Invoice period (formatted as 'Jan 2025 – Feb 2025' from period_start/period_end)
7  - Amount Due (formatted as currency)
8  - Amount Paid (formatted as currency)
9  - Status Badge (paid=green, open=blue, uncollectible=red, void=gray, draft=gray)
10  - Due Date (formatted date)
11  - Actions (two Buttons: 'Download PDF' and 'View Invoice')
12- 'Download PDF' opens invoice_pdf_url in a new tab
13- 'View Invoice' opens hosted_invoice_url in a new tab
14- For open invoices with a past due_date, show an Alert banner at the top: 'You have {count} overdue invoice(s). Pay now to avoid service interruption.' with a Button that opens the hosted_invoice_url
15- Add a summary row at the bottom showing total paid this year
16- Show a Skeleton loading state while fetching

1Build a revenue analytics page at src/pages/BillingAnalytics.tsx. This page is visible only to admin users.
2
3Requirements:
4- Fetch all invoices from Supabase using the service role (call a Supabase RPC function get_billing_analytics that returns aggregated data)
5- The RPC function should return:
6  - monthly_revenue: array of { month: string, revenue_cents: int } for last 12 months
7  - active_subscriptions: int count of subscriptions with status='active'
8  - past_due_subscriptions: int count with status='past_due'
9  - churned_this_month: int count of subscriptions canceled in current calendar month
10  - total_revenue_ytd: int sum of amount_paid for current year
11- Display four metric Cards at the top: MRR (latest month), Active Subs, Past Due, YTD Revenue
12- Below cards, render a Recharts AreaChart showing monthly_revenue over 12 months with a gradient fill
13- Show a second BarChart comparing monthly new subscriptions vs cancellations (requires two more data points in the RPC)
14- Use shadcn/ui Tabs to switch between 'Overview', 'Invoices', and 'Subscriptions' views on the same page