Magento – Google reCaptcha not working for inline login on Checkout page

magento2recaptcha

I've installed msp-recaptcha-2.0.0.0 in my Magento 2.2.6 installation and all works fine except for a glitch on the Checkout page.

On the Checkout page customers first see the "Review & Payments" section which contains an "Email Address" field. The email field has a listener which checks whether an entered email address belongs to an existing customer. If yes, a hidden Password field is made visible and we see the text "You already have an account with us. Sign in or continue as guest." and a Login button. However the reCaptcha widget is NOT displayed. Thus it is impossible to log in from here as the error message "Incorrect reCaptcha" always results.

In the top right corner of the Checkout page there is a "Sign In" popup which DOES contain the reCaptcha widget and works properly.

The MSP reCaptcha extension includes code to use the reCaptcha widget in the in-line Login case, but it's not working. Any workaround or solution would be really appreciated. After many hours I still cannot make it work. Thanks.

Best Answer

I finally tracked this down. I discovered the the Checkout process is dynamic and can consist of several steps, such as "Shipping" and "Review & Payments" etc. The exact sequence a customer sees will depend on specific product attributes. For example, for a product without weight, the Checkout page goes straight to "Review & Payments". If a product does have weight, the Checkout page starts at the "Shipping" step.

The MSP extension provided 2 block layouts for the Checkout page in the file

vendor/msp/recaptcha/view/frontend/layout/checkout_index_index.xml

Those corresponded to the shipping-step and authentication (pop up) page layouts, as follows:

checkout.steps.shipping-step.shippingAddress.customer-email.msp_recpatcha
checkout.authentication.msp_recpatcha

These worked fine as long as cart items had weight (and Checkout started on the "Shipping" step). The bug was that a layout for the billing-step was missing:

checkout.steps.billing-step.payment.customer-email.msp_recpatcha

This meant if you got to Checkout with items that did not have weight, you were unable to do an in-line login because the reCaptcha widget was missing. When this was added to the page layout, then the reCaptcha widget code was generated correctly by KnockOutJS in all 3 cases:

reCaptcha in the Checkout page "Sign In" pop up
reCaptcha in the in-line login on the Shipping step
reCaptcha in the in-line login on the Payment step

In addition to checkout_index_index.xml, the associated change was also made to

vendor/msp/recaptcha/Block/LayoutProcessor/Checkout/Onepage.php

Hope this helps others to get MSP reCaptcha working correctly in all Checkout page scenarios.

Related Solutions

Magento – Magento 2: Checkout page can’t continue

There was a javascript error causing this problem.

I solved it by setting Number of Address lines in Stores > Configuration > Customer > Customer Configuration > Name and Address Options to 1 (instead of 2).

This is a common problem in 2.1.

Magento 2.3 – Contact Form in Modal Popup Not Showing Google Recaptcha

Solved. I just needed to add the MSP block to the form.additional.info container in my modules default.xml:

    <referenceContainer name="form.additional.info">
        <block class="MSP\ReCaptcha\Block\Frontend\ReCaptcha" name="msp-recaptcha" after="-"
               template="MSP_ReCaptcha::msp_recaptcha.phtml">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="msp-recaptcha" xsi:type="array">
                            <item name="component" xsi:type="string">MSP_ReCaptcha/js/reCaptcha</item>
                            <item name="zone" xsi:type="string">contact</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>

So my final default.xml looks like this:

<?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">
    <head>
        <css src="Sulman_PopupContactForm::css/contact-popup.css" />
    </head>
    <referenceContainer name="footer">
        <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
            <container name="form.additional.info" label="Form Additional Info"/>
        </block>
        <block class="Magento\Framework\View\Element\Template" name="popup-button" template="Sulman_PopupContactForm::popup-button.phtml"></block>
    </referenceContainer>

    <referenceContainer name="form.additional.info">
        <block class="MSP\ReCaptcha\Block\Frontend\ReCaptcha" name="msp-recaptcha" after="-"
               template="MSP_ReCaptcha::msp_recaptcha.phtml">

            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="msp-recaptcha" xsi:type="array">
                            <item name="component" xsi:type="string">MSP_ReCaptcha/js/reCaptcha</item>
                            <item name="zone" xsi:type="string">contact</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>
</page>

Google recaptcha now works on the popup correctly.

Best Answer

Related Solutions

Magento – Magento 2: Checkout page can’t continue

Magento 2.3 – Contact Form in Modal Popup Not Showing Google Recaptcha

Related Topic