We have NL sign up module (multiple places) on our react page. We are trying to integrate multiple invisible google captcha. We are having few issues and seek help on this. We are using react-google-recaptcha npm package. Here are two issues we have
Issue 1
Even though we mark our captcha as invisible, we are still seeing challenge.
Issue 2
How do we implement multiple recaptcha for same page. Our NL component will be called multiple times by parent
Here is our NL Component
renderComponent = () => {
let newsletter;
newsletter = (
<div className={`${this.props.classNames || "newsletter-comp"} row`}>
{this.renderNewsletterCopy()}
{this.props.isDisplayModalChecked && this.renderDisplayModalContent()}
<div className="formGroup">
<div className="newLetterContainer">
<div className="inputBox">
<TextBox
onEnter={this.handleSubmit}
className={`${this.props.classNames} newOne`}
placeholder={this.props.textBoxPlaceholder}
name="newsletterEmail"
ref={"newsletterEmail"}
rules={[{ type: "email" }]}
errorMessage={
this.state.displayError
? this.state.errorMsg || errorMsg
: null
}
successMessage={
this.state.successMsg ? this.state.successMsg : ""
}
/>
</div>
<div className="buttonBox">
<div className="button-wrapper">
<Button
text={
this.state.loading
? this.props.buttonLoadingText
: this.props.buttonText || "Subscribe"
}
handleClick={this.handleSubmit}
classes={`${this.props.classNames} newOne`}
/>
{
process.env.GOOGLE_RECAPTCHA_ENABLE &&
<ReCAPTCHA
style={{display: 'inline-block', visibility: 'hidden'}}
ref={this.recaptchaRef}
size="invisible"
sitekey={process.env.GOOGLE_RECAPTCHA_SITEKEY}
badge="inline"
/>
}
</div>
</div>
</div>
</div>On HandleSubmit
handleSubmit = async () => {
if (this.isValid() && this.refs.newsletterEmail.getValue()) {
this.setState({ loading: true, displayError: false, errorMsg: "", successMsg: "" });
let params = {};
if (process.env.GOOGLE_RECAPTCHA_ENABLE){
const captchaToken = await this.recaptchaRef.current.executeAsync();
let tokenData = { gToken:captchaToken };
//Backend verification
let captchaVerification = await APIService.post("gverify",{data : tokenData, siteId: this.props.siteId}, null,this.handleCaptchaError,"Post",false)
console.log('captchaVerification ', captchaVerification)
//TODO If captchaVerification is successful, continue with backend sign up process here
this.recaptchaRef.current.reset()
}
}
};