2

I wish to edit /var/www/html/xxx/vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html

Exactly in below line, Because which is the responsible file to render the template for each payment method. I wish to change the look of the payment method in Magento 2

each args="data: getRegion($group().displayArea), as: 'method'" render=""

6
  • What are the changes would you like to make in payment method?
    – Haritha
    Apr 23, 2018 at 11:22
  • I wish to display payment methods(1. netbanking , 2. credit card 3. COD) as a list. And Wish to add common input field which is hidden for all the methods.While placing a order the value which is present in input field should be submitted
    – Jaisa
    Apr 23, 2018 at 11:32
  • What about the billing address under each payment method?
    – Haritha
    Apr 23, 2018 at 11:37
  • I have disabled the billing address js component
    – Jaisa
    Apr 23, 2018 at 11:46
  • I dont want need billing address section to display
    – Jaisa
    Apr 23, 2018 at 11:46

1 Answer 1

0

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:

result on checkout payment step

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.