Invisible reCAPTCHA - Missing required parameters: sitekey
26,366
Solution 1
You are missing an important part here. The api widget must rendered explicitly. Just add render=explicit
to recaptcha api script.
<script src='https://www.google.com/recaptcha/api.js?
onload=onloadCallback
&render=explicit
&hl={{app.request.locale|default(defaultLang) }}' async defer>
</script>
Read the Google doc (reCAPTCHA V2 | reCAPTCHA - Explicitly render the reCAPTCHA widget).
Solution 2
If you are here only for working Recaptcha Invisible v2 code example:
1. Put id="recaptcha" on your form button
2. Add JavaScript
var recaptchaCallback = function() {
$("button#recaptcha").each(function () {
var el = $(this);
grecaptcha.render($(el).attr("id"), {
"sitekey": 'YOUR_GOOGLE_RECAPTCHA_KEY',
"size": "invisible",
"badge": "bottomleft",
"callback": function (token) {
$(el).closest("form").submit();
}
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>
Author by
jureispro
Updated on May 06, 2020Comments
-
jureispro about 4 years
I am loading Invisible reCAPTCHA dynamically for every form with button that has class
g-recaptcha
.Problem that I have is that captcha is not loading correctly and I am not sure why. I followed documentation on captcha website and I am not sure how and why I got this error:
Uncaught Error: Missing required parameters: sitekey
Does someone knows where is the problem?
Here is code I use:
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{ app.request.locale|default(defaultLang) }}' async defer></script>
JS
var onloadCallback = function () { $("button.g-recaptcha").each(function () { var el = $(this); //SITE_KEY is actually hard coded string. //It is string that google provided. I just remove it for security reasons... grecaptcha.render($(el).attr("id"), { "sitekey": SITE_KEY, "size": "invisible", "badge": "inline", "callback": function (token) { $(el).parent().find(".g-recaptcha-response").val(token); $(el).closest("form").submit(); } }, true); }); $("button.g-recaptcha").click(function(event) { event.preventDefault(); grecaptcha.execute(); }); };
EXAMPLE OF HTML:
<button type="submit" id="submitReviewButton" class="btn btn-lg btn-submit btn--green g-recaptcha" > {{ "review.submit_your_review"|trans }} </button>
-
FireEmerald over 5 yearsMake also sure that if you pass in the
grecaptcha.render(container, params)
method a dom object as container, that it is actually a dom object and not a jQuery object.