How to Add Stripe to Your Lovable App
Set up Stripe in your Lovable app by storing your API keys in Lovable Secrets, creating a Supabase Edge Function for Checkout sessions, and handling webhooks for subscription status. This checklist walks through each step for the specific Lovable + Supabase + Vercel stack.
Fix first
6 checksStripe account created and verified
Create a Stripe account at stripe.com. Complete identity verification and add your bank account. This takes 1-2 business days for full approval, so start early.
Stripe secret key stored in Lovable Secrets
Copy your Stripe secret key (starts with sk_test_ or sk_live_) from the Stripe dashboard. Store it in Lovable Secrets, never in frontend code. Access it through Edge Functions only.
Stripe publishable key added to frontend config
The publishable key (starts with pk_) is safe for frontend code. Add it to your environment config. This key is used to initialize Stripe.js on the client side.
Checkout Edge Function created
Create a Supabase Edge Function that creates a Stripe Checkout Session. The function reads the secret key from environment variables, creates the session with your pricing, and returns the session URL to the client.
Webhook Edge Function created
Create a second Edge Function to handle Stripe webhooks. This function receives events like checkout.session.completed and customer.subscription.updated, then updates your database accordingly.
Webhook signing secret stored in Lovable Secrets
Copy the webhook signing secret from your Stripe webhook endpoint configuration. Store it in Lovable Secrets. Use it to verify that incoming webhooks are genuinely from Stripe.
Important
4 checksProducts and prices created in Stripe
Create your product and pricing in the Stripe dashboard. Use recurring prices for subscriptions. Copy the price ID (starts with price_) for use in your Checkout session creation.
Subscription status column added to users table
Add a subscription_status column to your Supabase users or profiles table. Update it via webhook events. Values: active, past_due, canceled, or null (never subscribed).
Access gating checks subscription status
Add checks in your route guards and RLS policies that verify subscription_status = active before granting access to paid features.
Test mode verified end-to-end
Run through the entire flow with Stripe test cards (4242 4242 4242 4242). Verify: checkout works, webhook fires, database updates, and access is granted.
Recommended
2 checksCustomer portal link added
Add a link to the Stripe Customer Portal so users can manage their subscription, update payment methods, and cancel. Create the portal link through an Edge Function.
Switch to live mode keys
After testing, switch from test keys to live keys in Lovable Secrets. Verify the webhook endpoint is configured for live events. Run one real transaction to confirm.
Verify your payment integration before going live
- Payment readiness checks that verify your Stripe integration end-to-end
- Security scan that ensures API keys are properly protected
- Public badge showing your app handles payments securely
Keep learning.
Frequently asked questions.
Yes. You can add Stripe at any point. The integration is through Supabase Edge Functions, which you can add to any existing project. Create a new Edge Function for Stripe Checkout and another for webhook handling. The rest of your app code stays unchanged.
Stripe charges 2.9% + $0.30 per successful card transaction in the US. International cards cost an additional 1.5%. There are no monthly fees, no setup fees, and no minimum volume requirements. You only pay when you successfully collect a payment from a customer. Stripe also offers volume discounts for businesses processing over $100K per month.
For most Lovable apps, regular Stripe is sufficient. Use Stripe Connect only if your app is a marketplace where you need to pay out to multiple sellers.
Stripe retries failed webhooks for up to 3 days with exponential backoff. Your webhook Edge Function should return a 200 status quickly and process the event asynchronously if needed. If your function consistently fails, Stripe will disable the endpoint and notify you via email.
Yes. When creating a Stripe Checkout Session, add a trial_period_days parameter to your subscription pricing. The user completes checkout with a card on file but is not charged until the trial ends. Handle the trial_end event in your webhook to update the user experience.
Refunds are processed through the Stripe dashboard or API. Create a refund Edge Function that calls the Stripe Refunds API. When the refund completes, Stripe sends a charge.refunded webhook event that your webhook handler should use to update the user subscription status in your database.