Uncaught ReferenceError: grecaptcha is not defined
Recaptcha has a onload
callback that will run once recaptcha is loaded. Place your code inside that callback function.
https://developers.google.com/recaptcha/docs/display
<script>
function onloadCallback() {
/* Place your recaptcha rendering code here */
}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
I have solved this by ordering the script in below manner
HTML
<div id="review_recaptcha"></div>
jQuery
<script type="text/javascript">
var review_recaptcha_widget;
var onloadCallback = function() {
if($('#review_recaptcha').length) {
review_recaptcha_widget = grecaptcha.render('review_recaptcha', {
'sitekey' : '<?php echo $site_key?>'
});
}
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
My Problem got resolved by doing following changes in the script code (:
i.e from internal path
<script src='static/js/recaptcha/api.js'></script>
to external google path i.e
<script src='https://www.google.com/recaptcha/api.js'></script>