Three-step checkout with an order summary

Default content

{
  "title": "Checkout",
  "currency": "GBP",
  "initialStep": 1,
  "contact": {
    "label": "Contact",
    "email": {
      "label": "Email",
      "placeholder": "[email protected]"
    },
    "newsletter": "Send me the monthly firing notes (one email, first Friday)"
  },
  "delivery": {
    "label": "Delivery",
    "firstName": {
      "label": "First name"
    },
    "lastName": {
      "label": "Last name"
    },
    "address": {
      "label": "Address",
      "placeholder": "House number and street"
    },
    "city": {
      "label": "Town or city"
    },
    "postcode": {
      "label": "Postcode"
    },
    "country": {
      "label": "Country",
      "options": [
        "United Kingdom",
        "Ireland",
        "France",
        "Netherlands"
      ]
    },
    "methodsLabel": "Delivery method",
    "methods": [
      {
        "id": "standard",
        "label": "Standard, tracked",
        "detail": "3–5 working days",
        "price": 4.95
      },
      {
        "id": "express",
        "label": "Express",
        "detail": "Next working day if ordered by 1pm",
        "price": 9.5
      },
      {
        "id": "collect",
        "label": "Collect from Kelham Island",
        "detail": "Ready tomorrow from 10am",
        "price": 0
      }
    ]
  },
  "payment": {
    "label": "Payment",
    "methods": [
      {
        "id": "saved-card",
        "label": "Saved card",
        "detail": "Used for your last order"
      },
      {
        "id": "new-card",
        "label": "New card",
        "detail": "Visa, Mastercard or Amex"
      },
      {
        "id": "bank",
        "label": "Pay by bank",
        "detail": "Approve in your banking app"
      }
    ],
    "savedCard": {
      "name": "Visa",
      "masked": "•••• 4242",
      "expiry": "Expires 08/28"
    },
    "cardNumber": {
      "label": "Card number",
      "placeholder": "Long number on the front"
    },
    "cardExpiry": {
      "label": "Expiry",
      "placeholder": "MM / YY"
    },
    "cardCvc": {
      "label": "Security code",
      "placeholder": "CVC"
    },
    "billingSame": "Billing address is the same as delivery",
    "secureNote": "Payments are encrypted and processed by our card partner. We never see or store your card number."
  },
  "prefill": {
    "email": "[email protected]",
    "firstName": "Ada",
    "lastName": "Moreno",
    "address": "14 Example Row",
    "city": "Sheffield",
    "postcode": "S3 8AA"
  },
  "items": [
    {
      "product": {
        "name": "Hollin tumbler, set of 4",
        "href": "#",
        "category": "Tableware",
        "material": "Speckled stoneware, oat satin glaze",
        "price": 48,
        "images": [
          {
            "src": "https://images.unsplash.com/photo-1610701596007-11502861dcfa?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "Speckled stoneware tumblers stacked on a white shelf"
          },
          {
            "src": "https://images.unsplash.com/photo-1610701596061-2ecf227e85b2?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "Hollin tumblers on an oak table beside cream bowls and serving boards"
          },
          {
            "src": "https://images.unsplash.com/photo-1610701596295-4dc5d6289214?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "Cream tableware and a striped linen napkin laid on a table"
          },
          {
            "src": "https://images.unsplash.com/photo-1493106641515-6b5631de4bb9?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "Clay-covered hands throwing a pot on the wheel"
          }
        ],
        "swatches": [
          {
            "name": "Oat",
            "color": "oklch(0.86 0.035 80)"
          },
          {
            "name": "Honey",
            "color": "oklch(0.72 0.11 70)"
          },
          {
            "name": "Chalk",
            "color": "oklch(0.95 0.01 90)"
          }
        ],
        "badge": "Bestseller",
        "rating": {
          "value": 4.9,
          "count": 212
        }
      },
      "variant": "Oat glaze · Set of 4",
      "quantity": 1
    },
    {
      "product": {
        "name": "Edale linen cushion cover",
        "href": "#",
        "category": "Linen",
        "material": "Stonewashed Lithuanian linen, 230 gsm",
        "price": 34,
        "compareAt": 42,
        "images": [
          {
            "src": "https://images.unsplash.com/photo-1616627561950-9f746e330187?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "Striped and rust linen cushions on an oak bed"
          }
        ],
        "swatches": [
          {
            "name": "Rust",
            "color": "oklch(0.55 0.13 45)"
          },
          {
            "name": "Flax stripe",
            "color": "oklch(0.83 0.04 85)"
          },
          {
            "name": "Sage",
            "color": "oklch(0.7 0.05 140)"
          }
        ],
        "badge": "Autumn sale",
        "rating": {
          "value": 4.8,
          "count": 119
        }
      },
      "variant": "Rust · 50 × 50 cm",
      "quantity": 2
    },
    {
      "product": {
        "name": "Ember & Pine candle",
        "href": "#",
        "category": "Candles",
        "material": "Rapeseed wax, cedar and smoked pine, 60-hour burn",
        "price": 28,
        "images": [
          {
            "src": "https://images.unsplash.com/photo-1603006905003-be475563bc59?auto=format&fit=crop&w=900&h=1100&q=80",
            "alt": "A candle burning in a smoked glass on sheepskin"
          }
        ],
        "badge": "New",
        "rating": {
          "value": 4.9,
          "count": 76
        }
      },
      "variant": "220 g glass",
      "quantity": 1
    }
  ],
  "discount": {
    "label": "SLOWAUTUMN",
    "amount": 13.6
  },
  "labels": {
    "continue": "Continue",
    "edit": "Change",
    "step": "Step {n} of {total}",
    "summary": "Your order",
    "subtotal": "Subtotal",
    "shipping": "Delivery",
    "free": "Free",
    "total": "Total",
    "totalNote": "Including VAT",
    "quantity": "Quantity {count}"
  },
  "placeOrder": {
    "label": "Place order",
    "href": "#",
    "variant": "primary"
  }
}