Add a payment button to your Bolt.new app
Bolt.new spins up full-stack apps from a prompt — but real payments still need an account, a key, and a webhook. Skip all of it: paste two lines of HTML and your Bolt project starts charging customers immediately.
Why Bolt.new + Stripe rarely ships
Bolt.new generates impressive apps in minutes — Vite + React + Tailwind, sometimes a Node backend, sometimes Hono on the edge. The moment you ask the AI to "add Stripe payments," it starts shipping production-shaped code into a sandbox: client SDK loads, environment variables that the editor can't store securely, webhook handlers with no real domain, and a checkout flow that 404s the second you leave the StackBlitz container. By the time you've debugged the loop, your one-shot Bolt project has turned into a real engineering job.
- Bolt's container can't securely hold a Stripe secret key for production use.
- Webhooks require a public URL — the StackBlitz preview URL is not a stable production target.
- Stripe SDK forces a client/server split that complicates Bolt's single-shot generation.
- Every regenerate cycle risks losing the carefully wired payment code.
The fix: a button that doesn't care about the backend
PayRequest's Payment Button is a plain HTML anchor styled by one CSS file. There's no SDK, no key, and no callback — so Bolt.new doesn't need to fight its own architecture to add it. Drop the snippet into the generated component, deploy from Bolt, and the click hands off to your branded PayRequest checkout. The whole integration survives every regenerate.
Lives in the generated JSX
It's an <a> with a className. Bolt keeps it as plain HTML across regenerates, no special component to preserve.
No secret keys in the container
The button is a public link to your PayRequest URL. Nothing sensitive ever needs to live in the Bolt environment.
Webhooks happen on PayRequest
Receipt emails, fulfilment, dunning, refunds — all on PayRequest. Bolt's project stays purely a front-end.
Survives 'regenerate'
Because it's just HTML, prompting Bolt to redesign the page doesn't break the payment integration. Wrap it in a comment and Bolt preserves it.
The whole integration, in two lines of HTML
Paste the <link> in your Bolt project's index.html (or root layout). Drop the <a> into any component the AI generates. That's it.
<!-- 1. Stylesheet — paste once in <head> -->
<link rel="stylesheet"
href="https://payrequest.app/embed/button.css">
<!-- PayRequest button — keep as-is across regenerates -->
<a href="https://payrequest.me/yourhandle/early-access"
class="pr-btn pr-btn--default"
target="_blank"
rel="noopener">Pay €19</a>Three styles ship with the stylesheet — pick one to fit Bolt's generated design.
Step-by-step: from Bolt prompt to live payment
Create the Smart Link in PayRequest
Sign in → Payment Page → Smart Links → New. Set the amount, pick methods (card, Apple Pay, iDEAL, PayPal). Copy the URL.
Open Bolt.new and pick a project
Either prompt a fresh project ("a pricing page for my SaaS") or open an existing one. Bolt's editor is the live source — you'll edit there.
Add the stylesheet to index.html
Inside <head>, paste <link rel="stylesheet" href="https://payrequest.app/embed/button.css" />. One line, once per project.
Drop the anchor in any component
Hero CTA, pricing tier, blog post — wherever the Pay button belongs. The button renders instantly in Bolt's preview.
Deploy from Bolt
Click Deploy → Vercel/Netlify/Bolt's host. The button is plain HTML, so it works on every deployment target. Test the click, take your first payment.
Bolt.new + Payment Button vs the alternatives
| Method | Setup time | Backend in Bolt? | Secret key? | Branded checkout | Payment methods |
|---|---|---|---|---|---|
Stripe Checkout (Bolt-generated) | 1–2 hours debugging | Required | Yes | Limited | Card + Apple/Google Pay |
Stripe Elements (Bolt-generated) | Half a day | Required | Yes | Manual styling | Configurable |
PayPal SDK | 1 hour | Sometimes | Yes | PayPal-branded | PayPal + cards |
PayRequest Payment ButtonBest | 1 minute | None | None | Yours | 20+ including iDEAL, SEPA, Klarna |
What Bolt.new builders ship with the Payment Button
AI-prompted SaaS landing pages
Generate the pricing tier and the Pay button in the same prompt. Hit Deploy. The early-access waitlist becomes real revenue without an extra build cycle.
Templates and prompt packs
Sell the prompt-pack you used to generate this Bolt project. The button is a plain anchor — Bolt doesn't strip it on regenerate.
Hackathon and demo-day builds
Bolt is fastest-to-publish; the Payment Button is fastest-to-charge. Together: from idea to first sale in a hackathon timeslot.
Internal tools that need a paywall
Lock a Bolt-generated tool behind a one-time payment with a single anchor. Zero auth code required for the gate.
Why this beats asking Bolt to add Stripe
Every developer who's prompted Bolt with "add Stripe payments" knows what happens: it generates production-shaped code that needs a real account, a real domain, real environment variables, and real webhook security. None of that exists in a fresh Bolt session, and by the time you've wired it up, the magic of one-shot generation is gone. The Payment Button is the rare integration that doesn't need anything outside Bolt to work.
- Renders in any framework Bolt picks — React, Vue, Svelte, plain HTML.
- No build-step changes. Vite, Next, Remix — same anchor, same stylesheet.
- Survives "redesign this page" prompts because it's just HTML.
- No vendor lock-in. Switch providers (Stripe, Mollie, PayPal, Ponto) in PayRequest without touching Bolt.
Frequently asked questions
Does the Payment Button work inside Bolt.new's preview environment?+
Will Bolt strip the snippet when I regenerate the page?+
Do I need a Stripe account to use the Payment Button in Bolt?+
Can I use the Payment Button on Bolt's free tier?+
What about subscriptions or recurring payments?+
Does it work whether Bolt deploys to Vercel, Netlify, or its own host?+
Ship your Bolt.new app with real payments today
Sign up, create a Smart Link, paste the snippet into your Bolt project. Five minutes, zero SDK, real money.