How do I connect Stripe?

Start with built-in Payments

Lovable now has a built-in Payments feature for adding checkout flows without hand-rolling the integration. Ask for it directly:

"Add a Stripe checkout for a one-time payment of [amount] on the [page] page."

Check the integrations panel first — if Payments covers your case, it's the simpler and better-supported route than the legacy manual approach.

When you need the manual route

For custom flows the built-in feature doesn't support, the pattern is:

1. Create a Stripe account and get your API keys from the Stripe dashboard.
2. Ask Lovable to store the secret key as a server-side secret — never expose it in front-end code.
3. Ask Lovable to create a server function (Edge Function on Lovable Cloud/Supabase) that creates a Stripe Checkout Session or Payment Intent.
4. Have your button call that function, then redirect the user to the returned Stripe URL.
5. Add a webhook endpoint (another server function) so Stripe can notify your app when payment succeeds — see /questions/how-do-i-receive-webhook-data.

Test mode first

Use Stripe's test keys and test card numbers until the full flow — checkout, webhook, database update — works end to end. Only swap to live keys once that's confirmed.

What usually goes wrong

• Putting the secret key in a front-end file or .env that ships to the browser.
• Forgetting the webhook, so orders never get marked as paid even though Stripe charged the customer.
• Testing only with live keys and real cards, which makes debugging expensive and slow.
• Currency/amount mismatches — Stripe expects amounts in the smallest currency unit (cents), which is a common off-by-100 bug.

For subscriptions specifically, see /questions/how-do-i-create-subscriptions. If your payment flow needs to match specific tax, invoicing, or compliance requirements, PromptSites.com can build that properly rather than trial-and-error through Chat.