How to specify a checkout's renderer for a payment menthod?

dmitry_fedyuk · February 16, 2016, 1:56am

Preliminary reading: How is payment methods list rendered on the frontend checkout page?

magento/magento2/blob/6ce74b2/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L50-L63


/**
 * Create renders for child payment methods.
 *
 * @returns {Component} Chainable.
 */
initChildren: function () {
    var self = this;


    _.each(paymentMethods(), function (paymentMethodData) {
        self.createRenderer(paymentMethodData);
    });


    return this;
},

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L97-L115


createRenderer: function (paymentMethodData) {
    _.find(rendererList(), function (renderer) {
        if (renderer.type.indexOf(paymentMethodData.method) === 0) {
            layout(
                [
                    this.createComponent(
                        {
                            config: renderer.config,
                            component: renderer.component,
                            name: renderer.type,
                            method: paymentMethodData.method,
                            item: paymentMethodData
                        }
                    )
                ]
            );
        }
    }.bind(this));
},

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L11-L11


'Magento_Checkout/js/model/payment/renderer-list',

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js#L14-L14


], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver) {

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Authorizenet/view/frontend/web/js/view/payment/authorizenet.js#L17-L22


rendererList.push(
    {
        type: 'authorizenet_directpost',
        component: 'Magento_Authorizenet/js/view/payment/method-renderer/authorizenet-directpost'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Authorizenet/view/frontend/layout/checkout_index_index.xml#L26-L33


<item name="authorizenet" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Authorizenet/js/view/payment/authorizenet</item>
    <item name="methods" xsi:type="array">
        <item name="authorizenet_directpost" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Braintree/view/frontend/web/js/view/payment/braintree-methods.js#L15-L24


rendererList.push(
    {
        type: 'braintree',
        component: 'Magento_Braintree/js/view/payment/method-renderer/cc-form'
    },
    {
        type: 'braintree_paypal',
        component: 'Magento_Braintree/js/view/payment/method-renderer/braintree-paypal'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Braintree/view/frontend/layout/checkout_index_index.xml#L26-L36


<item name="braintree-payments" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Braintree/js/view/payment/braintree-methods</item>
    <item name="methods" xsi:type="array">
        <item name="braintree" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="braintree_paypal" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">false</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/BraintreeTwo/view/frontend/web/js/view/payment/braintree.js#L18-L23


rendererList.push(
    {
        type: 'braintreetwo',
        component: 'Magento_BraintreeTwo/js/view/payment/method-renderer/hosted-fields'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/BraintreeTwo/view/frontend/layout/checkout_index_index.xml#L26-L33


<item name="braintreetwo" xsi:type="array">
    <item name="component" xsi:type="string">Magento_BraintreeTwo/js/view/payment/braintree</item>
    <item name="methods" xsi:type="array">
        <item name="braintreetwo" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/OfflinePayments/view/frontend/web/js/view/payment/offline-payments.js#L17-L34


rendererList.push(
    {
        type: 'checkmo',
        component: 'Magento_OfflinePayments/js/view/payment/method-renderer/checkmo-method'
    },
    {
        type: 'banktransfer',
        component: 'Magento_OfflinePayments/js/view/payment/method-renderer/banktransfer-method'
    },
    {
        type: 'cashondelivery',
        component: 'Magento_OfflinePayments/js/view/payment/method-renderer/cashondelivery-method'
    },
    {
        type: 'purchaseorder',
        component: 'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/OfflinePayments/view/frontend/layout/checkout_index_index.xml#L25-L41


<item name="offline-payments" xsi:type="array">
    <item name="component" xsi:type="string">Magento_OfflinePayments/js/view/payment/offline-payments</item>
    <item name="methods" xsi:type="array">
        <item name="checkmo" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="banktransfer" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="cashondelivery" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="purchaseorder" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Payment/view/frontend/web/js/view/payment/payments.js#L17-L22


rendererList.push(
    {
        type: 'free',
        component: 'Magento_Payment/js/view/payment/method-renderer/free-method'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Payment/view/frontend/layout/checkout_index_index.xml#L27-L34


<item name="free-payments" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Payment/js/view/payment/payments</item>
    <item name="methods" xsi:type="array">
        <item name="free" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Paypal/view/frontend/web/js/view/payment/paypal-payments.js#L15-L52


rendererList.push(
    {
        type: 'paypal_express',
        component: 'Magento_Paypal/js/view/payment/method-renderer/paypal-express'
    },
    {
        type: 'paypal_express_bml',
        component: 'Magento_Paypal/js/view/payment/method-renderer/paypal-express-bml'
    },
    {
        type: 'payflow_express',
        component: 'Magento_Paypal/js/view/payment/method-renderer/payflow-express'
    },
    {
        type: 'payflow_express_bml',
        component: 'Magento_Paypal/js/view/payment/method-renderer/payflow-express-bml'
    },
    {
        type: 'payflowpro',
        component: 'Magento_Paypal/js/view/payment/method-renderer/payflowpro-method'
    },
    {
        type: 'payflow_link',
        component: 'Magento_Paypal/js/view/payment/method-renderer/iframe-methods'
    },
    {
        type: 'payflow_advanced',
        component: 'Magento_Paypal/js/view/payment/method-renderer/iframe-methods'
    },
    {
        type: 'hosted_pro',
        component: 'Magento_Paypal/js/view/payment/method-renderer/iframe-methods'
    },
    {
        type: 'paypal_billing_agreement',
        component: 'Magento_Paypal/js/view/payment/method-renderer/paypal-billing-agreement'
    }
);

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Paypal/view/frontend/layout/checkout_index_index.xml#L26-L45


<item name="paypal-payments" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Paypal/js/view/payment/paypal-payments</item>
    <item name="methods" xsi:type="array">
        <item name="payflowpro" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="payflow_link" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="payflow_advanced" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="hosted_pro" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
        <item name="paypal_billing_agreement" xsi:type="array">
            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
        </item>
    </item>
</item>

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Vault/view/frontend/web/js/view/payment/vault.js#L20-L28


_.each(window.checkoutConfig.payment.vault, function (config, index) {
    rendererList.push(
        {
            type: index,
            config: config.config,
            component: config.component
        }
    );
});

github.com

magento/magento2/blob/6ce74b2/app/code/Magento/Vault/view/frontend/layout/checkout_index_index.xml#L26-L29


<item name="vault" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Vault/js/view/payment/vault</item>
    <item name="methods" xsi:type="array"/>
</item>