By the way, it is not very difficult to add Google ReCaptcha in Magento 2 E-Commerce store, you can add it with a few lines of script.
In this post, I am going to explain how many types of reCAPTCHA are available and how we can add reCAPTCHA to Magento 2 stores.
Enable Google reCAPTCHA in Magento 2
This ReCaptcha will help to improve your website user experience and that will also help your Magento 2 website to make it secure.
Today there are more than fifty thousand websites of Magento and hackers keep looking for similar stores in which the security system is weak, so then we should try to make our website secure in every way.
Many times hackers also try to break security with robots or automatic spam software and when the website looks unsafe, then customers also avoid shopping from their website.
That is why it is necessary for such a situation that the trust of the customer of your e-commerce store should be won in every way.
Google service offers to make your website much secure in every possible way and one of the easy ways to secure the Magento 2 shopping store with reCAPTCHA v2, which differentiate between bots and humans.
This functionality of Google reCAPTCHA will add the options in your website to check whether the user is a human being or a robot.
A user has to verify themself by ticking the checkbox and once the checkbox will be ticked the system will be identified as a human being.
There are multiple versions of the Google ReCaptcha so it's on your choice how you want to give the options for your customer to identify themself.
Now you can use the below code to implement the Google reCAPTCHA v2 with Magento 2.
How to Generate Google reCAPTCHA keys
When we add Google reCAPTCHA to any website then google asks for the API keys to enable your captcha functionality.
You don't have to pay any amount to get these keys for your Magento 2 stores.
You have to login into the account in order to get the Get the Google reCAPTCHA keys.
You can choose the reCAPTCHA type that you want to use.
- reCAPTCHA v3 Invisible
- reCAPTCHA v2 Invisible
- reCAPTCHA v2 (“I am not a robot”)
Now. you can add the below script to any phtml form page of your Magento 2 to use google Recaptcha
Step 1: Add in Head
<script src="https://www.google.com/recaptcha/api.js" type="text/javascript" xml="space"></script>
Step 2: Add in Any Phtml File
Now you can add this script to any phtml or block/page to make it visible 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>
Step 3: If The reCAPTCHA Not Validate Then Add
<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>
Step 4: 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>
Now your Magento 2 form with Google reCAPTCHA v2 will look something like the below images.
Now your reCAPTCHA has been added to your form.
Magento 2 Google reCAPTCHA Extension
You can also buy our Magento 2 ReCaptcha extension, the price is only 30$, in this, you will get the facility to add google re-captcha on any block page or cms page, or checkout page.
We also provide a lifetime free support facility for this extension, there will be no need to pay any separate charge for this.
Similar Post:
Your Session Has Expired Error in Magento 2 While Add to Cart Product.