Checkout Templates
Checkout Templates
Official starting-point checkout page designs, built for the Hosted Payment Fields integration.
Official starting-point designs for a tailored ("Stripe-style") checkout page — built for the Hosted Payment Fields integration. Use one of these as your starting point instead of designing a checkout page from scratch.
1. Available templates
| Template | What it shows | Live demo |
|---|---|---|
| Card Checkout | A clean, tailored card checkout — email + card details + name, order summary panel | /templates/card-checkout |
| Card Checkout + Wallets | Same layout, with Apple Pay / Google Pay buttons above the card fields | /templates/card-checkout-wallets |
Browse all templates at /templates.
2. Using a template
- Open a template's live demo page and click View code (top of the payment panel) to see and copy the full source — no repo access required.
- Replace the placeholder card inputs with real
Hosted Payment Fields markup
(
hostedfield:cardNumber,hostedfield:cardExpiryDate,hostedfield:cardCVV, or the combinedcardDetailsfield). - Wire the form submit to generate a
paymentTokenand send it through the Direct Integration (see the Hosted Payment Fields guide, §6 — the exact Direct-request field name for a card token is still to be confirmed with the gateway team). - If adding wallet buttons, treat that as a separate, unverified integration step — see Digital Wallets before wiring them up. The wallet buttons in the "Card Checkout + Wallets" template are visual placeholders only (they're wired to no-op click handlers, not a real wallet session).
3. What's still open
- These are design/layout templates, not functioning payment forms — no real Gateway connection, no real hosted fields wired in yet.
- Combining wallet buttons with Hosted Payment Fields on one page is not a documented Gateway flow (see Hosted Payment Fields → §10). Treat the wallets template as a design reference, not a working pattern, until that's confirmed.
- More template variants (e.g. a subscription/recurring checkout, a one-page express checkout) can be added here as they're built.