Bolt.new Stripe checkout does nothing when clicked

You built a storefront or SaaS in Bolt.new, wired up the Stripe checkout button, deployed — and the buy button just… doesn't. No Stripe page opens. Sometimes a brief flicker, sometimes nothing at all. Unlike a mid-funnel bug, this one blocks every single visitor who tries to pay.

The good news: this failure announces its cause loudly, in a place most founders never look. Your browser will literally print the reason.

The two-minute setup: watch the click fail

1. Open your deployed site — not the Bolt preview; that's a different environment (more on this below).
2. Press F12 (or right-click → Inspect) to open DevTools. Keep the Console and Network tabs where you can see them.
3. Click the buy button once, and watch what appears.

What happens next sorts you into one of four cases.

Case 1: nothing appears in the Network tab

The click isn't even trying to reach a server. Look at the Console — a red error at click time (... is not a function, Cannot read properties of undefined) means the checkout code crashed before it started, often because a Stripe script or the publishable key never loaded. The Console line names the exact file and line; that's the thing that needs fixing. If there's no error at all, the button was never wired to a click handler — pure missing code.

Case 2: a request appears and fails with 404

You'll see a call to something like /api/create-checkout-session turn red with status 404. Meaning: your frontend is calling a backend endpoint that doesn't exist on the deployed site. This is the most Bolt-specific failure — creating a Stripe Checkout session requires server-side code holding your secret key, and depending on how the app was scaffolded and where it's hosted, that server piece may never have been generated, or didn't get deployed with the rest of the site. The button was pointing at a promise.

Case 3: the request fails with 500 — read the body

Click the red request in the Network tab, then open its Response (or Preview). Stripe's error messages are unusually human. The two you're most likely to see:

• No such price: 'price_...' — your code references a price ID from test mode while running with live keys, or vice versa. Products and prices exist separately in each mode; the ID in your code must come from the same mode as the key.
• You did not provide an API key or Invalid API key — the server can't see STRIPE_SECRET_KEY. It works in the Bolt preview because the key is set there; your live host has its own environment-variable settings, and nobody set the key in them.

Case 4: works in the Bolt preview, dead on the live site

This is nearly always environment variables. The preview and your deployed site are two different machines with two different sets of secrets. Open your host's dashboard — Netlify: Site configuration → Environment variables; Vercel: Settings → Environment Variables — add STRIPE_SECRET_KEY with the value from Stripe → Developers → API keys, and redeploy. Environment changes don't apply to builds that already exist.

What you can close out yourself

Cases 3 and 4 are usually self-serve: set the env var, match price IDs to the right mode, redeploy, and test the whole flow in test mode with card number 4242 4242 4242 4242 before flipping to live. (If test works and live doesn't, that's its own article.)

Cases 1 and 2 mean code is missing or broken: the fix is writing the server-side checkout endpoint properly and re-wiring the button — deeper surgery on a generated codebase, and the version of this bug we're usually hired for. Either way, you now know which case you have, which is most of the diagnosis.