How to load an UI Component template within payment method section in checkout page?

magento.stackexchange https://magento.stackexchange.com/questions/169989

Question

I am trying to load my component within the payment method section on checkout page.

As of now it appears below Apply Discount section.

I was wondering if its even possible to load my component just after billing-address within payment method section.

I know checkout is a complex implementation and I am asking a lot here but any kind of help would be appreciated.

enter image description here

This is my code for now.

module.xml

<module name="RB_VerifyOtp" setup_version="1.0.6">
        <sequence>Magento_Checkout</sequence>
        <sequence>Magento_OfflinePayments</sequence>
        <sequence>Clicksend_Sms</sequence>
</module>

I have even tried to place my complonent in the offline-payment node under Magento_OfflinePayments module. Somehow component appeared for time being even in COD payment section but after sometime I could not load that again. That's why module.xml contains dependency for Magento_OfflinePayments.

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">
                                                        <!-- merge payment method renders here -->
                                                            <item name="afterMethods" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="otp-verfn" xsi:type="array">
                                                                            <item name="component" xsi:type="string">RB_VerifyOtp/js/view/checkOtp</item>
                                                                        </item>
                                                                    </item>
                                                            </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
Was it helpful?

Solution

Try this

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="children" xsi:type="array">
                                                                <item name="before-place-order" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="otp-verfn" xsi:type="array">
                                                                            <item name="component" xsi:type="string">RB_VerifyOtp/js/view/checkOtp</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top