The default Magento Checkout consists of two steps:
Review and Payments Information
You can add a custom checkout step, it should be implemented as a UI component. For the sake of compatibility, upgradability and easy maintenance, do not edit the default Magento code, add your customizations in a separate module.
This topic describes how to create the frontend part of the component, implementing a checkout step, and how to add it to the checkout flow.
Create the view part of the checkout step component
To create the view part of the new checkout step:
Add a module directory (not covered in this topic). See Build your module for details). All custom files must be stored there. For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module. Do not use Ui for your custom module name, because %Vendor%_Ui notation, required when specifying paths, might cause issues.
Create the .js file implementing the view model.
Create an .html template for the component.
Each step is described in details in the following paragraphs.
The file must be stored under the <your_module_dir>/view/frontend/web/js/view directory.
<your_module_dir> notation stands for the path to your module directory from the root directory. Usually it will be one of the following: app/code/<YourVendor>/<YourModule> or vendor/<yourvendor>/module-<module>-<name>. For more details see Conventional notations for paths to modules and themes
A sample my-step-view.js with comments follows:
Add the .html template
In the module directory, add the .html template for the component. It must be located under the <your_module_dir>/view/frontend/web/template directory.
A sample mystep.html follows:
Add your step to the Checkout page layout
For the new step to be displayed on the page, you need to declare it in the Checkout page layout, which is defined in checkout_index_index.xml.
So you need to add an extendingcheckout_index_index.xml layout file in the following location: <your_module_dir>/view/frontend/layout/checkout_index_index.xml
A sample checkout_index_index.xml follows:
Create mixins for payment and shipping steps (optional)
If your new step is the first step, you have to create mixins for the payment and shipping steps. Otherwise two steps will be activated on loading of the checkout.
Create a mixin as follows:
Create a Vendor/Module/view/base/requirejs-config.js file with these contents;
Create the mixin. We’ll use the same mixin for both payment and shipping: