Headless checkout, the easy way
"Headless" means your website's frontend and the commerce engine are separate pieces talking over an API. Big brands do it to control every pixel. You can do it to keep the site you have and bolt a checkout on, which is a much more modest and much more common need.
Headless, translated
Your pages are yours: built in Lovable, Astro, Next.js, Webflow, whatever. The commerce part (products, cart logic, payment, orders) runs somewhere else and your pages call it. That is all headless means.
Where the payment step happens
The pragmatic answer is a hosted checkout: Stripe's page, on your own Stripe account. It handles cards, wallets, 3D Secure, receipts and compliance, and buyers recognise it. Your site never touches a card number. Buyers come back to your page afterwards.
The three pieces you need
- A catalogue with prices and stock that the frontend can read.
- A checkout endpoint that turns a basket into a Stripe Checkout session, validating prices and stock on the server.
- Order storage that is updated when Stripe confirms payment, not when the browser says so.
Building those yourself is a weekend plus ongoing maintenance. AddTheShop provides all three behind one script tag and a small API.
Two ways to use it
Drop-in: paste the snippet, get our product grid and cart, done.
Headless proper: call GET /v1/storefront/{pk}/products, render your own cards, and POST /v1/storefront/{pk}/checkout with the chosen items to get the Stripe URL. Same backend, your design.
What you avoid
Stripe keys in your repo, a webhook handler, an orders database, PCI questions, and the 3 a.m. bug where stock went negative.