how to load the payment service when switch to payment step instead of the first step in checkout

[longnguyen21a5]

Currently, my site is using payment methods Cybersource and Mercado Pago. When go to the checkout page, I see the payment methods load immediately when the page checkout load. It will impact to the checkout performance. I would like to make the payment methods load only when the customer switch to the step payment method.

Do we have any way to make the payment methods load when switch to step payment method in the checkout page?

[johnwebdes40a5]

Hello @longnguyen21a5 

You can achieve this by customizing the checkout behavior using JavaScript.

Override the Checkout JavaScript Component

You need to modify or extend the Magento_Checkout/js/view/payment/list component to defer the initialization of payment methods.

Update the requirejs-config.js

Create a requirejs-config.js file in your custom module or theme to override the default payment list component.

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/payment/list': {
                'Vendor_Module/js/view/payment/list-mixin': true
            }
        }
    }
};

Create the Mixin for payment/list

Create the list-mixin.js file in your module or theme, e.g., Vendor/Module/view/frontend/web/js/view/payment/list-mixin.js.

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


    return function (PaymentList) {
        return PaymentList.extend({
            initialize: function () {
                this._super();


                // Flag to check if payment methods are loaded
                this.paymentMethodsLoaded = ko.observable(false);


                // Subscribe to changes in the active step
                stepNavigator.currentStep.subscribe(function (stepCode) {
                    if (stepCode === 'payment' && !this.paymentMethodsLoaded()) {
                        this.loadPaymentMethods();
                        this.paymentMethodsLoaded(true);
                    }
                }.bind(this));
            },


            loadPaymentMethods: function () {
                // Force the reloading of payment methods
                quote.paymentMethod(null); // Clear existing payment methods
                this.getPaymentMethods(); // Re-fetch payment methods
            }
        });
    };
});

Modify the Checkout Layout

If necessary, override the checkout_index_index.xml layout file to include your customizations.

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

                                <item name="billing-step" xsi:type="array">

                                    <item name="children" xsi:type="array">

                                        <item name="payment" xsi:type="array">

                                            <item name="children" xsi:type="array">

                                                <item name="payment-list" xsi:type="array">

                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/payment/list-mixin</item>

                                                </item>

                                            </item>

                                        </item>

                                    </item>

                                </item>

                            </item>

                        </item>

                    </item>

                </item>

            </item>

        </arguments>

    </referenceBlock>

Clear Cache and Deploy Static Content After making the changes, clear Magento’s cache and deploy static content:

php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f

Hope it helps ! 

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789