Add Stripe to Lovable: Complete Payment Integration Guide

Prerequisites

• Working Lovable app with Supabase
• Stripe account (free to create)
• Basic understanding of your app's user model

Step 1: Set Up Stripe

1. Create a Stripe account at stripe.com
2. Get your API keys (Dashboard → Developers → API Keys)
3. Create your products and prices in Stripe Dashboard
4. For subscriptions: create a Product with recurring Price
5. For one-time: create a Product with one-time Price

Note your:

• Publishable key (pk_test_...)
• Secret key (sk_test_...)
• Price IDs (price_...)

Step 2: Add Stripe to Lovable

Prompt:

Add Stripe integration to the app:

1. Create a pricing page showing our plans:
- Free: $0, basic features
- Pro: $20/month, all features
- Annual: $200/year (save $40)

2. Add a Checkout button that redirects to Stripe Checkout

3. Store subscription status in the users profile (is_pro, subscription_id, subscription_status)

4. Create a Supabase Edge Function to handle Stripe webhooks for:
- checkout.session.completed
- customer.subscription.updated
- customer.subscription.deleted

5. Protect Pro features based on subscription status

Use Stripe Checkout (hosted) for the payment flow.

Step 3: Configure Environment Variables

In Supabase Dashboard → Settings → Edge Functions:

• STRIPE_SECRET_KEY: Your Stripe secret key
• STRIPE_WEBHOOK_SECRET: Your webhook signing secret

In your Lovable app environment:

• VITE_STRIPE_PUBLISHABLE_KEY: Your Stripe publishable key

Step 4: Set Up Webhooks

1. In Stripe Dashboard → Developers → Webhooks
2. Add endpoint: https://your-project.supabase.co/functions/v1/stripe-webhook
3. Select events: checkout.session.completed, customer.subscription.*
4. Copy the signing secret to Supabase

Test with Stripe CLI:

stripe listen --forward-to localhost:54321/functions/v1/stripe-webhook

Step 5: Test the Flow

1. Log in to your app
2. Go to pricing page
3. Click subscribe button
4. Use Stripe test card: 4242 4242 4242 4242
5. Complete checkout
6. Verify user profile updated
7. Verify Pro features unlocked

Test card numbers:

• Success: 4242 4242 4242 4242
• Decline: 4000 0000 0000 0002
• 3D Secure: 4000 0025 0000 3155

Common Issues

Webhook not receiving events

• Check webhook URL is correct
• Verify signing secret matches
• Check Supabase function logs

Subscription status not updating

• Check webhook handler logic
• Verify database RLS allows updates
• Check Stripe event in dashboard

Checkout not redirecting

• Verify publishable key is correct
• Check browser console for errors
• Ensure price ID is valid

Going Live

1. Activate your Stripe account (verify identity)
2. Switch from test to live API keys
3. Create live products/prices
4. Update environment variables
5. Set up live webhook endpoint
6. Test with a real card (refund yourself)

Back to MVP Guide →