Magento 2 checkout payment method add subtitle

Question

In our Magento 2.3 store, I want to add a subtitle to the payment method in the checkout.

Currently only the title of the payment method is displayed. But now I want to add a subtitle on each payment method, to show if the payment method is free or charged.

How can I change this?

I already checked the template:

/vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html

But the payment method title is not loaded there.

Answer 1

I guess the easiest way to add some kind of information into the payment methods selection list will be to overwrite the templates of each of the payment methods which are rendered in that list.

Each payment method has an Javascript payment method renderer (which usually extends Magento_Checkout/view/frontend/web/js/view/payment/default.js - there you find the methods like getTitle() used in the templates) and a html template which is rendered by this renderer.

For example the payment method 'Check/Money order' (checkmo) has the method renderer Magento_OfflinePayments/js/view/payment/method-renderer/checkmo-method.js and the template file Magento_OfflinePayments/template/payment/checkmo.html

You can overwrite those templates by copying them into your theme folder and make your changes.

For a better understanding of the payment method concepts you may read the documentation of how to create a cutsom payment method https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_payment.html