Checkout page

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.

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.

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.

Open the Checkout step

In the product or subscription editor, open the Checkout step.

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).

Add order bumps (optional)

Surface a small, relevant add-on on the checkout — see Upsells & bundles.

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.

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

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.

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 and 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.

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:

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;
  }
});

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.

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 delivered to your server, which are signed and retried.

Testing your checkout

Open in a private window

Use the checkout link (or your embedded page) in an incognito window.

Complete a test transaction

Pay with a test card in test mode.

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.

Re-test after changes

Repeat whenever you change pricing, the template, embed mode, discounts, or upsells.

What’s next

To add order bumps and post-purchase offers, see Upsells & bundles.
To skin the page that leads into checkout, see Page templates.
To act on payment events server-side, see Webhook events.
To see where checkout data lands, see Orders & customers.

For creators

Create Tools

Selling products & subscriptions

Payments & payouts

Operating your business

For buyers

Key elements of the checkout

Configuring fields

Checkout templates (skins)

Style tokens

The palette

Checkout layouts

Built-in checkout templates

Branding the checkout

Payment methods and currencies

Policies and legal links

Embedding the checkout on your own site

Testing your checkout

What’s next

​Key elements of the checkout

​Configuring fields

​Checkout templates (skins)

​Style tokens

​The palette

​Checkout layouts

​Built-in checkout templates

​Branding the checkout

​Payment methods and currencies

​Policies and legal links

​Embedding the checkout on your own site

​Testing your checkout

​What’s next

Key elements of the checkout

Configuring fields

Checkout templates (skins)

Style tokens

The palette

Checkout layouts

Built-in checkout templates

Branding the checkout

Payment methods and currencies

Policies and legal links

Embedding the checkout on your own site

Testing your checkout

What’s next