Recaptcha: data-callback not firing

[apriebe]

data-callback not getting called

The following is a very simple implementation of Google ReCaptcha using ReactJS. The attrs data-type and data-theme work, however the data-callback and data-expired-callback never get called. There are no errors thrown either.
Google Chrome Version 45.0.2454.101 (64-bit)

Footer HTML

<script src='https://www.google.com/recaptcha/api.js'></script>

Javascript/JSX

(function() {
"use strict";

/**
 * Represents a Google ReCaptcha
 */
class Captcha extends COS.Input.Base
{

    getCaptchaResponse(response) {
        alert('working: ', response);
    }

    renderEdit()
    {
        return (
            <div
                ref="captcha"
                id="captcha"
                name="captcha"
                data-type="audio"
                data-theme="dark"
                data-sitekey="6Lc9fg4TAAAAAGYyFskow-g2b4IQ_rLvsLkHicuS"
                data-callback={this.getCaptchaResponse}
                className="g-recaptcha"></div>
        );
    }

}

    Captcha.makeDefaultProps({
        // Extend Default Props here
    });

    COS.Input.Captcha = Captcha;
})();

How it renders in the HTML

<div id="captcha" name="captcha" data-type="audio" data-theme="dark" data-sitekey="6Lc9fg4TAAAAAGYyFskow-g2b4IQ_rLvsLkHicuS" data-callback="function (response) {
        alert('working: ', response);
    }" class="g-recaptcha" data-reactid=".2.$29.8.$39.1.$60.1.1.$83.1.0.1.1:$311.1"><div>

[rowan-m]

The data-callback and data-expired-callback attributes expect a string the defines the name of the function in the global namespace that should be fired. You cannot define the function within the attribute.

[apriebe]

Thanks Rowan. So Google ReCaptcha isn't really designed to work with React then?

I added a global function:

function recaptchaWorks(response) {
    alert("WORKS");
}

And changed the data-callback

data-callback="recaptchaWorks"

This works now, however it doesn't give me access to the response within the class where it is actually needed. Do you know of a workaround for this?

[rowan-m]

https://developers.google.com/recaptcha/docs/verify
The callback function should receive a string parameter with the response as specified in the linked docs. Is that coming through?

[apriebe]

Yes.

[rowan-m]

Sounds good to me!

[dev-riseapps]

This works now, however it doesn't give me access to the response within the class where it is actually needed. Do you know of a workaround for this?

You can do something like this

class A extends React.Component{
    constructor(props) {
        super(props);
        window.handleRecaptcha = this.handleRecaptcha;
    }

    handleRecaptcha(){
        alert('You can handle captcha inside the class here');
    }

    render(){
        return <div className="g-recaptcha" 
            data-callback="handleRecaptcha" 
            data-sitekey="..."/>
    }
}

[AfonsoCFonseca]

@dev-riseapps thank you, that solved my issue ;)