Customize checkout

Checkout is implemented using the UI components. Out of the box, the checkout consists of two steps:

• Shipping Information
• Review and Payment Information

The checkout totals and the corresponding side-bar are only displayed after the first step is completed.

The only exception is checkout of virtual and/or downloadable products: if there are only these types of products in the shopping cart, checkout is automatically transformed to one-step procedure, because shipping information is not required.

data-variant=info

data-slots=text

List of available customizations

You can customize the default checkout in multiple ways. This tutorial includes the following customizations:

• Add a new checkout step
• Customize the view of an existing step
• Add a custom payment method to checkout
• Add custom validations before order placement
• Add custom shipping carrier
• Add custom shipping carrier validations
• Add custom input mask for ZIP code
• Add a custom template for a form field on Checkout page
• Add a new input form to checkout
• Add a new field in address form
• Add custom shipping address renderer
• Add a custom field for an offline payment method