How to Pre-select Default Payment Method at the Checkout Page in Magento 2?

Hello Magento Friends,

In today’s blog, we will learn about How to Pre-select the Default Payment Method at the Checkout Page in Magento 2.

Checkout is the most crucial step in a customer’s shopping journey. Having a lengthy checkout process will fail to convert visitors into customers for your Magento 2 store. The quick checkout process is what every store owner must focus on to improve store efficiency.

If you have a payment method that most of your customers opt for, you can preselect the default payment method to reduce user actions.

Here are the steps to Pre-select Default Payment Method at the Checkout Page in Magento 2.

Steps to Pre-select Default Payment Method at the Checkout Page in Magento 2:

Step 1: First, we must create the “requirejs-config.js” file inside the extension at the following path.

app\code\Vendor\Extension\view\frontend

Then write the code below

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/model/checkout-data-resolver': {
                'Vendor_Extension/js/model/checkout-data-resolver': true
            }
        }
    }
};

Step 2: After that, we must create a “checkout-data-resolver.js” file inside the extension at the following path.

app\code\Vendor\Extension\view\frontend\web\js\model

Now add the code as given below

define([
    'Magento_Checkout/js/model/payment-service',
    'Magento_Checkout/js/checkout-data',
    'Magento_Checkout/js/action/select-payment-method'
], function(
    paymentService,
    checkoutData,
    selectPaymentMethodAction
) {
    'use strict';

    return function(checkoutDataResolver) {
        checkoutDataResolver.resolvePaymentMethod = function() {
            var availablePaymentMethods = paymentService.getAvailablePaymentMethods(),
                selectedPaymentMethod = checkoutData.getSelectedPaymentMethod(),
                paymentMethod = selectedPaymentMethod ? selectedPaymentMethod : 'cashondelivery';
                //set payment method as per your requirement(i.e cashondelivery replace with your payment method) 

            if (availablePaymentMethods.length > 0) {
                availablePaymentMethods.some(function (payment) {
                    if (payment.method == paymentMethod) {
                        selectPaymentMethodAction(payment);
                    }
                });
            }
        };
        return checkoutDataResolver;
    };
});

Once both files are created in your extension, run Magento upgrade and deploy commands in your server.

Check in the storefront, you will see that the default payment method is pre-selected at the checkout page in Magento 2.

Conclusion:

Hence, using the above steps, you can easily Pre-select the Default Payment Method at the Checkout Page in Magento 2 and reduce customer work in selecting the payment method.

Integrate your desired payment method into your Magento 2 store with the Payment Gateway Integration service and set it as the default payment method with pre-selection at the checkout page using the above method.

Share the article with your friends and stay updated with us.

Happy Coding!