How is payment methods grouping implemented on the frontend checkout page?

dmitry_fedyuk · June 6, 2017, 1:02pm

Magento_Checkout/js/view/payment/list

Each payment group implemented by a Magento_Checkout/js/view/payment/list instance:

magento/magento2/blob/2.1.7/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L19-L29


return Component.extend({
    defaults: {
        template: 'Magento_Checkout/payment-methods/list',
        visible: paymentMethods().length > 0,
        configDefaultGroup: {
            name: 'methodGroup',
            component: 'Magento_Checkout/js/model/payment/method-group'
        },
        paymentGroupsList: [],
        defaultGroupTitle: $t('Select a new payment method')
    },

Magento_Checkout/js/view/payment/list::getGroupTitle()

A group’s title is only shown for the groups with more than 1 payment method:

github.com

magento/magento2/blob/2.1.7/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L182-L196


/**
 * Returns payment group title
 *
 * @param {Object} group
 * @returns {String}
 */
getGroupTitle: function (group) {
    var title = group().title;


    if (group().isDefault() && this.paymentGroupsList().length > 1) {
        title = this.defaultGroupTitle;
    }


    return title + ':';
},

dmitry_fedyuk · June 6, 2017, 1:13pm