invisible recaptcha with knockout js

Viewed 1159

I am getting the invisible recaptcha done, but I am having a problem implementing it, the code in the developers page in google show it should be like this

<button
class="g-recaptcha"
data-sitekey="6Lee9CEUAA....."
data-callback="YourOnSubmitFn">
Submit
</button>

But the button on my page is currently includes knockout js data binding which I use to call the login function which sends the ajax call to the back end, but if I use the googles given code, I am not sure how to call the functions in my knockout js file.

Here is the old codes.

<button type="submit" class="btn btnlogin" data-bind="disable: (loggedIn() == 'true'), click: callLoginFunction">
SIGN IN 
</button>

And here is the knockout js function.

    self.callLoginFunction= function () {
            self.getRecaptchaCode();
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/login/loginUsingAjax/' + auth,
                contentType: 'application/json; charset=utf-8',
                data: ko.toJSON({
                    email : self.eMail(),
                    password : self.passWord(),
                    recaptcha : self.recaptchaCode()
                })
            })
            .done(function(returnmsg) {
                return window.location.href = BASEURL + 'index.php/main/index';
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                self.loggedIn('failed');
                grecaptcha.reset();
            })
            .always(function(data){
                self.passWord(null);                
            });


};

So I would like to know how can I call this function using the new codes given by google, I tried removing data-callback and adding data-bind but dint work so need help.

1 Answers
Related