Magento2: set credit card as default payment method

Question

How to set default payment method as authorize.net credit card for that I have tired to override

Magento\Checkout\view\frontend\web\js\view\payment\default.js

below is the code

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

but got stuck how to override the particular method

Answer 1

This solution works for me fine requirejs

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

checkout-data-resolver-mixin

define([
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/model/payment-service',
        'Magento_Checkout/js/action/select-payment-method'
    ], function (checkoutData, paymentService, selectPaymentMethodAction) {
        'use strict';    
    
        return function(checkoutDataResolver) {
            checkoutDataResolver.resolvePaymentMethod= function () {
                var selectedPaymentMethod = checkoutData.getSelectedPaymentMethod(),
                    availablePaymentMethod = paymentService.getAvailablePaymentMethods();
                if(selectedPaymentMethod === null ){
                    availablePaymentMethod.some(function (payment) {
                        if(payment.method ==  'anet_creditcard'){
                            checkoutData.setSelectedPaymentMethod('anet_creditcard');
                            var selectedPaymentMethodNew = checkoutData.getSelectedPaymentMethod();
                            if (payment.method == selectedPaymentMethodNew) { 
                                selectPaymentMethodAction(payment);
                            }
                        }
                    });
                }else{
                    availablePaymentMethod.some(function (payment) {
                        if (payment.method == selectedPaymentMethod) {
                            selectPaymentMethodAction(payment);
                        }
                    });
                }
            }
    
            return checkoutDataResolver;
        };
    });

Answer 2

initialize: function () {
            this._super();
            checkoutDataResolver.resolvePaymentMethod();
            stepNavigator.registerStep(
                'payment',
                null,
                $t('Review & Payments'),
                this.isVisible,
                _.bind(this.navigate, this),
                this.sortOrder
            );

            return this;
        },

The above code is in Checkout/view/frontend/web/js/view/payment.js. It is loaded when you first visit the checkout page.

You can see that it called checkoutDataResolver.resolvePaymentMethod(), which eventually set the payment method (get it from local storage).

You can set the data to local storage before it call the function resolvePaymentMethod, then when it invoke, it will get your pre-set data.

You can use mixin to overwrite this initialize method

define([
    'Magento_Checkout/js/checkout-data'
], function (checkoutData) {
    'use strict';

    var mixin = {
        initialize: function () {
            checkoutData.setSelectedPaymentMethod('input-authorize.net-payment-code-here');
            this._super();
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});