LovableStripeIntermediate12 min read

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

1

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_)
2

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
3

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
4

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
5

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
6

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 features

Common 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 →