Invisible recaptcha: recaptcha widget doesnt execute.

[mike-van]

Im following every step in the documentation for the invisible recaptcha. But i cant get the recaptcha widget to execute programmatically. because i think the recaptchaInstance is still undefined. And the recaptcha badge also doesnt show up. I'm just copy and paste the code from the documentation but still somehow cant get it to work. Really appreciate everyone for help. Here's my code:

import React         from 'react'
import Link          from 'gatsby-link'

import Recaptcha from 'react-recaptcha'
let recaptchaInstance

class FeatureSection extends React.Component {
  
  executeCaptcha = () => {
    recaptchaInstance.execute();
  }
  verifyCallback = (response) => {
    if(response){
      console.log(response);
      // document.getElementById("mc-embedded-subscribe-form").submit();
    }
  }

  render(){
    return (
      <section id="features" className="services">
        <div className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 text-center zoomIn">
          <h1> Subscribe </h1>
          <p>Subscribe to our newsletter for updates on beta testing and our release date</p>
          <div id="mc_embed_signup" className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1">
            <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" noValidate="">
              <div id="mc_embed_signup_scroll">
                <div className="input-group mb-2 mr-sm-2">
                  <input type="email" name="EMAIL" className="email input-design" id="mce-EMAIL" placeholder="Email" required=""/>
                  <div className="input-group-prepend">
                    <button
                      type="button"
                      className="button btn btn-primary outline-border"
                      onClick={() => this.executeCaptcha()}
                      name="subscribe" id="mc-embedded-subscribe"
                    >  
                      Subscribe
                    </button>
                    <Recaptcha
                      ref={e => recaptchaInstance = e}
                      sitekey="#"
                      size="invisible"
                      verifyCallback={() => this.verifyCallback()}
                    />
                  </div>
                  <div style={{position: 'absolute', left: '-5000px'}}>
                    <input type="text" name="#" tabIndex="-1" value=""/>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>
    )
  }
} 

export default FeatureSection

[danivivriti]

Same situation here. It seems recaptchaInstance.execute(); does nothing!

[tomateit]

It seems recaptchaInstance.execute(); does nothing!

When I console.log the instance, it doesn't event seem to have such property while being an object.

[jojonarte]

It doesn't do anything :(

[mckelveygreg]

Have you tried changing your button to type='submit' and your <form action='this.executeCaptcha'... >
Plus a submit button gives you accessibility built in.

[Adzouz]

If the recaptcha badge is not showing it's possible that just forgot the script tag in the header (<script src="https://www.google.com/recaptcha/api.js" async defer></script>) but even with that I still have the issue.
The badge shows up but the execute function still doesn't work...

[LuisPerez94]

I had the same problem and I could fix it by adding the Google Recaptcha API script inside my index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

[yes-mam]

I found this issue to be temperamental. It wouldn't happen every time. Sometimes on the initial load it would.