.gif)
Step-by-step guide to build a secure payment gateway integration with Lovable Learn API setup authentication testing and deployment best practices
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
You can implement a payment gateway (example: Stripe Checkout + webhook) entirely inside Lovable by adding a small server API, a client checkout page, and storing keys in Lovable Cloud Secrets — no terminal needed. Use Lovable Chat to create the files, use Preview to get a public HTTPS URL (for Stripe webhooks), set Secrets in Lovable Cloud, and publish or sync to GitHub if you need a repo. Below are ready-to-paste Lovable chat prompts that create the API routes, client page, and the Secrets steps.
We’ll add a basic Stripe Checkout flow and webhook handler: a client page that starts checkout, a server API route that creates a Checkout Session using a secret key (from Lovable Secrets), and a webhook endpoint to handle checkout.session.completed. Everything will be testable via Lovable Preview’s public URL and then Publishable.
How we’ll work in Lovable: Use Chat Mode edits to create/modify files (no CLI). Use Preview to get the public URL to register webhooks with the payment provider. Use Lovable Cloud Secrets UI to store STRIPE_SECRET and NEXT_PUBLIC_STRIPE_PUBLISHABLE. Use Publish or GitHub sync for production deployment.
Prompt 1 — Add server and client files (Goal: create Checkout and webhook)
.png)
.png)
// Goal: Create a client page and API routes for Stripe Checkout and webhook.
// Files to create:
// - src/pages/checkout.tsx
// - src/pages/api/create-checkout-session.ts
// - src/pages/api/webhook.ts
// Create src/pages/checkout.tsx
// This page renders a "Buy" button and calls /api/create-checkout-session then redirects to Stripe.
export default function CheckoutPage() {
// // Minimal React/Next.js page — Lovable should create this file.
return (
<div>
<h1>Buy</h1>
<button id="buy">Buy $5</button>
<script dangerouslySetInnerHTML={{
__html: `
document.getElementById('buy').addEventListener('click', async () => {
const res = await fetch('/api/create-checkout-session', { method: 'POST' });
const { id } = await res.json();
const stripe = Stripe(window.__NEXT_PUBLIC_STRIPE_PUBLISHABLE); // // Stripe script must be included by you or via _document
stripe.redirectToCheckout({ sessionId: id });
});
`
}} />
</div>
);
}
// Create src/pages/api/create-checkout-session.ts
// This server API reads process.env.STRIPE_SECRET and creates a Checkout Session.
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET, { apiVersion: '2022-11-15' });
export default async function handler(req, res) {
if (req.method !== 'POST') return res.status(405).end();
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [{ price_data: { currency: 'usd', product_data: { name: 'Demo' }, unit_amount: 500 }, quantity: 1 }],
mode: 'payment',
success_url: `${req.headers.origin}/?success=1`,
cancel_url: `${req.headers.origin}/?canceled=1`
});
res.json({ id: session.id });
}
// Create src/pages/api/webhook.ts
// This receives Stripe webhook events. Use the Stripe webhook signing secret stored in STRIPE_WEBHOOK_SECRET.
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET, { apiVersion: '2022-11-15' });
export default async function handler(req, res) {
const raw = await buffer(req); // // If your framework requires raw body; if Next.js, set config to raw body
const sig = req.headers['stripe-signature'];
let event;
try {
event = stripe.webhooks.constructEvent(raw, sig, process.env.STRIPE_WEBHOOK_SECRET);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}
if (event.type === 'checkout.session.completed') {
const session = event.data.object;
// // TODO: fulfill order (send email, record in DB)
}
res.json({ received: true });
}
Prompt 2 — Set Lovable Secrets (Goal: configure keys)
// Goal: Add required Secrets in Lovable Cloud Secrets UI.
// Steps to show in Lovable chat (instructions for the user):
// 1) Open Lovable Cloud > Secrets (no terminal).
// 2) Add secret STRIPE_SECRET with your Stripe secret key (sk_test_...).
// 3) Add secret NEXT_PUBLIC_STRIPE_PUBLISHABLE with your Stripe publishable key (pk_test_...).
// 4) Add secret STRIPE_WEBHOOK_SECRET after you register the webhook in Stripe dashboard (see next prompt).
// Acceptance criteria: Secrets appear in the project's Secrets list and are available to Preview and Publish.
Prompt 3 — Register webhook and test in Preview (Goal: verify flow)
// Goal: Test payment flow via Lovable Preview and register webhook in Stripe.
// Steps (paste into Lovable chat as instructions):
// 1) Click Preview in Lovable. Copy the public Preview URL (https://...).
// 2) In Stripe Dashboard > Developers > Webhooks, create endpoint: [Preview URL]/api/webhook and select "checkout.session.completed" as test event.
// 3) In Lovable Preview, open /checkout and click Buy — you should be redirected to Stripe Checkout.
// 4) In Stripe Dashboard, send test webhook event to the Preview URL and confirm /api/webhook returns 200.
// Acceptance criteria: Checkout session is created and Stripe Dashboard shows session; webhook test returns 200 and your handler logs/receives the event.
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
Use a server-side integration (never expose secret keys in client code), keep secrets in Lovable's Secrets UI, generate helper code with Lovable's chat/code edits but manually review for security, verify webhooks with signatures, use idempotency for retry-safety, test in Stripe/PayPal test-mode via Lovable Preview for UI, and deploy server code by syncing to GitHub and setting environment variables on your production host.
// pages/api/create-payment-intent.js
// // Server-only code, ensure STRIPE_SECRET_KEY is set via Lovable Secrets and in your deploy env
const Stripe = require('stripe');
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2022-11-15' });
module.exports = async (req, res) => {
// // Only POST
if (req.method !== 'POST') return res.status(405).end();
const { amount, currency, idempotencyKey } = req.body;
try {
// // Create PaymentIntent server-side; pass idempotency to guard retries
const pi = await stripe.paymentIntents.create(
{ amount, currency, payment_method_types: ['card'] },
{ idempotencyKey }
);
// // Return client_secret to the client (safe to send)
res.json({ clientSecret: pi.client_secret });
} catch (err) {
res.status(500).json({ error: err.message });
}
};
// pages/api/stripe-webhook.js
// // Disable body parsing for raw verification
export const config = { api: { bodyParser: false } };
const Stripe = require('stripe');
const { buffer } = require('micro');
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2022-11-15' });
module.exports = async (req, res) => {
if (req.method !== 'POST') return res.status(405).end();
const sig = req.headers['stripe-signature'];
const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
const buf = await buffer(req);
let event;
try {
// // Verify signature
event = stripe.webhooks.constructEvent(buf.toString(), sig, webhookSecret);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}
// // Handle relevant events
if (event.type === 'payment_intent.succeeded') {
const pi = event.data.object;
// // Persist transaction to DB (call Supabase or your DB here)
}
res.json({ received: true });
};
Final practical notes: Always review AI-generated payment code for missing verification, error handling, or leaking secrets. Use Lovable for iteration (Chat edits, file patches, Preview) and push server logic to a deploy target via GitHub sync where you configure env vars and run real tests.
When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.
Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
CPO, Praction - Arkady Sokolov
May 2, 2023
Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!
Co-Founder, Arc - Donald Muir
Dec 27, 2022
Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.
Co-CEO, Grantify - Mat Westergreen-Thorne
Oct 15, 2022
Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.
Co-Founder, Church Real Estate Marketplace - Emmanuel Brown
May 1, 2024
Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!
Production Manager, Media Production Company - Samantha Fekete
Sep 23, 2022