Lovablefeatureintermediate

Add Stripe Subscriptions to Lovable App

Add recurring subscription payments with Stripe including a pricing page, checkout flow, webhooks, and feature gating.

What you'll get

A complete Stripe subscription system with pricing page, checkout, webhook handling, feature gating, and billing management.

The Prompt

Add Stripe subscription payments to my Lovable app.

REQUIREMENTS:
1. Create a Pricing page with 3 tiers (Free, Pro, Enterprise) displayed as cards with feature comparison, monthly/annual toggle, and a "Subscribe" button per tier.
2. On clicking Subscribe, create a Stripe Checkout Session via Supabase Edge Function and redirect the user to Stripe.
3. After successful payment, Stripe redirects to a /success page. Handle cancellations with a /canceled page.
4. Create a webhook Edge Function at /functions/v1/stripe-webhook that listens for checkout.session.completed, customer.subscription.updated, and customer.subscription.deleted events.
5. Store subscription status in a Supabase "subscriptions" table linked to the user.
6. Add feature gating: check subscription tier before allowing access to premium features. Show an upgrade prompt for free users.
7. Add a billing management page where users can view their plan, next billing date, and click to open Stripe Customer Portal.

DATABASE:
- "subscriptions" table: id, user_id (FK to auth.users), stripe_customer_id, stripe_subscription_id, plan_tier, status, current_period_end, created_at, updated_at
- RLS: Users can only read their own subscription row.

ENVIRONMENT VARIABLES:
- STRIPE_SECRET_KEY
- STRIPE_WEBHOOK_SECRET
- STRIPE_PRICE_ID_PRO_MONTHLY
- STRIPE_PRICE_ID_PRO_ANNUAL
- STRIPE_PRICE_ID_ENTERPRISE_MONTHLY
- STRIPE_PRICE_ID_ENTERPRISE_ANNUAL

SECURITY:
- Verify Stripe webhook signatures before processing events.
- Never expose secret keys to the client.
- Use RLS so users cannot access other users' subscription data.

Replace these variables

VariableReplace with
[PRICE_IDS]Stripe Price IDs for each tier (from your Stripe Dashboard)
[FEATURES_PER_TIER]Feature list for each pricing tier

Tips for best results

Create your products and prices in Stripe Dashboard first, then paste the Price IDs into your environment variables.

Test webhooks locally using the Stripe CLI before deploying.

Always handle the customer.subscription.deleted event to revoke access when subscriptions are canceled.

Follow-up prompts

Add usage-based billing

Add usage-based billing that tracks API calls or actions per month. Report usage to Stripe using metered billing and show usage stats on the billing page.

Add team subscriptions

Add team/organization subscriptions where one user pays for multiple seats. Include an invite system for team members.

Related prompts