> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pocketsflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout page

> Customize the Pocketsflow checkout page for higher conversion and a smoother buyer experience.

The checkout page is where interest turns into revenue. Pocketsflow uses **one
checkout surface** for both one-time products and subscriptions, and it can run as
its own page **or embedded on your own site**. This guide covers configuring
fields, skinning it with templates, and embedding it.

<Note>
  Payments are processed by our payment infrastructure. The card form itself lives inside a secure
  embed; Pocketsflow wraps it with your branding, collects the buyer's email
  and name, applies discounts and order bumps, and handles the redirect or success
  handshake. You never handle raw card data.
</Note>

## Key elements of the checkout

A Pocketsflow checkout typically includes:

* A **product panel** — name, price, image, and (optionally) a review and a
  refund-guarantee line.
* **Buyer fields** — email (always) and optional first / last name.
* The **payment form** (the secure embed) with the buyer's local payment methods.
* **Discount code** entry, when you run coupons.
* Optional **order bumps** — a small add-on the buyer can tick.
* **Policy links** — refund, terms, privacy.

Your goal is to make this page simple, predictable, and trustworthy.

## Configuring fields

Keep the form short — every extra field costs conversion.

<Steps>
  <Step title="Open the Checkout step">
    In the product or subscription editor, open the **Checkout** step.
  </Step>

  <Step title="Choose which fields to collect">
    Email is always required. Toggle **first name** and **last name** on only if
    you genuinely need them (for personalization, community access, or invoices).
  </Step>

  <Step title="Add order bumps (optional)">
    Surface a small, relevant add-on on the checkout — see
    [Upsells & bundles](/selling/upsells-and-bundles).
  </Step>
</Steps>

<Tip>
  Ask for the least you can. If you don't need a name to fulfill the order, don't
  collect it — a one-field (email) checkout converts best.
</Tip>

## Checkout templates (skins)

Like product pages, the checkout can be **re-skinned with a template**. A checkout
template is pure design data — a set of style tokens plus a five-color palette —
applied over the same checkout. The payment flow and every embed mode are
identical across templates; only the look changes.

### Style tokens

Each template sets:

* **Layout** — the structural arrangement of the checkout (see below).
* **Theme** — `light` or `dark`. Dark also asks the payment embed for its
  night theme so the card form matches.
* **Heading & body fonts** — from the shared type set (sans, serif, mono, Inter,
  Space Grotesk, Poppins, Montserrat, Playfair).
* **Corners** — `sharp`, `soft`, or `round`.
* **Borders** — `thin`, `medium`, or `bold`.
* **Conversion blocks** — a **trust** line (your product's real refund policy as a
  money-back guarantee) and a **testimonial** (the product's top real review shown
  on the panel). These only ever render real data.

### The palette

Five color knobs: **Background** (page + payment column), **Product panel**,
**Text**, **Accent** (links, price, primary button), and **Borders**. The accent
also maps to the nearest named color the payment embed supports, so the card form's
accent matches your skin.

### Checkout layouts

The same checkout DOM can be arranged ten ways (CSS-only, so the payment flow is
untouched):

| Layout      | Arrangement                                                     |
| ----------- | --------------------------------------------------------------- |
| **Split**   | Product panel left, payment right (the shipped default)         |
| **Flipped** | Payment left, product panel right (desktop)                     |
| **Focus**   | One centered column — compact summary, payment below            |
| **Banner**  | Full-width product banner on top, payment centered underneath   |
| **Card**    | The whole checkout floats as one bordered card on a tinted page |
| **Hero**    | Centered product showcase band on top, payment below            |
| **Sidebar** | Slim product rail; the payment column dominates                 |
| **Gallery** | Mirror of sidebar — wide payment left, product rail right       |
| **Sheet**   | One narrow centered stack — the payment-modal look              |
| **Frame**   | A full-bleed colored frame wrapping and splitting the columns   |

### Built-in checkout templates

Pocketsflow ships a library of ready-made skins that combine a layout, theme,
fonts, and palette. Pick one and tweak, or build your own from the tokens above:

| Template          | Theme | Feel                                                 |
| ----------------- | ----- | ---------------------------------------------------- |
| **Classic**       | Light | The shipped default — split layout, `#635BFF` accent |
| **Noir**          | Dark  | Minimal near-black, violet accent                    |
| **Midnight Gold** | Dark  | Deep navy with a gold accent and Playfair headings   |
| **Terminal**      | Dark  | Monospace, green-on-black developer look             |
| **Grape**         | Dark  | Purple, rounded, Poppins                             |
| **Ivory**         | Light | Warm off-white, Playfair, understated gold           |
| **Paper**         | Light | Serif, square corners — printed-page feel            |
| **Latte**         | Light | Warm cream, serif headings                           |
| **Blush**         | Light | Soft pink, rounded, gallery layout                   |
| **Mint**          | Light | Fresh green, clean                                   |
| **Slate**         | Light | Cool grey, grotesk, sidebar layout                   |
| **Crimson**       | Light | White with a bold red frame                          |
| **Lemonade**      | Light | Sunny yellow, Poppins, rounded                       |

<Note>
  Templates that shipped with an earlier accent still match their template and
  automatically render the current, better-contrast palette — so a checkout you
  skinned months ago keeps looking right. A checkout you fully customized keeps
  exactly the look you saved.
</Note>

## Branding the checkout

Make the checkout feel like a natural extension of your brand without confusing
buyers:

* Choose a template (or palette) that matches your product page.
* Keep the headline short and reassuring, not salesy — the selling happened on the
  page; here you're closing.
* Turn on the **trust** block so your refund guarantee is visible at the moment of
  payment.
* Follow the flat house style: separation via borders and contrast, **no drop
  shadows** or hover animations.

## Payment methods and currencies

Depending on the buyer's region and your configuration, our payment infrastructure offers the buyer
appropriate local payment methods (cards and wallets) and currency handling.

* For what's supported and where, see [Payment methods](/payments/payment-methods)
  and [Available countries](/payments/available-countries).
* If you sell globally, test the experience in the currencies and methods your
  audience actually uses.

## Policies and legal links

Reference your policies at checkout so buyers can review them:

* **Refund policy**
* **Terms & conditions**
* **Privacy policy**

Point these at the versions hosted on `pocketsflow.com` (for example,
`/refund-policy`, `/terms`, `/privacy`) or your own equivalents so they're always
current. See [Refunds & disputes](/payments/refunds-and-disputes).

## Embedding the checkout on your own site

The checkout can be embedded in an iframe on your website, so buyers pay without
leaving your page. There are two embed modes:

* **`isOnWebsite`** — the checkout is embedded within your own site layout.
* **`embedCheckoutOnly`** — only the payment portion is embedded (the tightest,
  chromeless embed).

When embedded, the checkout talks to the parent page via `postMessage`:

<CodeGroup>
  ```js Listen for checkout events theme={null}
  window.addEventListener("message", (event) => {
    const msg = event.data || {};

    switch (msg.type) {
      case "resize":
        // Keep the iframe the height of its content
        iframe.style.height = msg.height + "px";
        break;

      case "processing":
        // Payment started. msg.receiptId is the payment id,
        // msg.isSubscription tells you which kind of purchase it is.
        showSpinner();
        break;

      case "success":
        // Fires exactly once, after the order is confirmed.
        // msg.data holds the order; msg.email is the buyer.
        unlockContent(msg.data);
        break;
    }
  });
  ```
</CodeGroup>

Key behaviors to know:

* The `resize` message lets you size the iframe to its content automatically.
* The `processing` message fires as soon as payment begins.
* The `success` message fires **exactly once**, and only after the order has been
  confirmed on the backend — so it always carries the real order, past any
  webhook timing. Use it to unlock content, show your own confirmation, or fire
  analytics.
* Standalone (non-embedded) checkout instead performs a normal redirect to a
  thank-you / success page.

<Warning>
  Treat the `success` message as a UX signal, not proof of entitlement for anything
  security-sensitive. For authoritative fulfillment (granting a license, provisioning
  an account), rely on [webhooks](/api-webhooks/events) delivered to your server,
  which are signed and retried.
</Warning>

## Testing your checkout

<Steps>
  <Step title="Open in a private window">
    Use the checkout link (or your embedded page) in an incognito window.
  </Step>

  <Step title="Complete a test transaction">
    Pay with a test card in test mode.
  </Step>

  <Step title="Confirm the whole path">
    Check desktop and mobile, the confirmation screen or `success` message, the
    delivery email, and that an order and customer appear in your dashboard.
  </Step>

  <Step title="Re-test after changes">
    Repeat whenever you change pricing, the template, embed mode, discounts, or
    upsells.
  </Step>
</Steps>

## What's next

* To add order bumps and post-purchase offers, see [Upsells & bundles](/selling/upsells-and-bundles).
* To skin the page that leads into checkout, see [Page templates](/selling/page-templates).
* To act on payment events server-side, see [Webhook events](/api-webhooks/events).
* To see where checkout data lands, see [Orders & customers](/operations/orders-and-customers).