A very important part of creating your app in lovable is connecting it to stripe payment gateway. The purpose of most apps and websites is selling something like maye be services or download. Hence it is necessary to ensure proper integration to serve the ultimate users and also receive payments.
First we must identify what is API? API is secret code that serves as way software companies use to make connection and use their services as developer. For instance open ai have API and using this you can generate images in your app. The same way stripe also offers API and in the developers section you can create them and they make the integration with your app possible.
So How do we integrate stripe payment with Lovable apps. Lovable is an AI powered website and apps developer. Hence, you write instructions in the form of chat in the same way you talk to a person in writing which is called prompting and what you write is called a prompt. So you choose how to integrate stripe payment with lovable and it does the task. Since it is intelligent knows what to do and even guides you through by first planning and then executing it.
For integrating stripe two components are mandatory. The first is creating secret key. Normally publishable key is unnecessary for creators or indie entrepreneurs. The second is stripe webhook. There are two ways to integrate Lovable with stripe. The first is you create prices and products on stripe on the stripe dashboard and tell lovable to use them or tell lovable create the prices and products using the API. Hence this difference affects how the secret key is set first hand although the webhook is not affected by it.
How to set stripe secret keys
It is recommended to create restricted key since it makes sure that it will not be attacked by online and it will be more secure. So we should set correct permissions only allowing write or read for for which it is necessary. Hence if we created prices and products on stripe ourselves we should not allow write.
correct permission set (latest Stripe UI)
Select WRITE
- Checkout Sessions
- Payment Intents
- Customers
- Subscriptions
- Invoices
- Usage Records
Select READ
- Prices
- Webhook Endpoints
Leave NONE
- Payouts
- Balance
- Accounts
- Issuing
- Terminal
- Financial Connections
- Files
Select read if you set up yourself on dashboard but write if you use api
- Products
- Customer portal
- Prices
What about publishable key? Is it necessary?
Publishable keys are not secret and they can be exposed as normally are used in front end .The frontend payment form uses the publishable key to collect payment details like card details. They enable secure connection stripe by creating tokens for stripe back end to process it securely. However, they do not charge or alter our account as that is the task of secret key. Normally publishable keys are use in ecommerce checkout forms. It is better avoid them as they are uncessary for small businesses that sell services, downloads etc. Large e-commerce stores want full control over checkout UI and process payment on their own payment checkout pages so they require publishable keys on the front end.
However, avoiding publishable keys and using Payment links redirect customers to a Stripe-hosted page, limiting customization but making it secure and simplest way of setting up payments. Hence, most indie creators and small businesses avoid publishable keys and use payment links to redirect users to stripe hosted page and this is best way to setup payment for lovable apps by creators that sell simple products or services..
Stripe checkout flow without publishable key
User → Click “Buy Plan”
↓
Lovable generates Stripe checkout link
↓
User redirected to Stripe hosted checkout
↓
Payment completed
Since Stripe hosts the entire payment page, the website does not need the publishable key.
Example companies that often use payment links:
- small SaaS tools
- indie creator products
- online course creators
How to set up Stripe webhooks
A Stripe webhook is a way for Stripe to notify your server when certain events happen in your Stripe account. Think of it as Stripe “knocking on your door” to tell your application: “Hey, something happened!”
1. What It Does
A Stripe webhook listens for events like:
- A successful payment (payment_intent.succeeded)
- A failed payment (payment_intent.payment_failed)
- A subscription being created or canceled (customer.subscription.created, customer.subscription.deleted)
- A refund being issued (charge.refunded)
- Dispute or chargeback (charge.dispute.created)
When any of these events occur, Stripe sends an HTTP POST request to a URL you specify, containing JSON data about the event.
2. How It Works
- You set up a webhook URL in your Stripe dashboard (e.g., https://yourdomain.com/stripe/webhook), called endpoint in stripe webhook creation flow. You can prompt lovable “I want set up stripe payment webhook, please tell me the endpoint to use?”
- Stripe sends a POST request to that URL whenever the specified events happen.
- Your server reads the event data and takes action, like:
- Fulfilling an order
- Updating a subscription status
- Sending a confirmation email
- Your server responds with a 200 OK to confirm receipt. If Stripe doesn’t get a 2xx response, it will retry.
3. Why You Need It
- To keep your system in sync with Stripe’s data.
- To automate business logic (like granting access to a user after payment).
- To handle asynchronous events that can happen outside your app (like refunds or failed payments).
4. Security Tip
- Stripe includes a signature in each webhook (Stripe-Signature header) so you can verify the request actually came from Stripe. This prevents malicious actors from faking events.
What are Events to track in setting up stripe webhook for Lovable apps
Charge
charge.dispute.created
Occurs whenever a customer disputes a charge with their bank.
Checkout
checkout.session.completed
Occurs when a Checkout Session has been successfully completed.
Customer
customer.subscription.created
Occurs whenever a customer is signed up for a new plan.
customer.subscription.deleted
Occurs whenever a customer’s subscription ends.
customer.subscription.updated
Occurs whenever a subscription changes (e.g., switching from one plan to another, or changing the …)