How to Add Custom Checkout Steps in Magento 2?

Hello,

This topic will cover how to add a custom checkout step in Magento 2. Also, learn about Magento 2 B2B multi-step checkout process to how it is useful for business buyers.

Steps:

1> Create a checkout step component.

2> Add our custom step into the checkout step Layout.

Step1: Create a checkout step component.

A> For creating a custom checkout step, first we have to create a (.js) file that implements the new step.

The JS file must be stored under the <your_module_dir>/view/frontend/web/js/view directory.

Check the following code with comments (custom-step.js)

define([
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator'
], function (ko, Component, _, stepNavigator) {
    'use strict';

    /**
     * mystep - is the name of the component's .html template,
     * Webkul_CheckoutCustomSteps  - is the name of your module directory.
     */
    return Component.extend({
        defaults: {
            template: 'Webkul_CheckoutCustomSteps/mystep'
        },

        // add here your logic to display step,
        isVisible: ko.observable(true),

        /**
         * @returns {*}
         */
        initialize: function () {
            this._super();

            // register your step
            stepNavigator.registerStep(
                // step code will be used as step content id in the component template
                'step_code',
                // step alias
                null,
                // step title value
                'Custom Step',
                // observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                15
            );

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout steps
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         * When the user navigates to the custom step via url anchor or back button we_must show step manually here
         */
        navigate: function () {
            this.isVisible(true);
        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
});

B> Add a HTML template

Create a .html (mystep.html) template under the <your_module_dir>/view/frontend/web/template directory.

<!--The 'step_code' value from the .js file should be used-->
<li id="step_code" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Custom Step'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <input type="text" placeholder="Custom Field" class="form-control"/>
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Step2: Add our custom step into the checkout step Layout.

The new step to be displayed on the page, we need to declare it in the Checkout page layout, which is defined in checkout_index_index.xml.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <!-- The new step you add for last step -->
                                    <item name="reviewstep" xsi:type="array">
                                        <item name="component" xsi:type="string">Webkul_CheckoutCustomSteps/js/view/custom-step</item>
                                        <item name="sortOrder" xsi:type="string">1</item>
                                        <item name="children" xsi:type="array">
                                            <!--add here child component declaration for your step-->
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
    </body>
</page>

That’s it, Now we can check after cache: flush.

Output: