How to Add Stripe Payments to Your Lovable App

# Use one-time payment if you sell:
# - templates
# - reports
# - single downloads
# - one-off services

# Use subscription billing if you sell:
# - SaaS access
# - memberships
# - recurring coaching or retainers

# Stripe Dashboard → Products → Add product
# Example:
# Name: Pro Plan
# Pricing model: Recurring
# Price: $29/month
# Copy the generated price ID:
price_1234567890abcdef

STRIPE_SECRET_KEY=sk_test_your_secret_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret
NEXT_PUBLIC_APP_URL=https://your-app-url.com

Create a Supabase table for payment tracking.
If this is a subscription app, create a 'subscriptions' table with columns:
- id
- user_id
- stripe_customer_id
- stripe_subscription_id
- stripe_price_id
- status
- current_period_end
- created_at
- updated_at

If this is a one-time payment flow, create a 'payments' table with columns:
- id
- user_id
- stripe_checkout_session_id
- stripe_payment_intent_id
- stripe_price_id
- amount
- currency
- status
- created_at

Add RLS so users can only read their own rows.

Create a Supabase Edge Function called 'create-checkout' that:
1. Accepts price_id and user_email in the request body
2. Creates or finds a Stripe customer by email
3. Creates a Stripe Checkout session
4. Uses mode 'payment' for one-time purchases or 'subscription' for recurring plans
5. Sets success_url to `${NEXT_PUBLIC_APP_URL}/payment-success?session_id={CHECKOUT_SESSION_ID}`
6. Sets cancel_url to `${NEXT_PUBLIC_APP_URL}/pricing`
7. Adds the user_id and price_id in Stripe metadata
8. Returns the checkout URL as JSON
9. Handles errors with clear messages
10. Adds CORS headers so the frontend can call it

Create a pricing page for my app that:
1. Shows the plan name, price, and benefits
2. Has a 'Buy Now' or 'Upgrade' button
3. Calls the create-checkout Edge Function with the Stripe price ID and current user's email
4. Redirects to the returned Stripe checkout URL
5. Shows a loading spinner while waiting
6. Shows an error message if checkout creation fails
7. If the user is not logged in, redirect them to sign up first

Create two pages:
1. /payment-success
   - show a success state with a checkmark
   - explain what the user just purchased
   - if it is a subscription, say access may take a few seconds to activate
   - include a button to go to the dashboard
2. /pricing or /payment-cancelled
   - explain that no payment was completed
   - include a button to try checkout again

Create a Supabase Edge Function called 'stripe-webhook' that:
1. Reads the raw request body with req.text()
2. Verifies the Stripe signature using STRIPE_WEBHOOK_SECRET
3. Handles checkout.session.completed
4. Handles customer.subscription.updated and customer.subscription.deleted if this is a subscription app
5. For one-time payments, insert or update the payments table
6. For subscriptions, insert or update the subscriptions table
7. Match users using metadata.user_id or customer email
8. Return status 200 quickly after processing
9. Log the event type for debugging
10. Add error handling for invalid signatures and missing users

# Endpoint URL
https://your-project.supabase.co/functions/v1/stripe-webhook

# Minimum events for one-time payments
checkout.session.completed
payment_intent.payment_failed

# Add these for subscriptions
customer.subscription.updated
customer.subscription.deleted
invoice.payment_failed

# Stripe test card
4242 4242 4242 4242
# Any future expiry date
# Any 3-digit CVC

# What to verify after payment:
# 1. Stripe shows a successful checkout
# 2. Your app redirects to /payment-success
# 3. Supabase payments/subscriptions table updates
# 4. The user gains access to the feature or plan

# Replace test secrets only after confirming the flow
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_live_...

# Also make sure your live Stripe price ID is not the same as the test price ID