Need some advice on Set stored credit card as default payment method magento 2

Question

Need to add functionality to Set Stored credit card as default payment method in payment options checkout page magento 2 https://prnt.sc/rvdou9

Answer 1

The Magento built-in payment methods don't support this ability.

But, if you have custom payment method and your custom js component extends Magento\Checkout\view\frontend\web\js\view\payment\default.js, you can use selectPaymentMethod method. In most cases, it will be enough to call it in the initObservable method:

define(['Magento_Checkout/js/view/payment/default'], function(Component) {
    initObservable: function () {
        this._super();
        this.selectPaymentMethod();
        ...
    }
});

If your payment js component has lazy initialization, you should call selectPaymentMethod on some onReady event.

Answer 2

One more example with preset default payment method as Credit Card (braintree):

app/code/Company/Checkout/view/frontend/requirejs-config.js

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

app/code/Company/Checkout/view/frontend/web/js/model/checkout-data-resolver.js

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 : 'braintree';

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

        return checkoutDataResolver;
    };
});

Answer 3

Achieved this functionality using cookie. Set cookie and get its value and set it on payment method option.