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:
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?
Best Answer
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.
will look like this