How to show default payment method as checked at checkout page in Magento 2
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.
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;
};
});