MSP ReCaptcha V3 - your reCaptcha reputation is too low. - duplicated newsletter form - same page

Question

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.

Answer 1

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.