Checkout Elements

E-commerce checkout components including the full checkout form, order summary, and order confirmation.

Checkout/V2

The main checkout form element with payment processing.

JSON

{
  "type": "Checkout/V2",
  "id": "6Z-Check-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": {
      "--container-font-family": "var(--style-guide-font-family-content)",
      "--input-headline-font-family": "var(--style-guide-font-family-subheadline)",
      "--input-background-color": "#FFFFFF"
    }
  },
  "selectors": {
    ".elButton": {
      "params": {
        "--style-border-style": "solid",
        "border-radius--unit": "px"
      },
      "attrs": {
        "style": { "border-radius": 6 },
        "data-skip-corners-settings": "false"
      }
    }
  },
  "children": []
}

Checkout Text Slots

Customize checkout text using child slots:

JSON

{
  "type": "Checkout/V2",
  "children": [
    {
      "type": "p",
      "slotName": "tos-text",
      "children": [
        { "type": "text", "innerText": "By purchasing, you agree to our Terms of Service" }
      ]
    },
    {
      "type": "p",
      "slotName": "cta-header",
      "children": [
        { "type": "text", "innerText": "Order Today to Get Free Shipping!" }
      ]
    }
  ]
}

Slot Name	Purpose
`tos-text`	Terms of service text
`cta-header`	Call-to-action header above button

CheckoutOrderSummary/V1

Order summary linked to a checkout element. Shows products, prices, and totals.

JSON

{
  "type": "CheckoutOrderSummary/V1",
  "id": "6Z-OrdSu-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "open": true,
    "state": "ok",
    "linkWithCheckout": true,
    "linkedCheckoutId": "6Z-Check-0"
  }
}

Parameter	Type	Description
`open`	boolean	Whether summary is expanded by default
`state`	string	Current state (e.g., "ok")
`linkWithCheckout`	boolean	Link to a checkout element
`linkedCheckoutId`	string	ID of the linked Checkout/V2 element

OrderConfirmation/V1

Displays order confirmation details after purchase.

JSON

{
  "type": "OrderConfirmation/V1",
  "id": "6Z-OrdCf-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "selectors": {
    ".elOrderConfirmationV1": {
      "attrs": {
        "data-skip-corners-settings": "false",
        "style": { "border-radius": "8px" }
      },
      "params": {
        "--style-border-width": "1px",
        "--style-border-style": "solid",
        "--style-border-color": "#ECF0F5"
      }
    }
  }
}

Checkout Page Flow

Typical layout with summary and checkout:

JSON

{
  "type": "RowContainer/V1",
  "children": [
    {
      "type": "ColContainer/V1",
      "params": { "mdNum": 6 },
      "children": [
        { "type": "CheckoutOrderSummary/V1", "params": { "linkedCheckoutId": "6Z-Check-0" } }
      ]
    },
    {
      "type": "ColContainer/V1",
      "params": { "mdNum": 6 },
      "children": [
        { "type": "Checkout/V2", "id": "6Z-Check-0" }
      ]
    }
  ]
}

Supported Features

Element	Background	Border	Shadow	Corners
Checkout/V2	Yes	Yes	No	Yes
CheckoutOrderSummary/V1	Yes	Yes	No	Yes
OrderConfirmation/V1	Yes	Yes	No	Yes