0

I have two newsletter forms on the same page, One on the sidebar and the other placed as a modal popup, I'm trying to implement Recaptcha for the modal popup newsletter form (which is the same newsletter form with different CSS selector #ID) by extending below view / phtml file to my popup layout.

<div
    class="field-recaptcha"
    id="<?= /* @noEscape */ $block->getRecaptchaId() ?>-container"
    data-bind="scope:'<?= /* @noEscape */ $block->getRecaptchaId() ?>'"
>
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/javascript">
    require(['jquery', 'domReady!'], function ($) {
        $('#<?= /* @noEscape */ $block->getRecaptchaId() ?>-container')
            .appendTo('#mp-newsletter-validate-detail');
    });
</script>

<script type="text/x-magento-init">
{
    "#<?= /* @noEscape */ $block->getRecaptchaId() ?>-container": {
        "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
    }
}
</script>

layout file

<block class="MSP\ReCaptcha\Block\Frontend\ReCaptcha"
                   name="msp-recaptcha-newsletter-popup"
                   after="-"
                   template="MSP_ReCaptcha::msp_recaptcha_newsletter_popup.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="reCaptchaId" xsi:type="string">msp-recaptcha-newsletter-popup</item>
                                <item name="zone" xsi:type="string">newsletterpopup</item>
                                <item name="badge" xsi:type="string">bottomright</item>
                                <item name="settings" xsi:type="array">
                                    <item name="size" xsi:type="string">invisible</item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>

I can see the Recaptcha badge is loaded into the form, however, when try submitting the following error appears.

You cannot proceed with such an operation, your reCaptcha reputation is too low.

Any workaround will be helpful.

1 Answer 1

0

This may be due to the elements having the same reCaptchaId. You would need to just modify the XML on one of these to update it.

May also be worth changing the block names and such if they match too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.