I have created an extra step in Magento 2 checkout page and put custom steps after the "Review & Payments" step.

enter image description here

Now as you can see there is the "Next" button on my custom step. I want here the "Place Order" button instead of the "Next" button.

And on the "Review & Payments" step, I want the "Next" button instead of the "Place Order" button.

Here is my code to create a custom step:


        function (
        ) {
            'use strict';
            * mystep - is the name of the component's .html template, 
            * Vendor_ModuleName  - is the name of your module directory.
            return Component.extend({
                defaults: {
                    template: 'Vendor_ModuleName/myorder'

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

                * @returns {*}
                initialize: function () {
                    // register your step
                        //review will be used as step content id in the component template
                        //review alias
                        //review value
                        //observable property with logic when display step or hide step

                        _.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

                    return this;

                * The navigate() method is responsible for navigation between checkout step
                * during checkout. You can add custom logic, for example some conditions
                * for switching to your custom step 
                navigate: function () {
                    var self = this;
                    //getPaymentInformation().done(function () {
                   // }); 

                * @returns void
                navigateToNextStep: function () {


<!--The 'step_code' value from the .js file should be used-->
<li id="review" data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'review'" 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">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="checkout.root">
                <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 -->
                                        <item name="review" xsi:type="array">
                                            <item name="component" xsi:type="string">Vendor_ModuleName/js/view/my-order-review</item>
                                                <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->

I want "Place Order" button in my last custom step and "Next" button on second step (Review & Payments).

  • Have you got solution for above issue? please if find solution share. – Rakesh Jesadiya Apr 10 '17 at 8:34
  • @arshad did you find a solution for this? – Thomas C Sep 26 '18 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.