How to Add Google reCAPTCHA to Magento 2

According to BuiltWith, there are 52,912 live Magento 2 stores. Ideal prey for the hackers!

A compromised store with a host to spam would lead to customers being skeptical to buy. Hesitated customers mean a breakdown in E-commerce potential. Insecure Magento 2 platform will cost the business a loss in revenue as well as customers’ trust.

Thankfully, Google offers an easy way to secure the store. With Google’s reCAPTCHA v2, differentiate between bots and humans.

Add Google reCAPTCHA to Magento 2 and enable the “I’m not a robot” checkbox. A user has to tick the checkbox indicating they are not robots but humans. Either they can go through without any challenge or have to validate their identity as a human.

However, to integrate the Google reCAPTCHA v2 with Magento 2, you require to follow the below method.

Implement this method to secure your store when a user tries to use the contact form, subscribe form, etc.

Note:

• Prior to implementing the below method, sign up for the public and secret key pair specifically for the store’s domain.
• Make sure the reCAPTCHA authentication works for the subdomains as well. If not, the reCAPTCHA “I’m not a robot” box will display but with an error.
• Check the details at Google reCAPTCHA documentation.

Method to Add Google reCAPTCHA to Magento 2:

1. Add script to any head or where you want to use google Recaptcha
   
   <script src="https://www.google.com/recaptcha/api.js" type="text/javascript" xml="space"></script>

   1	<script src="https://www.google.com/recaptcha/api.js" type="text/javascript" xml="space"></script>

2. Add captcha code to phtml or block/page where you want to add v2 google Recaptcha in the form
   
   <div class="form-group required"> //change class as per themes <div class="g-recaptcha required" id="recaptcha" data-sitekey="your-site-key"> </div> <div style="display:none" id="error-msg"> <span><?php echo __('This is a required field.') ?></span> </div> </div>

   1 2 3 4 5 6 7 8

   <div class="form-group required">   //change class as per themes         <div class="g-recaptcha required" id="recaptcha"              data-sitekey="your-site-key">         </div>              <div style="display:none" id="error-msg">                   <span><?php echo __('This is a required field.') ?></span>              </div> </div>

3. If the captcha does not validate then add the below code:
   
   <script> function checkCaptcha() { if ((jQuery('#g-recaptcha-response').val()) === '') { jQuery('#error-msg').css('display', 'block'); jQuery('#error-msg').css('color', '#df280a'); jQuery('#error-msg').css('font-size', 13); return false; } else { jQuery('#error-msg').css('display', 'none'); } } </script>

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <script>     function checkCaptcha() {         if ((jQuery('#g-recaptcha-response').val()) === '') {             jQuery('#error-msg').css('display', 'block');             jQuery('#error-msg').css('color', '#df280a');             jQuery('#error-msg').css('font-size', 13);             return false;         }         else {             jQuery('#error-msg').css('display', 'none');         }     } </script>

   In any form add onSubmit() event like:
   
   <form class="form contact" action="<?php echo $block->getFormAction(); ?>" id="contact-form" method="post" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}' onSubmit="return checkCaptcha() ;"> </form>

   1 2	<form class="form contact" action="<?php echo $block->getFormAction(); ?>" id="contact-form" method="post" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}' onSubmit="return checkCaptcha() ;"> </form>

That was all about Google reCAPTCHA v2 with Magento 2.

For a similar solution in Magento 1, check here.

I’d be happy to hear your opinions in the Comments section below about the use of the reCAPTCHA and how your customers welcomed it.

Keep Secure 🛡️