Using theme:
You can copy corresponding template in your theme (saving original path) and change data in template according your needs.
copy original template
vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html
in your theme
app/design/frontend/{VendorName}/{themeName}/{packageName}/Magento_Checkout/web/template/payment-methods/list.html
and edit it per your needs.
In third-party module:
add dependency in the module.xml
app/code/{Vendor}/{Module}/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="{Vendor_Module}" setup_version="1.0.0">
<sequence>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>
Create own template file with appropriate content:
app/code/{Vendor}/{Module}/view/frontend/web/template/payment-method/list.html
Default content example (the h3
tag is added for test purposes):
<h3>Payment Methods List</h3>
<div if="isPaymentMethodsAvailable()"
class="items payment-methods">
<div repeat="foreach: paymentGroupsList, item: '$group'"
class="payment-group">
<each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
</div>
</div>
<div ifnot="isPaymentMethodsAvailable()"
class="no-payments-block"
translate="'No Payment Methods'">
</div>
Update layout:
app/code/{Vendor}/{Module}/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payments-list" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">{Vendor_Module}/payment-method/list</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Clean cache; Deploy static content; Check result: