Google REcaptcha not showing

Question

I have the following in my <body>

<div class="g-recaptcha" data-sitekey="some-key (original is right)">

and this on my <head>

<script src="//www.google.com/recaptcha/api.js"></script>

but nothing is shown, either on firefox or chrome... Is this a known issue?

is there any script errors in console? – Ravimallya Jun 16 '15 at 07:46 — Ravimallya, Jun 16 '15 at 07:46

score 10 · Answer 1 · answered Nov 01 '16 at 20:49

10

make sure that <script src="//www.google.com/recaptcha/api.js"></script> is the last thing before closing of head tag. That fixed same problem for me

answered Nov 01 '16 at 20:49

Andrei

801
2
10
27

score 9 · Answer 2 · answered Sep 24 '17 at 09:42

Just hit this obstacle, and in my case it was due to AngularJS. It's not limited to Angular, any library which binds the elements after page load can cause the Google reCAPTCHA to not show up since the element just does not exist by the time Google's code is being executed.

To solve this, first make the render explicit and supply a function to execute when the reCAPTCHA loads:

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>

Now, add a unique ID to the container, e.g.

<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>

Then in the custom function wait for the element to actually exist:

var _captchaTries = 0;
function recaptchaOnload() {
    _captchaTries++;
    if (_captchaTries > 9)
        return;
    if ($('.g-recaptcha').length > 0) {
        grecaptcha.render("recaptcha", {
            sitekey: 'site key here',
            callback: function() {
                console.log('recaptcha callback');
            }
        });
        return;
    }
    window.setTimeout(recaptchaOnload, 1000);
}

This will keep trying for 10 seconds, until it finds the element, then render the reCAPTCHA into it.

@RajatTyagi it should be called automatically when the API loads, you send it to the API via the url: `?onload=recaptchaOnload&render=explicit`. I didn't test in recently, doesn't it work anymore? If you add `console.log` lines to the function you don't see the output? (Or direct debugging via dev tools) — Shadow The GPT Wizard, Jul 02 '20 at 06:20

score 0 · Answer 3 · answered Apr 20 '17 at 07:19

0

Make sure you don't have any content blockers activated in your browser, for example Ad-Block Plus or uBlock origin.

Disable these, refresh the page and submit the form again.

answered Apr 20 '17 at 07:19

crmpicco

16,605
26
134
210

score -1 · Answer 4 · answered Sep 18 '17 at 10:29

The issue I had was that it was showing most of the time but occasionally it wouldn't and I'd have to submit the form (and trigger validation) for it to show. Adding ?render=explicit to the script tag fixed it for me.

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

https://developers.google.com/recaptcha/docs/display#explicit_render

score -3 · Answer 5 · edited Sep 01 '16 at 21:40

-3

I just had this on a system that has stricter browser settings.
Adding *.gstatic.com to the trusted list resolved it

I also added *.google.com and *.google-analytics.com

Hope that helps someone

edited Sep 01 '16 at 21:40

Danny Buonocore

3,731
3
24
46

answered Sep 01 '16 at 20:41

DTM

1

score -4 · Answer 6 · answered Jun 16 '15 at 06:11

-4

Change:

<script src="//www.google.com/recaptcha/api.js"></script>

to:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

I don't know if that's just a typo, if it isn't, adding the https: would definitely solve your problem.

answered Jun 16 '15 at 06:11

panda.o24

1,888
1
13
14

1

`adding the https: would definitely solve your problem` There's no definitely about that; `//www.google.com/...` is a protocol-relative URL. If @Fane's document was being served from an `https` source, it'd be identical. – Olson.dev Feb 18 '16 at 00:08

Google REcaptcha not showing

6 Answers6

Linked