How to Integrate Lovable with Stripe

The first step is enabling Stripe as a shared connector in your Lovable workspace. Shared connectors are workspace-level integrations, meaning once you activate Stripe here, it becomes available across all projects in your workspace and all workspace members can use it. To activate the connector, open your Lovable project and click the Settings icon in the top-right corner of the editor. In the Settings panel, navigate to Connectors → Shared connectors. You will see a list of all available connectors. Find Stripe in the Payment category and click the toggle or 'Connect' button next to it. Lovable will display a prompt asking you to confirm activation. Click 'Enable'. At this point, the Stripe connector is active but not yet configured with your API credentials — that happens in the next step via Cloud → Secrets. Activating the connector tells Lovable's AI that Stripe is in scope for this workspace, which unlocks AI-assisted Stripe code generation. Without the connector activated, Lovable will not suggest Stripe-specific patterns or auto-generate Stripe Edge Functions when you describe payment features. If you are on a team workspace, note that connectors are workspace-wide settings, not per-project. Any team member with workspace admin access can activate or deactivate connectors. Non-admin members can use active connectors but cannot change connector settings.

With the connector activated, the next step is storing your Stripe API keys securely in Lovable's Cloud Secrets panel. Secrets are encrypted environment variables accessible only from Edge Functions — they are never exposed to client-side code, never stored in your GitHub repository, and never visible in Lovable's chat history. To access the Secrets panel, click the '+' icon at the top of the editor next to the Preview label. This opens a panel with multiple tabs including Database, Auth, Storage, Edge Functions, AI, Secrets, Logs, and Usage. Click the Secrets tab. Click 'Add new secret' and add the following secrets one at a time: - Name: STRIPE_SECRET_KEY — Value: your Stripe secret key (starts with sk_test_ for test mode or sk_live_ for production) - Name: STRIPE_PUBLISHABLE_KEY — Value: your Stripe publishable key (starts with pk_test_ or pk_live_) - Name: STRIPE_WEBHOOK_SECRET — Value: your webhook signing secret (starts with whsec_ — you will generate this in Step 4) You can find your Stripe API keys in the Stripe Dashboard at Dashboard → Developers → API Keys. Start with test mode keys (sk_test_ / pk_test_) while building — switch to live keys only when you are ready to accept real payments. Critical: Never paste API keys directly into Lovable's chat prompt. On the free tier, Lovable chat history is publicly visible. Even on paid tiers, keys pasted in chat can end up in your Git commit history where they are recoverable. Always use the Secrets panel for credential storage. Lovable's security system blocks approximately 1,200 hardcoded API keys per day, but the safest approach is to never give the system a chance to catch the mistake.

Now that Stripe is connected and credentials are stored, you can describe the payment features you need in Lovable's chat and let the AI handle the implementation. This is where the native connector's advantage over manual integration becomes clear — the AI generates Edge Functions, database tables, RLS policies, and UI components as a single coordinated unit, not as separate pieces you wire together. The key to effective prompting is specificity. Instead of saying 'add payments', describe exactly what your business model looks like. Lovable will interpret your pricing model and generate the correct Stripe configuration, database schema to track customers and purchases, and UI components for checkout. For a subscription-based SaaS product, paste this prompt into Lovable's chat: 'Add Stripe subscription billing with three plans: Basic at $9/month (up to 5 projects), Pro at $29/month (up to 25 projects), and Enterprise at $99/month (unlimited projects). Generate a pricing page with a plan comparison table and Stripe Checkout buttons for each tier. After a successful payment, update the user's subscription status in the database and redirect them to the dashboard. Also add a billing portal link so users can manage or cancel their subscription.' For a one-time payment or digital product sale, use a prompt like: 'Add a Stripe checkout button that charges $49 for a lifetime license to my app. After successful payment, mark the user as a paid customer in the database and unlock the premium features. Show a success page after checkout completes.' Lovable will generate: a Stripe checkout session Edge Function, a webhook handler Edge Function for payment confirmation, database columns or a purchases table to record transactions, RLS policies so users can only see their own purchase records, and React components for the pricing UI and post-payment flow. Review the generated code in the Code panel before deploying — check that the price amounts match your intent and the database schema aligns with your existing tables.

Stripe webhooks are how your app learns about events that happen outside the user's browser session — payment completions, subscription renewals, cancellation requests, and failed charges. Lovable generates a webhook handler Edge Function automatically, but you must register the endpoint URL in your Stripe Dashboard so Stripe knows where to send events. First, deploy your Lovable app if you have not already. Click the Publish button in the top-right corner of the Lovable editor. Once deployed, your app has a live URL like https://your-app-name.lovable.app. Your webhook endpoint will follow the pattern: https://your-app-name.lovable.app/functions/v1/stripe-webhook (the exact path is visible in the generated Edge Function code in the Code panel). Next, go to your Stripe Dashboard at dashboard.stripe.com. Navigate to Developers → Webhooks → Add endpoint. Enter your webhook endpoint URL. Under 'Select events to listen to', choose the events relevant to your use case. For subscriptions, select: checkout.session.completed, customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.payment_succeeded, invoice.payment_failed. For one-time payments, select: checkout.session.completed, payment_intent.succeeded. Click 'Add endpoint'. Stripe will generate a webhook signing secret (starts with whsec_). Copy this value and go back to Lovable Cloud → Secrets. Update the STRIPE_WEBHOOK_SECRET value with this signing secret. The generated Edge Function uses constructEventAsync() — the async webhook verification method required by Deno. This is different from the constructEvent() method used in Node.js environments. If you review the generated code and see constructEvent() (synchronous), prompt Lovable to fix it: 'Update the Stripe webhook handler to use constructEventAsync() instead of constructEvent() — the Deno runtime requires the async version for webhook signature verification.'

1// supabase/functions/stripe-webhook/index.ts
2import Stripe from 'https://esm.sh/stripe@14?target=deno';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!, {
6  apiVersion: '2023-10-16',
7  httpClient: Stripe.createFetchHttpClient(),
8});
9
10Deno.serve(async (req) => {
11  const signature = req.headers.get('stripe-signature');
12  const body = await req.text();
13  const webhookSecret = Deno.env.get('STRIPE_WEBHOOK_SECRET')!;
14
15  let event: Stripe.Event;
16  try {
17    // Deno requires the async version — constructEvent() will fail
18    event = await stripe.webhooks.constructEventAsync(body, signature!, webhookSecret);
19  } catch (err) {
20    return new Response(`Webhook signature verification failed: ${err.message}`, { status: 400 });
21  }
22
23  const supabase = createClient(
24    Deno.env.get('SUPABASE_URL')!,
25    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
26  );
27
28  if (event.type === 'checkout.session.completed') {
29    const session = event.data.object as Stripe.Checkout.Session;
30    const customerId = session.customer as string;
31    const subscriptionId = session.subscription as string;
32
33    await supabase
34      .from('subscriptions')
35      .upsert({
36        stripe_customer_id: customerId,
37        stripe_subscription_id: subscriptionId,
38        status: 'active',
39        updated_at: new Date().toISOString(),
40      }, { onConflict: 'stripe_customer_id' });
41  }
42
43  return new Response(JSON.stringify({ received: true }), {
44    headers: { 'Content-Type': 'application/json' },
45  });
46});

Stripe integration cannot be tested in Lovable's preview panel — the preview runs inside an iframe environment, and Stripe's JavaScript intentionally blocks loading in cross-origin iframes for security reasons. This is a browser security constraint, not a bug in your code. All Stripe testing must happen on your deployed app URL. If you have not deployed yet, click the Publish button in the top-right corner of the Lovable editor. Wait for the deployment to complete (typically 30–60 seconds). Your live app URL will be shown — it follows the pattern https://your-app-name.lovable.app. Open the deployed URL in a new browser tab. Navigate to the pricing page or checkout flow you generated. Click a checkout button. Stripe's hosted checkout page should open. Use Stripe's test card number 4242 4242 4242 4242 with any future expiry date and any 3-digit CVC. Enter any billing address. Click 'Subscribe' or 'Pay'. You should be redirected to your success page. To verify the webhook fired correctly, go to Stripe Dashboard → Developers → Webhooks → your endpoint → Recent deliveries. You should see a checkout.session.completed event with a green 200 status. Then check your Lovable database by opening Cloud → Database in the Cloud tab and looking at the subscriptions or purchases table — the new record should appear with the customer's details. If the webhook shows as delivered in Stripe but the database was not updated, check Cloud → Logs in the Cloud tab for Edge Function error messages. Common causes are a mismatched STRIPE_WEBHOOK_SECRET value or a code error in the webhook handler. Use Lovable's 'Try to fix' button on any error message — it reads the logs automatically and resolves roughly 60% of issues without consuming credits.