Invisible reCAPTCHA integration with angular component

Question

I want to integrate invisible recaptcha in angular 2 component.

Here is my code in login.component.html

 <button type="submit" class="g-recaptcha" data-sitekey="<Site-Key>" data-callback='onsubmit'> Log On </button>

And the login.component.ts has onsubmit method as below:

     onsubmit() {
  console.log("In onsubmit method");
}

I am getting the following error when i call onsubmit method from my login.component.ts

ReCAPTCHA couldn't find user-provided function:onsubmit

and how to get the 'g-recaptcha-response' in my login.component.ts.

Answer 1

reCaptcha Callback can not find your onsubmit function because its a Method in your component.

you can attach your global function to the window object like this :

window['onsubmit'] = () => {
    ...
}

you can do this in the constructor of your Component