{"id":1678,"date":"2021-03-18T10:01:44","date_gmt":"2021-03-18T10:01:44","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-google-recaptcha-to-magento-2\/"},"modified":"2025-05-22T10:50:04","modified_gmt":"2025-05-22T05:20:04","slug":"add-google-recaptcha-to-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-google-recaptcha-to-magento-2\/","title":{"rendered":"How to Add Google reCAPTCHA to Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">According to&nbsp;<a href=\"https:\/\/trends.builtwith.com\/shop\/Magento-2\" target=\"_blank\" rel=\"noreferrer noopener\">BuiltWith<\/a>, there are 52,912 live Magento 2 stores. Ideal prey for the hackers!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019 trust.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thankfully, Google offers an easy way to secure the store. With&nbsp;<a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/versions#checkbox\" target=\"_blank\" rel=\"noreferrer noopener\">Google\u2019s reCAPTCHA v2<\/a>, differentiate between bots and humans.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Add Google reCAPTCHA to Magento 2<\/strong><\/em>&nbsp;and enable the \u201cI\u2019m not a robot\u201d 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, to integrate the Google reCAPTCHA v2 with Magento 2, you require to follow the below method.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implement this method to secure your store when a user tries to use the contact form, subscribe form, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Prior to implementing the below method, sign up for the public and secret key pair specifically for the store\u2019s domain.<\/li>\n\n\n\n<li>Make sure the reCAPTCHA authentication works for the subdomains as well. If not, the reCAPTCHA \u201cI\u2019m not a robot\u201d box will display but with an error.<\/li>\n\n\n\n<li>Check the details at&nbsp;<a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/display\" target=\"_blank\" rel=\"noreferrer noopener\">Google reCAPTCHA documentation<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Add Google reCAPTCHA to Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Add script to any head or where you want to use google Recaptcha<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" type=\"text\/javascript\" xml=\"space\">&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Add captcha code to phtml or block\/page where you want to add v2 google Recaptcha in the form<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"form-group required\">   \/\/change class as per themes\n        &lt;div class=\"g-recaptcha required\" id=\"recaptcha\"\n             data-sitekey=\"your-site-key\">\n        &lt;\/div>\n             &lt;div style=\"display:none\" id=\"error-msg\">\n                  &lt;span>&lt;?php echo __('This is a required field.') ?>&lt;\/span>\n             &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. If the captcha does not validate then add the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\n    function checkCaptcha() {\n        if ((jQuery('#g-recaptcha-response').val()) === '') {\n            jQuery('#error-msg').css('display', 'block');\n            jQuery('#error-msg').css('color', '#df280a');\n            jQuery('#error-msg').css('font-size', 13);\n            return false;\n        }\n        else {\n            jQuery('#error-msg').css('display', 'none');\n        }\n    }\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In any form add&nbsp;<em><strong>onSubmit()<\/strong><\/em>&nbsp;event like:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;form class=\"form contact\" action=\"&lt;?php echo $block->getFormAction(); ?>\" id=\"contact-form\" method=\"post\" data-hasrequired=\"&lt;?php echo __('* Required Fields') ?>\" data-mage-init='{\"validation\":{}}' onSubmit=\"return checkCaptcha() ;\">\n&lt;\/form><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That was all about Google reCAPTCHA v2 with Magento 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a similar solution in Magento 1, check&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/add-google-recaptcha-to-magento\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google reCAPTCHA to Magento<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In case if you\u2019re facing any issue on the frontend, read the solution to reCAPTCHA Not Working in Chrome, Firefox, or Any Browser<a href=\"https:\/\/meetanshi.com\/blog\/recaptcha-not-working\/\" target=\"_blank\" rel=\"noreferrer noopener\">reCAPTCHA Not Working in Chrome, Firefox, or Any Browser<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep Secure  \ufe0f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>According to&nbsp;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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1678","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1678"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1678\/revisions"}],"predecessor-version":[{"id":14434,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1678\/revisions\/14434"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}