How do I stop Google reCAPTCHA from showing alerts?

Question

I have some forms on the website and Google invisible reCAPTCHA. From time to time something goes wrong and an alert is shown: "Cannot contact reCAPTCHA. Check your connection and try again.". I tried to hide those messages by overriding alert function:

<script>
    var _alert = window.alert;
    window.alert = function(text) {
        if(text.indexOf("reCAPTCHA") === -1){
            _alert(text);
        }
        return true;
    };
</script>

However, it doesn't work. Alerts are still shown. This is the code I use to call reCAPTCHA. I use real site key instead of MY_SITE_KEY:

<script>
    var widgetNewsletter;
    var widgetRegistration;
    var captchaCallback = function() {
        widgetNewsletter = grecaptcha.render('subscriptionSubmit', {
            'sitekey' : 'MY_SITE_KEY',
            'callback' : function() {
                document.getElementById("newsletter-validate-detail").submit();
            }
        });
        if(document.getElementById("registerFormSubmit") !== null) {
            widgetRegistration = grecaptcha.render('registerFormSubmit', {
                'sitekey' : 'MY_SITE_KEY',
                'callback' : function() {
                    document.getElementById("form-validate").submit();
                }
            });
        }
    };
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=captchaCallback&render=explicit' async="false" defer></script>

How can I stop alerts from appearing?

Answer 1

According to the document, you can pass error callback when you call the render() function. The error callback will be executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. So your code will look like this

widgetNewsletter = grecaptcha.render('subscriptionSubmit', {
        'sitekey' : 'MY_SITE_KEY',
        'callback' : function() {
            document.getElementById("newsletter-validate-detail").submit();
        },
        'error-callback': function(){
          //show error message
        }
    });