Section reference › Pricing & commerce

Checkout `"type": "checkout"`

A checkout page: contact and shipping form on the left, order summary with totals on the right. Front-end only; the form posts to formAction in site.json.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "checkout",
  "shipping": 6,
  "freeOver": 50,
  "countries": [
    "United States",
    "Canada",
    "Mexico"
  ],
  "items": [
    {
      "name": "House Espresso Blend",
      "price": 16,
      "qty": 2,
      "image": "placeholder"
    },
    {
      "name": "Ceramic Pour-over Set",
      "price": 42,
      "qty": 1,
      "image": "placeholder"
    },
    {
      "name": "Almond Croissants (4 pack)",
      "price": "$12.50",
      "qty": 1,
      "image": "placeholder"
    }
  ]
}

Options#

Option	Type	Default	Description
`items`	array	—	Products in the order summary (same fields as the cart).
`shipping`	number	`9`	Shipping cost below the free-shipping threshold.
`freeOver`	number	`75`	Subtotal from which shipping is "Free".
`countries`	array	`["United States", "Canada", "United Kingdom", "Australia"]`	Options of the Country dropdown.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`name`	string	—	Product name.
`price`	number \| string	—	Unit price: 16 or "$16.00".
`qty`	number	`1`	Quantity.
`image`	string	—	Thumbnail.

Tips#

Totals are calculated once when the site is built, from the items you list here. They do not follow changes made on the cart page.
The form fields are fixed (name, email, phone, address, city, postcode, country, notes). Payment itself must happen at your payment provider.
Tax is fixed at 8%; the currency symbol comes from "currency" in demo.json (default "$"). Default padding is "sm".

Where it's used#

Open these pages in template/ to see it working:

Coffee Shop: template/cafe/checkout.html (source src/demos/cafe/pages/checkout.json)
Gym & Fitness: template/gym/checkout.html (source src/demos/gym/pages/checkout.json)
Interior Design: template/interior-design/checkout.html (source src/demos/interior-design/pages/checkout.json)
Fashion Store: template/fashion-store/checkout.html (source src/demos/fashion-store/pages/checkout.json)

Checkout "type": "checkout"