Checkout in plain HTML

Time: ~15 minutes | Difficulty: Beginner | Type: part of Examples

Finished project: headless-vanilla. Clone it if you want the working funnel first — or keep reading and rebuild the three pages yourself.

Proof that the Headless SDK needs zero tooling: three static HTML files, the SDK from a CDN, and you get a real store — catalog, cart, card payment with automatic 3DS, and one-click post-purchase upsells. If you can host a folder, you can host this.

Page	File	SDK calls
Home / cart	`index.html`	`catalog.listProducts()` → `checkout.createSessionUrl()`
Checkout	`checkout.html`	`parseTokensFromUrl()` → `loadSession()` → `tokenizeCard()` → `processPayment()`
Thank you	`thank-you.html`	`offers.listOffers()` → `offers.processOfferPayment()`

Setup — two lines to edit

No .env, no build. Provision a demo store from the terminal, then paste your store id:

npx -p @tagadapay/node-sdk tagada-init you@example.com

// assets/config.js
export const STORE_ID = 'store_xxxxxx';        // ← from tagada-init
export const ENVIRONMENT = 'production';       // or 'development'

Serve the folder with anything (npx serve, nginx, S3, a USB stick) and open index.html.

The SDK ships as an IIFE bundle on jsDelivr — window.TagadaHeadless appears after one <script> tag. TagadaHeadless.create({ storeId, environment }) gives you the same client as the npm package.

Page 1 — cart to checkout in one call

The home page lists real products from your catalog and keeps the cart in localStorage. Checkout is a single call — createSessionUrl creates the session and builds the URL to send the customer to:

const { url } = await tagada.checkout.createSessionUrl({
  items,                        // [{ variantId, quantity }]
  currency: state.currency,
  checkoutPath: '/checkout.html',
});
window.location.href = url;

Page 2 — the checkout

checkout.html starts with the two lines that make redirects painless. If the customer is coming back from a 3DS challenge or a processor redirect, maybeResumeFromUrl() polls the payment to a terminal state and hands you the result; otherwise it returns null and the page renders normally:

const resumed = await tagada.payment.maybeResumeFromUrl();
if (resumed?.status === 'succeeded') {
  window.location.replace(`./thank-you.html?orderId=${resumed.order.id}`);
}

Then the normal path — read the tokens, load the session, and on submit: save the customer, pick a shipping rate, tokenize, charge:

const tokens = CheckoutModule.parseTokensFromUrl();
const session = await tagada.checkout.loadSession(tokens.checkoutToken, tokens.sessionToken);

// on submit
await tagada.checkout.updateCustomerAndAddress(session.id, { customer, shippingAddress });
const rates = await tagada.checkout.getShippingRates(session.id);
if (rates.length) await tagada.checkout.selectShippingRate(session.id, rates[0].id);

const { tagadaToken } = await tagada.payment.tokenizeCard({ cardNumber, expiryDate, cvc, cardholderName });
const result = await tagada.payment.processPayment({
  checkoutSessionId: session.id,
  tagadaToken,
  paymentMethod: 'credit-card',
});

tokenizeCard() talks to Basis Theory directly from the browser — raw card data never touches your server, which keeps you out of PCI scope. If processPayment returns requires_redirect, navigate to result.redirectUrl (the example shows the POST-form variant too) and maybeResumeFromUrl() finishes the job when the customer comes back.

Page 3 — one-click upsells

The thank-you page lists upsell offers and charges the saved card in one click — a MIT charge, no card form the second time:

const offers = await tagada.offers.listOffers({ type: 'upsell' });

// when the customer clicks "Add to my order"
await tagada.offers.previewOffer({ offerId });          // re-validate pricing
const result = await tagada.offers.processOfferPayment({
  offerId,
  mainOrderId: orderId,
});

Same funnel shape as the funnel demos — this is just the smallest possible implementation of it.

Finished project on GitHub

Three HTML files, ready to serve — edit config.js and open

Same thing in React

headless-react-store — the fork-ready boutique storefront

Checkout flow reference

Sessions, addresses, shipping rates, promo codes

Offers reference

listOffers, previewOffer, processOfferPayment

Overview

Payments

Web Integration

Tracking & Attribution

Node SDK

Funnels

Funnel demos

Examples

Shopify

SaaS Billing

Headless SDK

Plugin SDK

Plugin CLI

Studio MCP (AI Agents)

CRM MCP (AI Agents)

Hosting & A/B Testing

Internal

Checkout in plain HTML

Checkout in plain HTML

Setup — two lines to edit

Page 1 — cart to checkout in one call

Page 2 — the checkout

Page 3 — one-click upsells

Next

Finished project on GitHub

Same thing in React

Checkout flow reference

Offers reference

​Checkout in plain HTML

​Setup — two lines to edit

​Page 1 — cart to checkout in one call

​Page 2 — the checkout

​Page 3 — one-click upsells

​Next

Finished project on GitHub

Same thing in React

Checkout flow reference

Offers reference

Checkout in plain HTML

Setup — two lines to edit

Page 1 — cart to checkout in one call

Page 2 — the checkout

Page 3 — one-click upsells

Next