Как создать форму оплаты с подтверждением и автоматическим сохранением данных

Диагностика задачи: зачем нужна форма оплаты с подтверждением и автосохранением

В типичных проектах на WordPress часто требуется реализовать форму оплаты, которая не только принимает платежные данные, но и подтверждает их корректность перед отправкой, а также автоматически сохраняет введённые данные, чтобы избежать потери информации при случайном закрытии страницы или обрыве соединения. WPForms не имеет встроенного полноценного платежного функционала с таким набором, но с помощью кастомного кода и сторонних сервисов можно организовать надёжное решение.

Шаг 1. Создание базовой формы оплаты в WPForms

Используем WPForms Pro с установленным платежным дополнением (Stripe или PayPal). Создайте форму с обязательными полями:

• Имя плательщика
• Email
• Сумма оплаты (фиксированная или вводимая)
• Платёжные данные (Stripe/PayPal)

В настройках платежей укажите ключи API и параметры обработки.

Пример создания формы через WPForms UI

В панели WPForms выберите «Добавить новую», затем «Платёжная форма», настройте поля, поставьте галочку «Включить Stripe» или «PayPal» и сохраните.

Шаг 2. Добавление подтверждения перед оплатой

Для реализации подтверждения перед отправкой формы добавим кастомный JavaScript, который перехватывает кнопку «Отправить», и выводит всплывающее окно с итогами заказа.

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.wpforms-form');
  if (!form) return;

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    const name = form.querySelector('[name="wpforms[fields][1]"]').value;
    const email = form.querySelector('[name="wpforms[fields][2]"]').value;
    const amount = form.querySelector('[name="wpforms[fields][3]"]').value;

    const confirmMsg = `Подтвердите оплату:\nИмя: ${name}\nEmail: ${email}\nСумма: ${amount} руб.`;
    if (confirm(confirmMsg)) {
      form.submit();
    }
  });
});

Обратите внимание, что wpforms[fields][1] и т.п. — это имена полей, их нужно проверить в вашей форме (можно увидеть в инспекторе браузера).

Шаг 3. Автоматическое сохранение введённых данных (автосохранение черновика)

WPForms не имеет штатного автосохранения, но можно реализовать его на JavaScript с сохранением в localStorage. При загрузке страницы данные загружаются обратно в поля.

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.wpforms-form');
  if (!form) return;

  const fields = ['wpforms[fields][1]', 'wpforms[fields][2]', 'wpforms[fields][3]'];

  // Загрузка данных из localStorage
  fields.forEach(name => {
    const input = form.querySelector(`[name="${name}"]`);
    if (input && localStorage.getItem(name)) {
      input.value = localStorage.getItem(name);
    }
  });

  // Сохраняем данные при изменении
  fields.forEach(name => {
    const input = form.querySelector(`[name="${name}"]`);
    if (input) {
      input.addEventListener('input', function() {
        localStorage.setItem(name, this.value);
      });
    }
  });

  // Очистка localStorage после успешной отправки
  form.addEventListener('submit', function() {
    fields.forEach(name => localStorage.removeItem(name));
  });
});

Проверка результата после внедрения

• Заполните форму частично, затем обновите страницу — введённые данные должны сохраниться.
• При нажатии кнопки «Отправить» появится окно с подтверждением, отображающее введённые данные.
• Если подтвердить оплату, форма отправится, и данные очистятся.
• Проверьте успешность платежа в панели платежного провайдера (Stripe/PayPal).

Частые ошибки и их исправление

• Неверные имена полей в JavaScript: Проверьте актуальные имена в HTML формы, иначе скрипт не найдёт поля.
• Конфликт с кэшированием страниц: Автосохранение может работать некорректно при агрессивном кэшировании. Настройте исключения для страницы с формой.
• Подтверждение не срабатывает: Убедитесь, что скрипт подключён корректно и нет конфликтов с другими JS.
• Данные не очищаются после отправки: Проверьте, вызывается ли localStorage.removeItem в событии submit.

Практические советы по безопасности и производительности

• Используйте HTTPS для защиты передачи платежных данных.
• Не сохраняйте в localStorage чувствительные данные (например, CVV, полные номера карт).
• Ограничьте размер и типы вводимых данных, чтобы избежать XSS и инъекций.
• Минимизируйте кастомные скрипты, чтобы не замедлять загрузку страницы.
• Настройте ограничения на количество попыток отправки формы, чтобы избежать спама и мошенничества.

Сравнение вариантов реализации подтверждения и автосохранения