TOOLS

On the frontend include this script

                                
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                
                            

On the frontend form include this

                                
<div class="g-recaptcha" data-sitekey="SITE_KEY_GOES_HERE"></div>
                                
                            

On the frontend using axios you can grab the value of the captcha while using Axios like this

                                
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.3/axios.min.js" integrity="sha512-zJXKBryKlsiDaWcWQ9fuvy50SG03/Qc5SqfLXxHmk9XiUUbcD9lXYjHDBxLFOuZSU6ULXaJ69bd7blSMEgxXNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const data = {
      captcha: grecaptcha.getResponse()
    }
    // check captcha
    if (!data.captcha) {
      alert('Please fill up captcha.');
      return;
    } 
    axios.post('/API_URL_GOES_HERE', data)
      .then(response => {
         alert('Success');
      })
      .catch((err) => {
        alert('Error');
      });
  })
</script>
                                
                            

On the PHP backend verify the captcha here

                                
<?php
$_POST = json_decode(file_get_contents("php://input"),true);
$recaptcha_response = $_POST['captcha'];
$secret_key = 'SECRET_KEY_GOES_HERE'; 
$captcha_url = 'https://www.google.com/recaptcha/api/siteverify?secret='. $secret_key . '&response=' . $recaptcha_response;
$captcha_response = file_get_contents($captcha_url); 
$captcha_response_json = json_decode($captcha_response);
if ($captcha_response_json->success == false) {
  return;
}