4

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>
2
+50

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>
  • Thanks @Zefiryn ! It works fine. I think I tried that once, but something was missing in it. – Sanjay Chaudhary Apr 18 '17 at 6:41

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.