I have create custom checkout Step between shipping and payment step . Now i want to show all the order details and customer fillup details. Below is the files that i have created for the Custom checkout step

Below is the file (checkout_index_index.xml) i have created for new step in the checkout :

<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="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Mycustom_Checkoutnew/js/view/my-step-view</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">1</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->

In the second file (my-step-view.js) there will be js code as follow :

], function (ko, Component, _, stepNavigator) {
    'use strict';

     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of your module directory.
    return Component.extend({
        defaults: {
            template: 'Mycustom_Checkoutnew/mystep'

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

         * @returns {*}
        initialize: function () {

            // register your step
                // step code will be used as step content id in the component template
                // step alias
                // step title 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 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 () {

         * @returns void
        navigateToNextStep: function () {

Below is the html file (mystep.html) where i want to display all the data of orders and the customer

<li id="shippingaddress" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Shipping'" data-role="title"></div>
    <div id="checkout-step-title"

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

In the new custom page i want show following things
1)Email 2)Contact 3 ) Address that sellected in previous step 4)Shipping method

If anyone can help me in this then please let me know

In frontend i want show like this please go through the image

enter image description here

1 Answer 1


I'm not sure, but i guess you are looking following

In your my-step-view.js you need to require 'Magento_Checkout/js/model/quote' and in function pass like quote

let shipping = quote.shippingAddress();
let email = shipping.email || quote.guestEmail;
let method = quote.shippingMethod();


You need to implement related methods in your custom component, with your own logic for example:

    return Component.extend({
        // ...
        getShippingMethodTitle: function () {
            var shippingMethod = quote.shippingMethod(),
                shippingMethodTitle = '';

            if (!shippingMethod) {
                return '';

            shippingMethodTitle = shippingMethod['carrier_title'];

            if (typeof shippingMethod['method_title'] !== 'undefined') {
                shippingMethodTitle += ' - ' + shippingMethod['method_title'];

            return shippingMethodTitle;

and use it in template, for example

<span class="value" data-bind="text: getShippingMethodTitle()"></span>
  • I need to show that data inside html file. But not getting how to do?
    – Praful
    Commented Jun 18, 2022 at 11:20
  • I've added update and provided an example about possible source and hope this help to understand the general way Commented Jun 18, 2022 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.