How to Add Subscription Billing to Your Lovable App
Set up recurring subscription billing with Stripe in your Lovable app. Monthly plans, billing portal, and subscription management.
Before you start
- ✓A Lovable app with Supabase connected
- ✓A Stripe account with a subscription product and price created
- ✓Stripe API keys
Step by step
Create a subscription product in Stripe
Go to Stripe → Products → Add Product. Create a recurring price (e.g., $29/month). Copy the price_id.
# Stripe Dashboard → Products → + Add Product # Name: Pro Plan # Pricing: Recurring → $29/month # Copy the price_id (starts with price_)
Create the subscription checkout function
Build an Edge Function that creates a Stripe Checkout session in subscription mode.
Paste this into Lovable:
Create a Supabase Edge Function called 'create-subscription' that: 1. Accepts price_id and user_email in the request body 2. Creates or retrieves a Stripe customer by email 3. Creates a Checkout session with mode: 'subscription' 4. Sets success_url and cancel_url 5. Returns the checkout URL 6. Uses STRIPE_SECRET_KEY from env
Build the pricing page
Create a pricing page with a free tier and a pro tier.
Paste this into Lovable:
Create a /pricing page with two plan cards side by side: 1. Free plan: list basic features, 'Current Plan' badge if user is free 2. Pro plan ($29/mo): list premium features, 'Upgrade' button that calls create-subscription 3. If user is already Pro, show 'Manage Subscription' button instead 4. Modern, clean design with the Pro card highlighted
Handle subscription webhooks
Listen for Stripe events to keep your database in sync with subscription status.
Paste this into Lovable:
Create a Supabase Edge Function called 'subscription-webhook' that handles: 1. checkout.session.completed → set user subscription_status to 'active' 2. customer.subscription.updated → update plan details 3. customer.subscription.deleted → set subscription_status to 'cancelled' 4. Verify webhook signature with STRIPE_WEBHOOK_SECRET 5. Update the subscriptions table in the database
Add the Stripe billing portal
Let users manage their subscription, update payment method, and cancel.
Paste this into Lovable:
Add a 'Manage Subscription' button on the settings page that: 1. Calls a new Edge Function 'create-portal-session' 2. The function creates a Stripe Billing Portal session 3. Redirects the user to the Stripe portal 4. They can update payment, change plan, or cancel
Gate features by subscription status
Show or hide features based on whether the user has an active subscription.
Paste this into Lovable:
Create a useSubscription hook that:
1. Checks the current user's subscription_status in the database
2. Returns { isPro, isLoading }
3. Use this hook to show/hide Pro features across the app
4. Show an 'Upgrade to Pro' prompt when free users try Pro featuresCommon errors
Customer already exists
Stripe throws an error if you try to create a customer with an email that already exists.
Fix: Search for existing customers by email first, then create only if not found.
Subscription not updating in database
The webhook handler isn't finding the user.
Fix: Make sure your webhook matches users by Stripe customer ID or email, not by session ID.
Pro features visible after cancellation
The subscription status wasn't updated when the user cancelled.
Fix: Handle the customer.subscription.deleted webhook event to set status to 'cancelled'.
Related guides
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →