On the payment step, Magento will call the payment info api to get the payment list. vendor/magento/module-checkout/view/frontend/web/js/action/get-payment-information.js
.
paymentService.setPaymentMethods(methodConverter(response['payment_methods']));
So, my idea, in your case, if we need to hide a specific payment on checkout page, we need to override the setPaymentMethods
method.
[NOTE] There are many ways to achieve the goal.
For example:
app/code/Vendor/OfflinePayment/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Checkout/js/model/payment-service': {
'Vendor_OfflinePayment/js/mixins/model/payment-service': true
}
}
}
};
app/code/Vendor/OfflinePayment/view/frontend/web/js/mixins/model/payment-service.js
define([
'underscore',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/payment/method-list',
'Magento_Checkout/js/action/select-payment-method'
], function (_, quote, methodList, selectPaymentMethod) {
return function (paymentService) {
/**
* Free method filter
* @param {Object} paymentMethod
* @return {Boolean}
*/
var isFreePaymentMethod = function (paymentMethod) {
return paymentMethod.method === 'free';
},
/**
* Grabs the grand total from quote
* @return {Number}
*/
getGrandTotal = function () {
return quote.totals()['grand_total'];
};
// Custom code
var isCheckmoPaymentMethod = function (paymentMethod) {
return paymentMethod.method === 'checkmo';
};
/**
* Populate the list of payment methods
* @param {Array} methods
*/
paymentService.setPaymentMethods = function (methods) {
var freeMethod,
filteredMethods,
methodIsAvailable,
methodNames;
freeMethod = _.find(methods, isFreePaymentMethod);
this.isFreeAvailable = !!freeMethod;
if (freeMethod && getGrandTotal() <= 0) {
methods.splice(0, methods.length, freeMethod);
selectPaymentMethod(freeMethod);
}
filteredMethods = _.without(methods, freeMethod);
if (filteredMethods.length === 1) {
selectPaymentMethod(filteredMethods[0]);
} else if (quote.paymentMethod()) {
methodIsAvailable = methods.some(function (item) {
return item.method === quote.paymentMethod().method;
});
//Unset selected payment method if not available
if (!methodIsAvailable) {
selectPaymentMethod(null);
}
}
//Custom code - Prevent checkmo to render on checkout page.
var checkmo = _.find(methods, isCheckmoPaymentMethod);
methods = _.without(methods, checkmo);
/**
* Overwrite methods with existing methods to preserve ko array references.
* This prevent ko from re-rendering those methods.
*/
methodNames = _.pluck(methods, 'method');
_.map(methodList(), function (existingMethod) {
var existingMethodIndex = methodNames.indexOf(existingMethod.method);
if (existingMethodIndex !== -1) {
methods[existingMethodIndex] = existingMethod;
}
});
methodList(methods);
};
return paymentService;
};
});
Our custom code:
// Custom code
var isCheckmoPaymentMethod = function (paymentMethod) {
return paymentMethod.method === 'checkmo';
};
.......
.......
//Custom code - Prevent checkmo to render on checkout page.
var checkmo = _.find(methods, isCheckmoPaymentMethod);
methods = _.without(methods, checkmo);
@HoangHieu solution will work.