Docs Block Reference Checkout

Checkout

The checkout-form block. Renders all the customer / shipping / payment fields needed to complete an order, with a customisable field list, button text, and styling.

The block has a fixed classic preset internally — the rest of the panel exposes the field editor + colour / radius controls.

When to use it

  • Dedicated /checkout page after the cart
  • Single-page-checkout flow on a product page
  • Subscription checkout

When not to use it

  • Order confirmation — use Receipt
  • Shopping-cart contents — use Cart

Fields list (drag to reorder)

Default fields (in order):

  • Email — half-width, required, locked (always required)
  • Phone — half-width, optional
  • First Name — half-width, required
  • Last Name — half-width, required
  • Company — full-width, optional, off by default
  • Address — full-width, required
  • Apt, Suite, etc. — full-width, optional
  • City — half-width, required
  • State — half-width, required
  • ZIP Code — half-width, required
  • Country — half-width, required

Each row has:

  • Label input (rename freely)
  • Required checkbox (locked-on for Email)
  • Drag handle to reorder

Field width (half / full) is hardcoded by field id — no per-field toggle.

Add Custom Field button below the list.

Button Text — text input (default: Pay now)

Label of the submit / pay button.

Colours (3-up grid)

  • Button — submit-button fill (default: dark)
  • Labels — field label text colour (default: dark; auto-flips

    • to white on dark page backgrounds)

  • Field BG — input fill (default: light grey; semi-transparent

    • white on dark page backgrounds)

Sliders

  • Radius — 0–20px (default: 4). Field corner roundness.
  • Max Width — 400–1200px (default: 400). Form container

    • max-width.

  • Border Width — 0–3px (default: 1). Field border thickness.

    • Auto-hidden when semi-transparent field style is active.

Per-device overrides

Field list, colours, Radius, Max Width, Border Width all have per-device values.

Common override:

  • Max Width — narrower on mobile so fields are tappable
  • Toggle Company off if not relevant to your customers

Common patterns

Standard checkout

Default field list · Button Text Pay now · Button dark · Field BG #f5f5f5 · Radius 4 · Max Width 400 · Border Width 1.

Streamlined express checkout

Disable Company, Apt, Phone · Single name field · Button Text Complete order · Radius 8 · Max Width 360.

Related

  • blocks/cart — the cart page that precedes checkout
  • blocks/receipt — the post-purchase confirmation
  • blocks/products — related products / upsells below the form