reCaptchaCommon API

Небольшое API, которое должно помочь разработчикам в подключении модуля reCaptcha для кастомных форм.

Метод render

/**
 * @param {DOMelement} selector пустой элемент для рендера
 * @param {String} formType тип формы:
 * feedback - форма обратной связи,
 * comment - комментарии к статьям, отзывы к товарам
 */

Метод вызывает загрузку скрипта Google reCaptcha, если он ещё не был загружен. Далее запускается рендер капчи внутри элемента, который был передан в качестве аргумента (selector).

В качестве второго аргумента в виде строки нужно передать тип формы.

Метод может быть использован для рендера капчи в кастомных формах. Перед отправкой формы вам необходимо будет получить value из элемента name="feedback[g-recaptcha-response] и отправить его вместе с остальными полями формы в свойстве g-recaptcha-response.

Info

Если ничего не передать в метод, то произойдёт попытка загрузить скрипт капчи, при этом рендер не отработает.

Warning

Элемент передаваемый в качестве аргумента (selector) обязательно должен быть пустым.

Пример вызова:

$(function() {
  reCaptchaCommon.render(document.querySelector('.js-captcha-block'), 'feedback');
})

Пример запроса для отправки формы обратной связи:

$('#myCustomForm').on('submit', () => {
  // Собираем все поля в один объект
  let feedback = {
    lang: "{{ language.locale }}",
    "feedback[name]": 'Test',
    "feedback[from]": 'test@insales.ru',
    "feedback[phone]": '00000000000',
    "feedback[subject]": 'Обратная связь',
    "feedback[content]": 'Без сообщения',
  }

  // Получаем элемент, в котором хранится ключ
  let recaptchaElement = $('#myCustomForm [name="feedback[g-recaptcha-response]"]');

  // Если посетитель поставил галочку "Я не робот", то достаём ключ и добавляем поле для отправки формы
  if (recaptchaElement) {
    feedback['g-recaptcha-response'] = recaptchaElement.val();
  }

  $.post('/client_account/feedback.json', feedback).
    done(function (done) {
      console.log(done);
    });
})