Pre-built code blocks

Stripe checkout and cart

Stripe Checkout + cart

For when the answer to “It takes payments” is yes.

Single-merchant checkout where the SERVER decides the price, a signature-verified webhook, and a cart drawer.

Built by hand again in 10 of 20 audited projects before this existed. Each rebuild was another chance to make the mistake below.

A shopping basket on a counter beside a price tag whose chain is fixed to the counter rather than the basket, with a wax sealed envelope arriving along the counter

Skip the rebuild

You do not write this one. It arrives in your project as ordinary source you can read, change and keep, with its audit record and its caveats beside it.

  1. Download the Playground. It is free and runs on your own machine.
  2. Start a new app and tick “It takes payments”.
  3. This block is written in, along with anything else you ticked.

Download the Playground See the other blocks

The mistake it removes

High-value and easy to get wrong: a checkout that trusts a client-supplied price is a free-money bug. Rebuilt in ~10/20 projects.

What is already handled

Each of these was checked by running the code, not by reading it.

What the audit found

Named rather than summarized. The reasoning behind each one ships inside the block, so it travels with the code instead of living on a page you have to trust.

What you still have to do

A copied file cannot own your secrets, your host or your legal obligations. This is the part the block deliberately does not claim.

What lands in your project

node

  • node/create-checkout-session.js
  • node/stripe-webhook.js
  • node/_checkout-core.js
  • node/_fulfillment-log.js

Serverless handlers (Vercel-style). Reads prices from YOUR catalog.json; the browser only sends item ids and quantities. Requires the `stripe` npm package (npm i stripe) — declared in stacks.node.dependencies. The two `_`-prefixed files are helpers, not endpoints: every decision the checkout makes lives in `_checkout-core.js` (no SDK, so it is testable), and `_fulfillment-log.js` is the dedupe seam the webhook claims each session through. Vercel skips `_`-prefixed files under /api rather than publishing them as functions.

vanilla

  • vanilla/cart.js
  • vanilla/catalog.example.json

Cart drawer + the catalog shape. Rename catalog.example.json to catalog.json and put it where the handler reads it (../assets/catalog.json).

Needs stripe ^17 from npm.

What you supply

Licensed MIT. It is a starting point, not a finished product.

Get it

Download the Playground See the other blocks

Nothing here is locked. The files are yours, in your folder, under a permissive license.

Questions

Is Stripe checkout and cart audited?
It was audited on 2026-08-28, and the verdict was not a clean pass.
What do I still have to do myself?
Keep STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET in your host's secret store, serve the webhook over HTTPS at the endpoint registered in Stripe, and replace the in-process fulfillment log with a unique index on session_id in your own store before you take real money. The price-trust rule and the signature check are shipped; secret custody and durable dedupe are not things a copied file can own.
How do I get this code?
Download the Playground, start a new app, and tick “It takes payments”. The block is written into your project as ordinary source you can read and edit.

All pre-built code blocks · Learn to build from zero · The coding guide