How to connect recapcha v3 to ajax form?

Question

JavaScript

I have a form

<form class="form__contact  form-message">
            <input type="hidden" name="title" value="Форма заказа - страница контактов">

                <div class="form__group">
                    <label class="sr-only" for="name">Name</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="name" placeholder="Name" id="name" required  pattern="(^[А-Яа-яЁё\s]+$)|(^[a-zA-Z\s]+$)">
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="phone-email">Phone or email</label>
                    <div class="form__group-fields">
                        <input class="field field--text" type="text" name="phone-email" placeholder="Phone or email" id="phone-email" required  >
                    </div>
                </div>
                <div class="form__group">
                    <label class="sr-only" for="message">Message</label>
                    <div class="form__group-fields">
                        <textarea class="field field--textarea" name="message" id="message" cols="30" rows="6" placeholder="Message"></textarea>
                    </div>
                </div>
                <p class="form__privacy-policy">
                    By clicking the button, I agree to the <a href="<?php the_permalink(3);?>">privacy policy</a>
                </p>
                <button class="btn btn--order btn--contact form__submit" type="submit">Submit</button>
            </form>

Ajax request

$('.form-message').on('submit', function (e) {

  e.preventDefault();
  var this_form = $(this);
  var form = $(this).serializeArray();

  $.post(
    myajax.url, {
      form: form,
      action: 'order'
    },
    function (data) {
      for (var i = 0; i < $('form').length; i++) {
        $('form')[i].reset();
      }

      $('#modal-tnx').toggleClass('is-active', true);

      setTimeout(() => {
        this_form.closest('.modal').toggleClass('is-active', false);
      }, 1000);

      setTimeout(() => {
        $('#modal-tnx').toggleClass('is-active', false);
      }, 3000);
    }
  )
});

And php handler

// Отправка формы 
add_action('wp_ajax_order', 'order'); 
add_action('wp_ajax_nopriv_order', 'order'); 
function order() { 

  global $email_from; 
  global $email_to; 
  $mail = new PHPMailer; 
  $mail->setFrom($email_from, 'Заявка с сайта - формы обратной связи');
  $mail->addAddress($email_to, 'option'); 

  $mail->IsHTML(true); 
  $mail->CharSet = 'UTF-8'; 

  $form = $_POST['form']; 

  $mail->Subject = 'Письмо с сайта'; 
  $echo = "Ваше сообщение отправлено"; 

  $mail->Body = ''; 

  foreach($form as $data){ 
    switch($data['name']){ 

      case 'title': 
      $mail->Body .= 'Тема письма: '.$data['value'].'<br>'; 
      break;
  
      case 'name': 
      $mail->Body .= 'Имя: '.$data['value'].'<br>'; 
      break;

      case 'phone-email': 
      $mail->Body .= 'Номер телефона или email: '.$data['value'].'<br>'; 
      break; 

      case 'message': 
      $mail->Body .= 'Комментарий: '.$data['value'].'<br>'; 
      break; 

    }
  } 


  $mail->Send(); 

  echo $echo; 

  wp_die(); 
};

Answer 1

in 1 create keys connect here

<script src="https://www.google.com/recaptcha/api.js?render='Ваш Site Key'"></script>

add to form

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

add in js

$(document).ready(function () {
    grecaptcha.ready(function () {
        grecaptcha.execute('Ваш SITE_KEY', {action: 'contact'}).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse');
            recaptchaResponse.value = token;
        });
    });
});

in php handler

$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
            $recaptcha_secret = 'Ваш Secret Key';
            $recaptcha_response = $_POST['recaptcha_response'];
            $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
            $recaptcha = json_decode($recaptcha);
            if ($recaptcha->score >= 0.6) {
проверка пройдена
}

else at your discretion
PS in php handler you will not have $_POST['recaptcha_response'], but something in your $data

Answer 2

In most cases, recaptcha is simply unnecessary and redundant to protect against spam.
To begin with, I simply recommend using a special hidden field where the token generated on the server side is hammered, but you need to hammer the token in the field only if the user is active. For example, you can check for clicks on input fields or mouse movements, scrolling, or something else.
But if you want to get confused with installing exactly recaptcha, here are instructions with examples:
https://yandex.ru/search/?text=php%20recaptcha%20v...