Add a back button to the payment step in checkout

[SannNL]

I'm trying to add a back button to payment.html in my module.

I added the button in the html in my module like this:

<!--
 <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('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>
            <button class="button action continue primary" data-bind="goToPrevStep()">
                <span data-bind="i18n: 'Back'"></span>
            </button>

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

But i'm unsure on the best way to add the js. I tried overwriting the payment.js but ofcourse then i also need to copy over the all the dependancies.

Is there any better way to do this.

I know I need something like this but with a prev or navigateTo function.

      goToPrevStep:function(){
        stepNavigator.next();
    },

That is dependent on stepNavigator. But i'm unsure where to exactly put it. 

Or is this the best solution? I feel like there should be a prettier solution, right?

[Sunil Patel]

Hello @SannNL

Good question.

Based on the magento2 standard you can do the same way as Magento doing for place order button.

vendor\magento\module-checkout\view\frontend\web\template\review\actions\default.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="actions-toolbar" id="review-buttons-container">
    <div class="primary">
        <button data-role="review-save" type="submit"
            data-bind="click: placeOrder($parents[1]), attr: {title: $t('Place Order')}"
            class="button action primary checkout"><span data-bind="i18n: 'Place Order'"></span></button>
    </div>
    <div class="secondary">
        <span id="checkout-review-edit-label" data-bind="i18n: 'Forgot an Item?'"></span>
        <a data-bind="attr: {href: $parents[1].cartUrl}"
           aria-describedby="checkout-review-edit-label"
           class="action edit">
            <span data-bind="i18n: 'Edit Your Cart'"></span>
        </a>
    </div>
</div>

In this file you can add your code for go to previous page.

vendor\magento\module-checkout\view\frontend\web\js\view\review\actions\default.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @deprecated since version 2.2.0
 */
define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/review/actions/default'
        },

        /**
         * @param {Object} parent
         * @return {Function}
         */
        placeOrder: function (parent) {
            return parent.placeOrder.bind(parent);
        }
    });
});
where you need to add your function and as well step-navigation into require.

Hope it will help you.

If it will work then mark as solution.

[SannNL]

Ah that looks like a better solution, thanks.

I'm a bit unsure on how I would get the button to display on the payment page after adding it to default.html though?

I now have this:

Default.html

<div class="actions-toolbar" id="review-buttons-container">
    <div class="primary">
        <button data-role="review-save" type="submit"
            data-bind="click: placeOrder($parents[1]), attr: {title: $t('Place Order')}"
            class="button action primary checkout"><span data-bind="i18n: 'Place Order'"></span></button>
    </div>
    <div class="secondary">
        <span id="checkout-review-edit-label" data-bind="i18n: 'Forgot an Item?'"></span>
        <a data-bind="attr: {href: $parents[1].cartUrl}"
           aria-describedby="checkout-review-edit-label"
           class="action edit">
            <span data-bind="i18n: 'Edit Your Cart'"></span>
        </a>
    </div>

    <div class="back">
        <a data-bind="click: goToPrevStep()"
           aria-describedby="checkout-back"
           class="action back">
            <span data-bind="i18n: 'Back'"></span>
        </a>
    </div>
</div>

default.js (btw the @depricated worries me since i'm on 2.2.3)

/**
 * @deprecated since version 2.2.0
 */
define([
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
], function (
    Component,
    stepNavigator
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/review/actions/default'
        },

        /**
         * @param {Object} parent
         * @return {Function}
         */
        placeOrder: function (parent) {
            return parent.placeOrder.bind(parent);
        },

        goToPrevStep:function(){
            stepNavigator.next();
        },
    });
});

Payment.html

<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('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="back">
                    <a data-bind="click: goToPrevStep()"
                       aria-describedby="checkout-back"
                       class="action back">
                        <span data-bind="i18n: 'Back'"></span>
                    </a>
                </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>
</li>

Thanks in advance @Sunil Patel

[Sunil Patel]

Hello @SannNL

Payment page means the second step of checkout page right?

[SannNL]

Yes I would like to add it next to the place order button.

Error: 'Unable to process binding "click: function (){return goToPrevStep() }"
Message: goToPrevStep is not defined'.

[Sunil Patel]

Hello @SannNL

click: goToPrevStep()

should be

click: goToPrevStep($parents[1])

Hope it will help you.

If it will work then mark as solution. 

[SannNL]

Sadly I still get this error:

[Sunil Patel]

Hello @SannNL

I am not able to see that image.

Can you please your site URL?

[SannNL]

I have the site on a local dev environment sadly.

This way you can click on the image:

https://community.magento.com/t5/image/serverpage/image-id/7611i1548962C8070A476/image-size/large?v=...

[Sunil Patel]

Hello

@SannNL

still i am not able to see image, please share image via online tool.