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.
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.
Best Answer
Try to find file
./view/frontend/web/js/reCaptcha.js
in you project and change code:set