I wish to know how the payment methods are rendered in checkout page in magento 2


1 Answer 1


Refer to the file:-


There look for tag :- <item name="payments-list" xsi:type="array">

The code you will be intrested in:-

<item name="payments-list" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/list</item>
    <item name="displayArea" xsi:type="string">payment-methods-list</item>
    <item name="config" xsi:type="array">
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkout.steps.billing-step.payment.renders</item>
            <item name="1" xsi:type="string">checkout.steps.billing-step.payment.additional-payment-validators</item>
    <item name="children" xsi:type="array">
        <item name="before-place-order" xsi:type="array">
            <item name="component" xsi:type="string">uiComponent</item>
            <item name="displayArea" xsi:type="string">before-place-order</item>
            <item name="dataScope" xsi:type="string">before-place-order</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
<!-- merge your payment methods here -->
<item name="afterMethods" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">afterMethods</item>
    <item name="children" xsi:type="array">
        <!-- merge additional data after payment methods here -->

Further rendering is done via JS:-


Check their defined utilities:-

], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t, registry) {
    'use strict';

The above JS file is called via phtml file located at vendor\magento\module-checkout\view\frontend\templates\onepage.phtml

In there look for the function :- getCheckoutConfig

The data via KO is bind using the html file vendor\magento\module-checkout\view\frontend\web\template\payment.html with code:-

<form id="co-payment-form" class="form payments" novalidate="novalidate">
    <input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
    <fieldset class="fieldset">
        <legend class="legend">
            <span data-bind="i18n: 'Payment Information'"></span>
        </legend><br />
        <!-- ko foreach: getRegion('beforeMethods') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
        <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
            <!-- ko foreach: getRegion('payment-methods-list') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
            <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
        <!-- ko foreach: getRegion('afterMethods') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->

If you want to go further deep for methods, and rendering you can look for the JS files inside the folder:- vendor\magento\module-checkout\view\frontend\web\js\model

  • Thank you @Abdul , Nice explanation , But I need to know how the payment codes are get in list.js and how paymentGroupsList function works in list.html
    – Jaisa
    Apr 23, 2018 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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