appleboy / react-recaptcha

A react.js reCAPTCHA for Google
https://www.google.com/recaptcha/intro/index.html
BSD 3-Clause "New" or "Revised" License
635 stars 97 forks source link

Invisible recaptcha: recaptcha widget doesnt execute. #252

Open mike-van opened 6 years ago

mike-van commented 6 years ago

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 commented 5 years ago

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

tomateit commented 5 years ago

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 commented 5 years ago

It doesn't do anything :(

mckelveygreg commented 5 years ago

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 commented 4 years ago

If the recaptcha badge is not showing it's possible that just forgot the script tag in the header () but even with that I still have the issue. The badge shows up but the execute function still doesn't work...

LuisPerez94 commented 4 years ago

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 commented 4 years ago

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