How to add a new step in checkout page Magento 2?

For Native Magento 2 checkout’s flow contains 2 steps in Magento 2. The Shipping Step and the Payment & Review step. For eCommerce site business logic, you may want to add some additional logic like display Checkout summary to Review Step. You need to add a new step for display Checkout summary to final step.

In Magento 2 Customization checkout is little bit difficult because newly concept of knockout js and other js stuff related to checkout required developer need to more effort to customize it.

This topic will guide you to create a new step checkout in Magento 2 by the just simple way. I have created the simple module for it to add new Review step.

Example, add new Review & Place Order Step after Review & Payments steps.

Create Module called Rbj_Checkout. I have keep my module name Rbj_Checkout for simplicity.
Create registration.php and module.xml to declare our module.

File Path, app/code/Rbj/Checkout/registration.php

File Path, app/code/Rbj/Checkout/etc/module.xml , We have added the dependency on Native Checkout module.

app/code/Rbj/Checkout/view/frontend/layout/checkout_index_index.xml Declare our Review step js and html file from checkout_index_index.xml file.

In Checkout xml file, <item name=”component” xsi:type=”string”>Rbj_Checkout/js/view/review-step</item> defined our js file to add new step in Checkout.
Now we need to create review-step.js file and define our new step definition from js file.

Our New Step html file for display data in checkout step

Using above step we can add the new step in checkout page and for place order we need to change the custom logic of step 2, We need to set place order button logic from step 3 now so we have changed place-order.js and we need to also change custom logic in placeOrder() function from default.js

We need to create webapi.xml for change business logic of place order button on step 2, Using webapi.xml when a user clicks on place order button they will save current payment information and not a place order on step 2. When we click on place order button on step 3 they will place the order and complete the checkout flow.

Using Custom /V1/guest-carts/:cartId/payment-information-custom and /V1/carts/mine/payment-information-custom request we will save only payment info from step 2.

File Path, app/code/Rbj/Checkout/etc/webapi.xml

We need to override core js file and so we need to create requirejs-config.js file, Path, app/code/Rbj/Checkout/view/frontend/requirejs-config.js

For Change Payment save logic, Overrider place-order.js  file.

File path, app/code/Rbj/Checkout/view/frontend/web/js/action/place-order.js 

Final default.js file override for new step custom logic of place order on click of place order and other stuff using below file.



Add new checkout step Magento 2