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
| Variable | Replace 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.