To use the Google Recaptcha, firstly open the V3 admin console. the easy way is to automatically render the reCAPTCHA widget.
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<input type="submit" value="Submit">
</form>
</body>
</html>
Now, get the the api keys from setting page. Although, the code will work fine but our goal is to put the webpage on more control. Here, button needs to be disabled to protect for that situation when user clicks the submit button without clicking I am not robot checkbox. See the example.
<input type="submit" value="Submit" disabled>
add the data-callback attribute above with class g-captcha like:
<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="my_callback_function">
The callback function will run after successful try; just after the user clicks the checkbox.
my_callback_function(){
document.getElementById('submit').removeAttribute('disabled');
}
Now, button will be enabled.
In addition, you can create the other additional callback functions for the situation when the re-captcha token expires after two minutes by adding the attributedata-expired-callback and adding the callback function. See the parameters.
<div class="g-recaptcha" data-sitekey="your_site_key" data-callback="my_callback_function" data-expired-callback="my_expired_callback_function">
Add your logic by yourself. Now, it's time to configure the code on the backend. Google documentation provides the well information about the recaptcha json api responses to work on the backend. There is no doubt.