Removing Recaptcha v2 problematically after being solved

Viewed 7427

I'm adding the Google Recaptcha v2 problematically to a backbone view like so:

// this is the callback function
var getRecaptchaResponse = function (response) {
    if (response) {
        thisView.captchaResponse = response;
        thisView.canShowContinue();
    } else {
        alert("Captcha response was incorrect");
    }
};

// render the recaptcha
var renderCaptcha = function () {
    thisView.captchaWidgetId = grecaptcha.render('recaptcha-container', {
        sitekey: GlobalSettings.recaptchaKey,
        callback: getRecaptchaResponse,
        size: 'compact'
    });
};

// map the internal function to the window
// so that the callback registered in the 
// link below can be called by JSONP.
window.renderCaptcha = renderCaptcha;

// load the script
$.getScript('https://www.google.com/recaptcha/api.js?onload=renderCaptcha&render=explicit', function () { });

Once the Captcha is solved successfully I want to remove it from the UI, so I'm simply removing the div container:

// if the user has solved the captcha yet, don't continue
if (!thisView.captchaResponse) {
    return;
}

// remove recpatcha
$('#recaptcha-container').remove();

There doesn't seem to be a API method that Google have offered to destroy the grecaptcha widget properly though. Is this a problem? What's the recommended way of doing this?

The above removal of the container works in Chrome, but not in IE11. In IE11 the captcha challenge remains visible.

1 Answers
Related