Using reCaptcha to Validate Web Forms in ERPNext

captcha-webform.js

// Create a reCaptcha v2 on https://www.google.com/recaptcha/admin/
// Copy the site key and paste it below
// Add a HTML field in the Lead DocType with fieldname "captcha_html_wrapper"
// Add the HTML field at the end of the fields child table
// Add the following to web form script

frappe.require("https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&type=api.js")

let el = document.querySelector('[data-fieldname="captcha_html_wrapper"]');
window.captcha_failed = true;

frappe.web_form.validate = () => {
	if (window.captcha_failed) {
		frappe.throw("You need to finish the captcha challenge");
	}
}
	

window.onloadCallback = function() {
	grecaptcha.render(el, {
		'sitekey' : '<site-key>', // Paste Site Key Here
		'callback': () => {
			  window.captcha_failed = false;
		}
	});
}