Google multiple recaptcha on single page

[rutulritz]

Hi,

I have create custom JS to render the google re-captcha on the forms. Here I created 2 files of it. one is for breeze_default.xml and another is for non breeze pages.

Now in my case the Customer login page has disabled breeze for some reasons and on the same page Signup popup is showing from header link.

1. breeze enabled JS for other pages excluding customer account login page. Magento_Theme/web/js/googleRecaptcha.js
2. it is created default magento : Magento_Theme/js/google_recaptcha.js

in phtml file I am using below :

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/validation" : {},
            "Magento_Theme/js/google_recaptcha": {}
        },
    }
</script>

My issue is on only login page or without breeze enabled pages.

I have attached all files below. Can you please check it once anything wrong in the overriding component in breeze ?

Please guide me on the same.

Thanks
Rutul

googleRecaptcha.txt
google_recaptcha.txt
breeze_default.txt

[vovayatsyuk]

Magento works with google recaptcha out of the box and Breeze support it too. Can you stick to default functionality instead of reimplementing it on your own?

[rutulritz]

Ok, So in my custom template from where or how can I render it?

For ex. Here I want to use it on my Signin/Signup popup.

Can you please guide me?

Thanks

[vovayatsyuk]

This code will add a login container with captcha at the bottom of all pages:

<referenceContainer name="before.body.end">
    <container name="customer.login.popup" label="Customer Login Container" htmlTag="div" htmlClass="login-container login-popup">
        <block class="Magento\Customer\Block\Form\Login" name="customer_form_login" template="Magento_Customer::form/login.phtml">
            <container name="form.additional.info" as="form_additional_info">
                <block class="Magento\ReCaptchaUi\Block\ReCaptcha"
                       name="recaptcha"
                       after="-"
                       template="Magento_ReCaptchaFrontendUi::recaptcha.phtml"
                       ifconfig="recaptcha_frontend/type_for/customer_login">
                    <arguments>
                        <argument name="recaptcha_for" xsi:type="string">customer_login</argument>
                        <argument name="jsLayout" xsi:type="array">
                            <item name="components" xsi:type="array">
                                <item name="recaptcha" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_ReCaptchaFrontendUi/js/reCaptcha</item>
                                </item>
                            </item>
                        </argument>
                    </arguments>
                </block>
            </container>
            <arguments>
                <argument name="login_button_view_model" xsi:type="object">Magento\Customer\ViewModel\LoginButton</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Form\Login\Info" name="customer.new" template="Magento_Customer::newcustomer.phtml"/>
    </container>
</referenceContainer>

And here is the js code that will show it in the modal:

$('.login-popup').modal({
    modalClass: 'modal-xl',
    buttons: [],
});
$('.login-popup').modal('openModal');

Then you need to:

• Remove it from the layout on the login page <referenceContainer name="customer.login.popup" remove="true"/>
• Add styles for the content inside modal

[rutulritz]

Hi @vovayatsyuk

Thanks for your suggestion. But here I am not using default magento's Login form in the popup.

So for that case How can I implement recaptcha
I tried by refering above xml code to all recaptcha on my custom form bt still it is not redering.

Thanks

[vovayatsyuk]

You have to find out how recaptcha is added in my example and implement it similarly.

[rutulritz]

Ok, I will try it again

Thanks

[rutulritz]

HI @vovayatsyuk ,

It is still not working.

Sorry, but let me explain again .

1] Breeze is disabled from backend for /customer/account/login/ page
2] I have added custom 2 login & signup forms in the popup with recaptcha using custom js given in above question.
3] This popup with both form submission working fine on all other pages expecting Login page [Point-1]
4] Required - In this same page, I need login/signup popup as well.
5] form submission is not working only for signup form in popup with captcha on login page.

Can you please check below URL to understand the issue :
https://eeupgrade.colehaan.co.id/customer/account/login/ - Click on "Join/Sign in" from header to show the popup

Please check and help me to fix this issue.

Thanks

[vovayatsyuk]

Sorry, I don't know how to help you. You have to debug it on your own.

[rutulritz]

I fixed this issue now.

Thanks for your support.