2

I'm trying to create a new checkout layout with shipping address, shipping methods and payment in single page. Though I use the following code snippet inside the shipping-step section,

<item name="payment" xsi:type="array">
<item name="component" xsi:type="string">Vendor_CheckoutNew/js/view/payment</item>
<item name="displayArea" xsi:type="string">payment-options</item>
<item name="children" xsi:type="array">
    <item name="renders" xsi:type="array">
        <item name="component" xsi:type="string">uiComponent</item>
        <item name="children" xsi:type="array">
            <!-- merge payment method renders here -->
        </item>
    </item>
    <item name="additional-payment-validators" xsi:type="array">
        <item name="component" xsi:type="string">uiComponent</item>
        <item name="children" xsi:type="array">
            <!-- merge payment validators here -->
            <item name="email-validator" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item>
            </item>
        </item>
    </item>
    <item name="customer-email" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
        <item name="displayArea" xsi:type="string">customer-email</item>
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
        </item>
        <item name="children" xsi:type="array">
            <item name="before-login-form" xsi:type="array">
                <item name="component" xsi:type="string">uiComponent</item>
                <item name="displayArea" xsi:type="string">before-login-form</item>
                <item name="children" xsi:type="array">
                    <!-- before login form fields -->
                </item>
            </item>
            <item name="additional-login-form-fields" xsi:type="array">
                <item name="component" xsi:type="string">uiComponent</item>
                <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                <item name="children" xsi:type="array">
                    <!-- additional login form fields -->
                </item>
            </item>
        </item>
    </item>
    <item name="beforeMethods" xsi:type="array">
        <item name="component" xsi:type="string">uiComponent</item>
        <item name="displayArea" xsi:type="string">beforeMethods</item>
        <item name="children" xsi:type="array">
            <!-- merge additional data before payment methods here -->
        </item>
        <item name="validation" xsi:type="array">
            <item name="validate-select" xsi:type="string">true</item>
        </item>
        <!-- Value of region_id field is filtered by the value of county_id attribute -->
        <item name="filterBy" xsi:type="array">
            <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item>
            <item name="field" xsi:type="string">country_id</item>
        </item>
    </item>
    <item name="payments-list" xsi:type="array">
        <item name="component" xsi:type="string">Vendor_CheckoutNew/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.shipping-step.shippingAddress.payment.renders</item>
                <item name="1" xsi:type="string">checkout.steps.shipping-step.shippingAddress.payment.additional-payment-validators</item>
            </item>
        </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>
                </item>
            </item>
        </item>
    </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 -->
        </item>
    </item>
</item>

then called payment in shipping.html

<!-- ko foreach: getRegion('payment-options') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

But the payment methods not appear. Any body having idea what i'm missing here?

1

After digging long time found the cause of this problem. We would need to provide the payment method details in the renders section of the custom layout xml.

<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="renders" xsi:type="array">
                                                        <!-- merge payment method renders here -->
                                                        <item name="children" xsi:type="array">
                                                            <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>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>

In my case, I have to provide the this details in checkoutnew_index_index.xml

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.