Checkout Page

The order's lines, listed in the summary.

Prefills the form, e.g. with a signed-in shopper's address.

ISO 4217 code for the totals while there are no items; otherwise the first item's currency.

BCP 47 locale the prices are formatted in; the ConfigProvider's when left out.

Shown as the store's name above the form when no logo slot is given; nothing shows when both are empty.

The choices in the country selects; value is the country code the form sends.

The country selected at first, by value; defaultValues.country takes precedence.

Countries, by value, whose addresses ask for the building number in a field of its own.

The shipping methods offered once the address is complete.

The payment methods, one row each; picking one reveals its details.

The payment method, by value, that reveals the card fields.

Codes and gift cards on the order, each a removable badge and taken off the total.

The tax rate included in the prices, e.g. 0.19; the total's tax note hides when left out.

Where the sign-in link beside the contact heading goes; the link hides when left out.

Links under the pay button, e.g. the refund and privacy policies.

Shown beside the store name, e.g. that the checkout is encrypted; hidden when empty.

Shown as the contact card's heading.

Shown under the contact card's heading; hidden when empty.

Shown on the sign-in link.

Shown as the email field's label.

Shown in the tooltip beside the email field.

Shown beside the newsletter checkbox.

Shown as the delivery card's heading.

Shown under the delivery card's heading; hidden when empty.

Shown as the country select's label.

Shown as the first-name field's label.

Shown as the last-name field's label.

Shown as the address field's label while the building number has a field of its own.

Shown as the address field's label while it holds the building number too.

Shown as the building number field's label.

Shown as the label of the optional second address line.

Shown as the postal code field's label.

Shown as the city field's label.

Shown as the phone field's label.

Shown in the tooltip beside the phone field.

Shown under the phone field; hidden when empty.

Shown as the shipping method section's heading.

Shown in place of the shipping methods until the address is complete.

Shown in place of a shipping price of zero.

Shown as the payment section's heading.

Shown under the payment heading; hidden when empty.

The card brands whose marks show in the number field, such as the ones the shop accepts.

Shown as the card number field's label.

Shown as the card expiry field's label.

Shown as the card security code field's label.

Shown in the tooltip beside the security code field.

Shown as the cardholder name field's label.

Shown beside the checkbox that bills the shipping address; unticking it reveals the billing address.

Shown as the billing address's heading.

Shown beside the checkbox that saves the shopper's details.

Shown as the label of the phone field the remember checkbox reveals.

Shown under the remember checkbox's label, e.g. what saving the details means; hidden when empty.

Shown on the button that submits the order.

Shown as the summary card's heading and on the bar that folds it out on narrow screens.

Shown as the discount field's label.

Shown in the empty discount field.

Shown under the discount field, e.g. which codes can be combined.

Shown on the button that applies the discount code.

Shown on the button that reveals the discount field at the foot of the form on narrow screens.

Builds the screen-reader name of the button that removes an applied code from its row label.

Shown next to the subtotal.

Shown next to the shipping cost.

Shown in place of the shipping cost until a method is chosen.

Put before each amount an applied code takes off.

Shown next to the order total.

Builds the item count beside the summary's heading and under the total at the foot of the form on narrow screens.

Builds the note under the total from the included tax, already formatted.

Builds each line's quantity text in the summary, e.g. Qty: 2.

Classes added to the part's own element, after its recipe classes.

Fires with a copy of the form's values when the shopper pays; a field of a section the shopper closed, such as the card fields under another payment method, is empty.

Fires with the trimmed code when the shopper applies a non-empty discount code.

Fires with an applied code when the shopper removes it.

Replaces the store name above the form, e.g. with the store's logo.