6

I need to add a captcha validation to checkout order review right before place order. I want to use the built in Captcha functionality. I dug into the implementation and discovered that there are two approaches:

  • block reference through layout (for forgot password, create user and login, contact us and change password) which doesn't apply in my case
  • UI components (for Checkout as a guest and Register during checkout)

I tried to mimic the guest_checkout implementation but without success.

I have created a module that extends Magento_Captcha and created MyProject/Captcha/view/frontend/layout/checkout_index_index.xml with the following xml configuration:

<?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">
                                                        <item name="beforeMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="captcha-order-review" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Captcha/js/view/checkout/defaultCaptcha</item>
                                                                    <item name="displayArea" xsi:type="string">beforeMethods</item>
                                                                    <item name="formId" xsi:type="string">checkout_order_review</item>
                                                                    <item name="configSource" xsi:type="string">checkoutConfig</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

but nothing is displayed. The configuration is loaded - see screenshot below: enter image description here

I tried to add a simple text by using the below xml configuration

<item name="some_text" xsi:type="array">
    <item name="sortOrder" xsi:type="string">35</item>
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">MyProject_Captcha/checkout/test</item>
    </item>
</item>

and the text in frontend/web/template/checkout/test.html is displayed.

What would be the best approach and implementation guide lines in this case? Am I missing anything?

-1

On M2.1, I've managed to add captcha in the order review step, to each payment method, right before the place order button. There are also other things to keep in mind when implementing this feature like admin enable and visibility settings, validation, captcha reload when clicking the place order button (XHR request). Also make sure your captcha inputs have unique names in case you have multiple payment methods.

<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">
                                                        <item name="payments-list" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <!-- merge additional data after payment methods here -->
                                                                <item name="captcha-review" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Captcha/js/view/checkout/defaultCaptcha</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="formId" xsi:type="string">co-payment-form</item>
                                                                    <item name="configSource" xsi:type="string">checkoutConfig</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

will look like this enter image description here

  • I have implemented but it's not working. Can you please explain in detail? – Akash Mar 22 at 14:05
  • can you provide some details regarding what exactly is not working? – Radu Mar 22 at 15:21
  • I have created my custom module and add checkout_index_index.xml file with your code but not working. – Akash Mar 25 at 9:08
  • -1 on this, this just sent me on a goose chase. I feel like you left out some important details or maybe this just broke on newer magento but either way it doesn't work for me. – jamil Apr 2 at 3:34
  • @jamil this was developed on Magento 2.1 - I am sorry this wasn't helpful enough for you. believe me this was a really time consuming task for me at that time and I struggled really hard to resolve it (the documentation wasn't that great at that time). – Radu Apr 2 at 7:59

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.