The checkout page

The checkout is one page: an email field, the card form, the order bump beside the pay button, and a running total that updates as the buyer ticks things. Card details go from the buyer’s browser to Stripe directly and never touch your server.

What the buyer sees

• Email — the one thing Cartless needs to make the order. It says so.
• Order summary — the product, the bump if ticked, tax, shipping, and the total. The total is announced to screen readers when it changes.
• Discount code — a field under Have a discount code?, if you have any coupons. Codes can also arrive in the link.
• Payment — Stripe’s card form. Below it: Secured by Stripe. Your card is not stored on this site.
• Pay — the button carries the amount: Pay $68.00.

If the product has variants, the size and colour choices are here too, and a sold-out combination cannot be selected.

Apple Pay and Google Pay

Wallets appear above the card form when the buyer’s browser and device offer them — Safari on an iPhone or Mac with a card in Wallet, Chrome with Google Pay set up. The wallet sheet shows the same total as the page, and ticking the bump updates it. There is nothing to switch on; Stripe decides what the browser can show.

For Apple Pay to appear on your own domain, Stripe has to verify the domain once. That is done in the Stripe dashboard under Settings → Payment methods → Apple Pay, where you add the domain and place the file it gives you at /.well-known/apple-developer-merchantid-domain-association. Cartless does not do this for you.

What is asked before payment, and what after

A choice appears before payment only if it changes the price or whether you can ship the order. Everything else — a name for the shirt, a grind for the beans — is asked on the thank-you page, after the money is taken, where it costs you no conversion. See Variants and stock for how a product’s choices are timed.

Blocks, Elementor and the shortcode render the same form

The checkout is one renderer. The [cartless_checkout] shortcode, the Cartless Checkout block, and the Elementor widget all call it, so the buyer gets the same form whichever editor you used. The differences are only the chrome around it — colours, spacing, what the block’s controls expose.

When something is not ready

The checkout says what is wrong rather than showing a broken form:

• Payments are not finished setting up — Stripe keys are missing. Finish the checklist under Cartless → Settings.
• This funnel has no product to sell yet — attach a product on the funnel’s Offers tab.
• This block only works on a checkout step — the shortcode or block is on a page that is not a checkout step.
• The payment form could not load — usually a browser extension blocking third-party frames; the message says so.

If a payment fails, the buyer is told their card has not been charged.