Uncaught (in promise) TypeError: recaptchaResponse is null

Question

Uncaught (in promise) TypeError: recaptchaResponse is null

Closed this issue 4 months ago · 8 comments

itaak commented 5 months ago

Check if your issue exists

I confirm that i've search that my issue does not already exists

Your prestashop version

8.1.x

Eicaptcha version

2.5.x

Do you use a specific theme ?

Yes

https://lartdelabiere.fr/nous-contacter

Describe the bug

I'd like to use the module with v3, but it's not possible. I get an error when I click 'send' on the contact form. It seems like it's not retrieving the value from the input in the form, which is weird. I looked at the code a bit and realized that the API is not the same, here are my instructions :

<head>
  <script src="https://www.google.com/recaptcha/enterprise.js?render=6LelJ30pAAAAANSxkh9W5zeVUcq7Hm2eWx5DIChb"></script>
  <!-- Your code -->
</head>

<script>
  function onClick(e) {
    e.preventDefault();
    grecaptcha.enterprise.ready(async () => {
      const token = await grecaptcha.enterprise.execute('6LelJ30pAAAAANSxkh9W5zeVUcq7Hm2eWx5DIChb', {action: 'LOGIN'});
    });
  }
</script>

I think this has nothing to do with my problem but it's just for your information.

Screenshots

Uncaught (in promise) TypeError: recaptchaResponse is null


<script>
            grecaptcha.ready(function () {
                grecaptcha.execute("6LelJ30pAAAAANSxkh9W5zeVUcq7Hm2eWx5DIChb", {action: "contact"}).then(function (token) {
                    var recaptchaResponse = document.getElementById("captcha-box");
                    recaptchaResponse.value = token;
                    });
                });
 </script>

Additional context

id="captcha-box" value="03AFcWeA6BXUw5tGeO2MW0iew5KN7WVALV_GyDItZUldUEj9_NK0K-6uixm2MH4Z-I01rSg_j19qxmwh--880qVqsRZmubeln4gdgAo2rcuWDi6sBGApCj9SqbNEkfW2k5uCMdrVH50b7WNdcUPzrIWkXfM8jlohdcnmlRlRuUykbf89jxM33kLz9x9KgCLJBxsX1JcQIKOVKhfMv8-2d72RrxNomI-XPpEpyzwkKwxFfOS3cz-2Dy72CQsOStypf6OkmWhHHPpQNfDltoNFfRNKJya4hy6zTBYlYKbyZEhknjS3ZvriILxaOQ269Yw1B9zpkw76Cqaz4fMCW1VWfUTzCeWJeb71cYRLN9xDN7bGAEeg9ERo-i6SFa1KoHPK-S4jXT_TdGLkNMRSPq2AA4b9L5RuWTN13B_wjLDkx2jp45VbKT7bW_aQEgIqQUT8qWNCGJAfFmRxZ02E2yJql9OIfNje9i4hXtW2hmmgpGvNJWS4PH0jY2UZtDqv7sAtoaMMu199bB8r929-ODEtqM-TSaPjEl6JNAPTeon9qVxO-SKL41k_LR90Awoxt3_QfFKw-Iy6wUOrbVz1lMfn1GfkNO0cDQcyt-joZK7rHmCJfi3oSbmxYlUNp9W9te6aP3bxaxj6tU3tNipFKVj2R5JZeOZGF00noXJxbhbOarG9c-DsRnwCSIumXfrXz40FyomkMtmtOu4ldX0zbYTKjdzga11-TBg9hvXeWRb6EMhQnanszMnUmkPHLjONTpoOrQ9E8hD9wXcQEeezVfFBbLjuOa-PGItiBQ68V29_CvkS0jvCnKHeb0gqvm-nHhdnF6-h7GCCt2ZUJS8_IQuVNWIU96au1RMGZ56xWLLepdaVBF1wjQsahhRlyqzf_6v4ckfFgHADV8N1lDuJYHjI_ureOnODImvfOtN9rLIe58Q2t8G8CttbgX-yo0zJ3yyXcoOL0FMY3wYFpPa9BN1uMEsyG8zL30p4cQhCUdntvXbOuUeZ9VrOweHi-s4xr-nW6Htl5gLCT8EHh3EWQDH9fxsHFpi3NYIqZFR1bSIYDL19wqC_Z4VHm0GcHZhCfnTo4Cw29K_6CoWnEOgu_0k11oMYCJzI9SidY1SpPAbKzXr7KaaRmuocN31dOvWSDi6PPN_RzLxzh8AG_Iyc6_OhV64pIjM79whrPEU_V73C0KE5JegprP4pFhjfaCBkR1SVS3Hes3XBOzwbDzkp7Wz--_n4tBrA-DUDZ1_sQV9P92wrsF9NJ312hiftfEeZ-aSytl23GjaHRswDu2kWUiWRAwVMV1DQjx2iMdNn2yJGEbDqNNjplXxH74pzx4vmKyZfvz5aAyDuVDaD4SzLYpNsC6G-rs_90QeXS5JtkLcxqTM6mspUCaH-I_tLUK9RUPyvG9ohMEjdXxny94AYQtcJLFq__Jr5_G4VACHUbqrL7oJdoE6Xw9b1BneFDeblsDt5-xFHJ6l5X9oxxWgZ1QxgDLM1n_EuY6Jm4g1Z6_c-zLcRPrg3OIixs6AM9_WysZKDvYc9v-6_OI3owQGb98FWirwFsvm7HZrgqJXfVIBN3CHXVo6N4U6d2DYguJSMoop6WUN4ErLsGnIw5amrpkP6h0EHYMCMgxn-owejoIcdYznzVQ4lRPMIowu_9LzZY_OFFV3G7VCDGqGbBAhpnni8bfxReBpgbT_dVjid0r1xrt_tC9Jj-5dYzDdRzvTvyirmNd5Rnwtn4rke-rWOHLvmXws5j91KkcKvvadw" name="g-recaptcha-response"

Answer 1 · 2024-02-23T14:38:57.000Z

Same problem here

Answer 2 · 2024-02-23T14:46:56.000Z

I tried the form create account page and it works on this page. The bug occure only on contact form page

Answer 3 · 2024-02-23T15:14:18.000Z

This:

<script>
            grecaptcha.ready(function () {
                grecaptcha.execute("6LelJ30pAAAAANSxkh9W5zeVUcq7Hm2eWx5DIChb", {action: "contact"}).then(function (token) {
                    var recaptchaResponse = document.getElementById("captcha-box");
                    recaptchaResponse.value = token;
                    });
                });
 </script>

Means balise with id captcha-box was not found.

Problem can be fixed by following this explanation: https://www.h-hennes.fr/blog/module-recaptcha-pour-le-formulaire-de-contact-prestashop/

Le module ajoute dynamiquement une balise html <div id= »captcha-box »></div> à la fin du formulaire de contact, le captcha est ensuite ajouté automatiquement dans cette balise par le script recaptcha.

Sur certains thèmes spécifiques l’ajout de cette balise ne fonctionne pas correctement.
Le plus simple pour le corriger est d’ajouter manuellement le code:

`<div id="captcha-box"></div>`


dans le template du formulaire de contact qui est situé dans themes/votretheme/<strong>contact-form.tpl</strong> avant la fin de la balise &lt;/form&gt; ( libre à vous d’adapter ensuite son affichage )

Answer 4 · 2024-02-23T21:49:31.000Z

This:

<script>
            grecaptcha.ready(function () {
                grecaptcha.execute("6LelJ30pAAAAANSxkh9W5zeVUcq7Hm2eWx5DIChb", {action: "contact"}).then(function (token) {
                    var recaptchaResponse = document.getElementById("captcha-box");
                    recaptchaResponse.value = token;
                    });
                });
 </script>

Means balise with id captcha-box was not found.

Problem can be fixed by following this explanation: https://www.h-hennes.fr/blog/module-recaptcha-pour-le-formulaire-de-contact-prestashop/

Le module ajoute dynamiquement une balise html <div id= »captcha-box »></div> à la fin du formulaire de contact, le captcha est ensuite ajouté automatiquement dans cette balise par le script recaptcha.

Sur certains thèmes spécifiques l’ajout de cette balise ne fonctionne pas correctement.
Le plus simple pour le corriger est d’ajouter manuellement le code:

`<div id="captcha-box"></div>`


dans le template du formulaire de contact qui est situé dans themes/votretheme/<strong>contact-form.tpl</strong> avant la fin de la balise &lt;/form&gt; ( libre à vous d’adapter ensuite son affichage )

I've already tried to do it, but that's not the issue for two reasons:

I'm using (re)Captcha v3, so it's not <div id="captcha-box"></div>, but <input type="hidden" id="captcha-box" value="" name="g-recaptcha-response"> that should be added according to the module's JavaScript and it is indeed added."
I can't use (re)Captcha v2 because the key is not recognized, perhaps because my key is for an enterprise (https://www.google.com/recaptcha/enterprise.js?render), while in the module, the endpoint is https://www.google.com/recaptcha/api.js?render=

So unless I'm mistaken, I don't quite understand where the problem could be coming from.

It's Prestashop 8.0.5 and I'm French if you need help!

Thx

Answer 5 · 2024-02-25T01:53:58.000Z

If you want use capcha v2 you have to create a key specialy for it here : https://www.google.com/recaptcha/admin/

(I struggle to find it out to...)

Answer 6 · 2024-02-25T19:21:12.000Z

If you want use capcha v2 you have to create a key specialy for it here : https://www.google.com/recaptcha/admin/

(I struggle to find it out to...)

Thanks ! But I prefer v3 🥲

You can close the issue, I will look for another solution 😉

Answer 7 · 2024-02-26T09:52:30.000Z

Hello,

Thanks for your feedback
I need to check the behavior with the enterprise version.
But with the standard version both v2 and v3 keys are working.

Regards,

Answer 8 · 2024-02-26T14:02:08.000Z

Hello,

Thanks for your feedback I need to check the behavior with the enterprise version. But with the standard version both v2 and v3 keys are working.

Regards,

Yes, it's true !