Invisible reCAPTCHA - Missing required parameters: sitekey

Question

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>

So... do you have `var SITE_KEY = "......";` somewhere above that code? — , Mar 08 '18 at 13:43
@ChrisG I hard code it inside this function. I just remove it for "security" reasons. SITE_KEY is actually sitekey that google provides — jureispro, Mar 08 '18 at 13:45
Maybe mention that in your question then, given the error you're asking about :) — , Mar 08 '18 at 13:46

Roshana Pitigala · Accepted Answer · 2018-07-03T10:56:31.607

16

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).

edited Jul 03 '18 at 10:56

answered Mar 08 '18 at 19:24

Roshana Pitigala

8,437
8
49
80

10

Make 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. – FireEmerald Feb 28 '19 at 19:34

Mantas D · Answer 2 · 2019-05-06T08:19:39.763

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>

score 0 · Answer 3 · answered Oct 19 '18 at 15:46

If you're getting "Missing required parameters: sitekey" while using Wordpress with CForm Builder and Google Captcha RECaptcha, you have to put the Recaptcha Site Key under "Global Options" in the left-nav for the CForm Builder plugin. You also need the same info in the Google Captcha plugin. This may seem obvious, but I missed the CForm "Global Options" for a long time.

Invisible reCAPTCHA - Missing required parameters: sitekey

3 Answers3

Linked