Delayed Invocation of Payment Method Services in Checkout Workflow Optimization

[hdstockima6b72]

To improve the checkout experience, it’s important to load payment methods only when customers reach the payment step, rather than loading them right when the checkout page opens. Right now, payment options like Cybersource and Mercado Pago are loaded immediately, which can slow down the process.

A better approach would be to implement lazy loading, where the payment methods only load when the user clicks to go to the payment step. This could be done using JavaScript to detect when the transition occurs, ensuring the checkout process is smoother and faster.

How can we effectively implement this so that payment methods load only when the customer switches to the payment step?

[johnwebdes40a5]

Hello @hdstockima6b72 

To implement loading payment methods only when the customer switches to the payment step in Magento 2, you can use AJAX to load the payment methods dynamically.

Steps to Implement Lazy Loading of Payment Methods:

Override the Checkout Component:  Create a custom module if you don’t have one already, and override the necessary checkout component.

Create a Custom Module: Set up your custom module structure:

app/code/Vendor/Module/

├── registration.php
├── etc
│   └── module.xml
├── view
│   └── frontend
│       └── requirejs-config.js
└── view/frontend/web/js/
    └── checkout.js

RequireJS Configuration: Create requirejs-config.js to add your custom JavaScript file.

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/view/payment/list': 'Vendor_Module/js/checkout'
        }
    }
};

Custom JavaScript Logic: In checkout.js, you can create the logic to load payment methods when the customer navigates to the payment step.

define([
    'Magento_Checkout/js/view/payment/list',
    'jquery',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/set-payment-information',
    'Magento_Checkout/js/model/payment-method-list'
], function (List, $, checkoutDataResolver, quote, setPaymentInformation, paymentMethodList) {
    'use strict';


    return List.extend({
        initialize: function () {
            this._super();
            this.paymentMethodsLoaded = false;


            // Observe when the payment step is activated
            checkoutDataResolver.resolveShippingInformation();
            this.loadPaymentMethods();
        },


        loadPaymentMethods: function () {
            var self = this;


            if (!this.paymentMethodsLoaded) {
                $.ajax({
                    url: '/rest/V1/payment-methods',
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        // Populate payment methods
                        self.paymentMethodsLoaded = true;
                        self.updatePaymentMethods(data);
                    },
                    error: function () {
                        // Handle error
                    }
                });
            }
        },


        updatePaymentMethods: function (data) {
            // Update the view with the loaded payment methods
        }
    });
});

Create a Controller for Payment Methods: You need to create a custom controller that returns the payment methods when requested.

app/code/Vendor/Module/Controller/Payment/Methods.php

namespace Vendor\Module\Controller\Payment;


use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Checkout\Model\Session;
use Magento\Payment\Helper\Data as PaymentHelper;


class Methods extends Action
{
    protected $checkoutSession;
    protected $paymentHelper;


    public function __construct(
        Context $context,
        Session $checkoutSession,
        PaymentHelper $paymentHelper
    ) {
        parent::__construct($context);
        $this->checkoutSession = $checkoutSession;
        $this->paymentHelper = $paymentHelper;
    }


    public function execute()
    {
        $paymentMethods = $this->paymentHelper->getPaymentMethods();
        return $this->jsonResponse($paymentMethods);
    }


    protected function jsonResponse($data)
    {
        $this->getResponse()->representJson(json_encode($data));
        return $this->getResponse();
    }
}

Setup Routes: Create a routes.xml file to define the route for your custom controller.

app/code/Vendor/Module/etc/frontend/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="payment" frontName="payment">
            <module name="Vendor_Module" />
        </route>
    </router>
</config>

Clear Cache and Deploy Static Content: After implementing the above changes, clear the cache and redeploy static content:

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