Reading list Switch to dark mode

    Add a back button to the payment step in checkout

    Updated 10 December 2022

    To add back button on the payment step, you need to just override two core file:

    • magento/module-checkout/view/frontend/web/js/view/payment.js
    • magento/module-checkout/view/frontend/web/template/payment.html

    You can override them either from theme or by creating custom module.

    In payment.html file, add a back button :-

    <!--
    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    -->
    <li id="payment" role="presentation" class="checkout-payment-method" data-bind="fadeVisible: isVisible">
        <div id="checkout-step-payment"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <!-- ko if: (quoteIsVirtual) -->
                <!-- ko foreach: getRegion('customer-email') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            <!--/ko-->
            <form id="co-payment-form" class="form payments" novalidate="novalidate">
                <input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
                <fieldset class="fieldset">
                    <legend class="legend">
                        <span data-bind="i18n: 'Payment Information'"></span>
                    </legend><br />
                    <!-- ko foreach: getRegion('place-order-captcha') -->
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                    <br />
                    <!-- ko foreach: getRegion('beforeMethods') -->
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                    <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
                        <!-- ko foreach: getRegion('payment-methods-list') -->
                            <!-- ko template: getTemplate() --><!-- /ko -->
                        <!-- /ko -->
                    </div>
                    <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
                        <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
                    </div>
                    <!-- ko foreach: getRegion('afterMethods') -->
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </fieldset>
            </form>
            <div class="primary">
                <button data-bind="click: goToPrevStep()" class="back button action primary">
                    <span translate="'Return'" />
                </button>
            </div>
        </div>
    </li>

    In payment.js file, you need to define goToPrevStep() function

    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    
     define([
        'jquery',
        'underscore',
        'uiComponent',
        'ko',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/model/payment/method-converter',
        'Magento_Checkout/js/action/get-payment-information',
        'Magento_Checkout/js/model/checkout-data-resolver',
        'mage/translate'
    ], function (
        $,
        _,
        Component,
        ko,
        quote,
        stepNavigator,
        paymentService,
        methodConverter,
        getPaymentInformation,
        checkoutDataResolver,
        $t
    ) {
        'use strict';
    
        /** Set payment methods to collection */
        paymentService.setPaymentMethods(methodConverter(window.checkoutConfig.paymentMethods));
    
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/payment',
                activeMethod: ''
            },
            isVisible: ko.observable(quote.isVirtual()),
            quoteIsVirtual: quote.isVirtual(),
            isPaymentMethodsAvailable: ko.computed(function () {
                return paymentService.getAvailablePaymentMethods().length > 0;
            }),
    
            /** @inheritdoc */
            initialize: function () {
                this._super();
                checkoutDataResolver.resolvePaymentMethod();
                stepNavigator.registerStep(
                    'payment',
                    null,
                    $t('Review & Payments'),
                    this.isVisible,
                    _.bind(this.navigate, this),
                    this.sortOrder
                );
    
                return this;
            },
    
            /**
             * Navigate method.
             */
            navigate: function () {
                var self = this;
    
                if (!self.hasShippingMethod()) {
                    this.isVisible(false);
                    stepNavigator.setHash('shipping');
                } else {
                    getPaymentInformation().done(function () {
                        self.isVisible(true);
                    });
                }
            },
    
            /**
             * @return {Boolean}
             */
            hasShippingMethod: function () {
                return window.checkoutConfig.selectedShippingMethod !== null;
            },
    
            /**
             * @return {*}
             */
            getFormKey: function () {
                return window.checkoutConfig.formKey;
            },
    
            goToPrevStep: function () {
                return stepNavigator.navigateTo('shipping');
            }
        });
    });

    And here is the result (Return button) in bottom.

    Start your headless eCommerce
    now.
    Find out More
    Screenshot-from-2022-12-03-18-03-55

    Thanks..

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home