Checkout

The checkout template renders the order summary and the controls that collect shipping, payment, and any extra checkout fields. It exposes the line items, the totals, the applied coupons, the shipping and payment options, and a set of extension points where add-on fields are injected. All of these tokens and loops are populated only when the commerce extension is enabled.

Amounts such as {checkout.subtotal} and {checkout.total} are formatted numbers with no currency symbol. Print {checkout.currency_symbol} in front of them so the amount reads as currency.

Line items

{checkout.items} is a collection of the products in the order. Loop over it with {each checkout.items as=item} and read each line with {item.*}.

{each checkout.items as=item}
  <div class="line">
    <img src="{item.image}" alt="{item.name}">
    <span class="name">{item.name}</span>
    <span class="qty">{item.quantity}</span>
    <span class="total">{checkout.currency_symbol}{item.line_total}</span>
  </div>
{/each}

Totals and currency

These tokens describe the whole order. Pair each amount with {checkout.currency_symbol}.

<div class="summary">
  <div class="row">
    <span>Subtotal</span>
    <span>{checkout.currency_symbol}{checkout.subtotal}</span>
  </div>
  <div class="row discounts">
    <span>Discounts</span>
    <span>- {checkout.currency_symbol}{checkout.coupon_discount_total}</span>
  </div>
  <div class="row total">
    <span>Total</span>
    <span>{checkout.currency_symbol}{checkout.total}</span>
  </div>
</div>

Coupons

{checkout.coupons} is a collection of the coupons applied to the order. Loop over it with {each checkout.coupons as=coupon} and read each entry with {coupon.*}. Use {checkout.coupon_discount_total} for the combined discount.

{each checkout.coupons as=coupon}
  <div class="coupon">
    <span class="code">{coupon.code}</span>
    <span class="description">{coupon.description}</span>
    <span class="amount">- {checkout.currency_symbol}{coupon.discount_amount}</span>
    {if coupon.allow_stack}
      <span class="stackable">Can combine</span>
    {/if}
  </div>
{/each}

Price summary

{checkout.price_summary} is a collection of prepared rows for the order summary: subtotal, shipping, tax, discounts, and the total, each already formatted and classified. Loop over it with {each checkout.price_summary as=item}. This is the preferred way to render the full breakdown, because each row carries the label, the display amount, and a class that marks discounts.

{each checkout.price_summary as=item}
  <div class="row {item.amount_class}">
    <span>{item.label}</span>
    <span>{item.display_amount}</span>
  </div>
{/each}

Checkout extension points

Add-on fields are grouped by the position they should appear on the checkout page. Each position is its own loop, named {each checkout.attributes_<position> as=attr}. The loop renders nothing when no field is assigned there, so each block can stay in the template.

Each attr exposes the prepared field and its metadata.

Render the prepared markup with {attr.html}, or use the individual fields to build custom markup.

{each checkout.attributes_above_shipping_address as=attr}
  {attr.html}
{/each}

{each checkout.attributes_below_payment_method as=attr}
  <div class="extra-field" data-code="{attr.code}">
    {attr.html}
  </div>
{/each}

Shipping methods

{shipping_methods} is the collection of available shipping options. Loop over it with {each shipping_methods as=method} and use {method.code} as the radio value.

{each shipping_methods as=method}
  <label>
    <input type="radio" name="shipping_method" value="{method.code}">
    <span>{method.name}</span>
    <span>{method.description}</span>
    {if method.is_free}
      <span>Free</span>
    {else}
      <span>{method.price}</span>
    {/if}
  </label>
{/each}

Payment methods

{payment_methods} is the collection of available payment options. Loop over it with {each payment_methods as=payment} and use {payment.code} as the radio value.

{each payment_methods as=payment}
  <label>
    <input type="radio" name="payment_method" value="{payment.code}">
    {if payment.icon_svg}
      {payment.icon_svg}
    {/if}
    <span>{payment.name}</span>
  </label>
{/each}

Checking before rendering

Guard sections with the checkout flags when you only want them to appear once the order has content.

{if checkout.has_coupons}
  <div class="coupons">
    {each checkout.coupons as=coupon}
      <span>{coupon.code}</span>
    {/each}
  </div>
{/if}

See also

• Cart
• Orders and account
• Loops
• Conditionals