How to change payment method title on checkout page?

Question

We would like to change the payment method group name on the checkout page in the magento2.3.5 version? Can anyone advise

Answer 1

To change the Payment Method group title name to Secure Payment Method I have followed the below steps then it's working fine.

Identified and copied method-group.js file from the vendor directory to my custom theme.

vendor/magento/module-checkout/view/frontend/web/js/model/payment/method-group.js

Theme folder followed below:

app/design/frontend/CustomThemeName/default/Magento_Checkout/web/js/model/payment/method-group.js


/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
        'uiElement',
        'mage/translate'
], function (Element, $t) {
    'use strict';

    var DEFAULT_GROUP_ALIAS = 'default';

    return Element.extend({
        defaults: {
            alias: DEFAULT_GROUP_ALIAS,
            title: $t('Secure Payment Method'),
            sortOrder: 100,
            displayArea: 'payment-methods-items-${ $.alias }'
        },

        /**
         * Checks if group instance is default
         *
         * @returns {Boolean}
         */
        isDefault: function () {
            return this.alias === DEFAULT_GROUP_ALIAS;
        }
    });
});

Answer 2

If you are looking to only change a specific payment method group title the following approach must solve your problem. I used it to change the Vault Payment method group title only.

Create a new module structure and activate it. For the example below I create a sample module called MyModule_Vault.

In this module, you will create a mixin to the following file: Magento_Vault/js/view/payment/vault

File: MyModule/Vault/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Vault/js/view/payment/vault': {
                'MyModule_Vault/js/view/payment/vault-mixin': true,
            },
        }
    }
};

File: MyModule/Vault/view/frontend/web/js/view/payment/vault-mixin.js

define([
    'uiRegistry',
    'mage/translate'
], function (registry, $t) {
    'use strict';

    return function (originalVault) {
        registry.get('vaultGroup', function (vaultGroup) {
            vaultGroup.title = $t('Saved Payment Methods');
        });
        return originalVault;
    }
});

By doing this, you'll see the result on the checkout:

Answer 3

You can use translation (https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/translations/theme_dictionary.html)

Main steps are

1. Generate the dictionary for your theme.
2. Change the necessary values in the right column
3. Add custom strings as rows if the strings you want to replace are not in the dictionary

This is, for example, the row in my it_IT.csv

"Payment Method","Metodo di pagamento",module,Magento_Checkout

I can change it simply modifying "Metodo di pagamento"