onload callback called before vcRecaptchaApiLoaded exists

[thejollyrogers]

I've been noticing a flaky problem where the onload callback here <script src='//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit' async defer></script> is called before the callback vcRecaptchaApiLoaded exists...

Is this a known issue? Any ideas to wait around for angular to load and the vcRecaptcha service to attach vcRecaptchaApiLoaded to the window?

[TheSharpieOne]

https://github.com/VividCortex/angular-recaptcha/blob/master/src/service.js#L36 should handle the case where recaptcha already loaded before vcRecaptcha.

Is recaptcha throwing an error or something when it tries to call vcRecaptchaApiLoaded?

Also note that the function name was recently changed due to a typo: https://github.com/VividCortex/angular-recaptcha/commit/9c460b84da7be8f955f5edf58dd594258a35919c. Ensure that you are using the right function name (typo or no typo) depending on the version of vcRecaptcha

[thejollyrogers]

Okay actually, the onload callback is being called, but vcRecaptchaApiLoaded is undefined... i created a test function on the window scope first thing that i'm using as the onload callback to test if vcRecaptchaApiLoaded is defined on the window, if it is, I call it.

Here's the behavior that I'm seeing:

1. vcRecaptchaService is loaded (console.log at the top of that service)
2. ng.isDefined($window.grecaptcha) returns false. the vcRecaptchaApiLoaded has just been put on the window property and is defined at this point (else { console.log(vcRecaptchaApiLoaded) }
3. onload test function callback is called, but vcRecaptchaApiLoaded is undefined ??

[TheSharpieOne]

vcRecapthaApiLoaded !== vcRecaptchaApiLoaded