Как соединить Contact form 7 и Cloudpayments?

Ссылка скопирована
API WordPress
1 ответ

Подвязал к форме плагина Contact form 7 на сайте Wordpress платежку Cloudpayments. Как сделать, чтобы форма Contact form 7 отправлялась после успешной оплаты? Сейчас при заполнении полей формы и нажатии на кнопку отправить - форма отправляется, после этого открывается Cloudpayments. Нужно сделать чтобы при нажатии на кнопку отправки формы, форма не отправлялась, а открывалась платежка, а уже потом, происходила отправка формы, после оплаты.

В скрипте для платежки есть такая байда 

{           onSuccess: function (options) { // success               //действие при успешной оплате           },           onFail: function (reason, options) { // fail               //действие при неуспешной оплате           },           onComplete: function (paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции.               //например вызов вашей аналитики           }       }

{ onSuccess: function (options) { // success //действие при успешной оплате }, onFail: function (reason, options) { // fail //действие при неуспешной оплате }, onComplete: function (paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции. //например вызов вашей аналитики } }

А для вызова платежки при отправке формы использую такое

document.addEventListener( 'wpcf7mailsent', function( event ) {   if ( '946' == event.detail.contactFormId) {     payPopup(); // - вызов платежки   } }, false );

document.addEventListener( 'wpcf7mailsent', function( event ) { if ( '946' == event.detail.contactFormId) { payPopup(); // - вызов платежки } }, false );

Как можно все это дело перешаманить?

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Frontend-редакция Ответ

В вашем случае форму Contact Form 7 нельзя отправлять сразу по клику. Нужно перехватить отправку, открыть CloudPayments, а после успешной оплаты программно отправить форму или отправить данные на сервер отдельным AJAX-запросом. Надёжнее второй вариант, потому что успешную оплату лучше подтверждать не только фронтендом, а серверным уведомлением CloudPayments.

Минимальная фронтенд-схема выглядит так:

  1. пользователь нажимает кнопку отправки CF7;
  2. JavaScript останавливает обычную отправку формы;
  3. открывается виджет CloudPayments;
  4. в onSuccess форма отправляется;
  5. на сервере желательно сверить оплату по уведомлению/webhook.
document.addEventListener('submit', function (event) {
    const form = event.target.closest('.wpcf7 form');
 
    if (!form || form.dataset.paymentDone === '1') {
        return;
    }
 
    event.preventDefault();
    event.stopImmediatePropagation();
 
    const widget = new cp.CloudPayments();
 
    widget.pay('charge', {
        publicId: 'pk_xxxxxxxxxxxxxxxxxxxxx',
        description: 'Оплата заявки',
        amount: 1000,
        currency: 'RUB',
        accountId: form.querySelector('[name="your-email"]')?.value || '',
    }, {
        onSuccess: function () {
            form.dataset.paymentDone = '1';
 
            if (window.wpcf7 && typeof window.wpcf7.submit === 'function') {
                window.wpcf7.submit(form);
            } else {
                form.submit();
            }
        },
        onFail: function () {
            alert('Оплата не прошла. Форма не отправлена.');
        }
    });
}, true);

document.addEventListener('submit', function (event) { const form = event.target.closest('.wpcf7 form'); if (!form || form.dataset.paymentDone === '1') { return; } event.preventDefault(); event.stopImmediatePropagation(); const widget = new cp.CloudPayments(); widget.pay('charge', { publicId: 'pk_xxxxxxxxxxxxxxxxxxxxx', description: 'Оплата заявки', amount: 1000, currency: 'RUB', accountId: form.querySelector('[name="your-email"]')?.value || '', }, { onSuccess: function () { form.dataset.paymentDone = '1'; if (window.wpcf7 && typeof window.wpcf7.submit === 'function') { window.wpcf7.submit(form); } else { form.submit(); } }, onFail: function () { alert('Оплата не прошла. Форма не отправлена.'); } }); }, true);

Но это только клиентская часть. Если заявка важная, не доверяйте одному onSuccess: пользовательский браузер можно закрыть, JS может не выполниться, а статус оплаты можно попытаться подделать. Правильнее сохранять заявку в статусе «ожидает оплаты», принимать webhook от CloudPayments на сервере и только после подтверждения менять статус или отправлять письмо менеджеру.

Если нужно именно письмо CF7 после оплаты, можно добавить скрытое поле payment_id и заполнять его после успешной оплаты. Потом в обработчике wpcf7_before_send_mail проверить этот ID через API CloudPayments. Так вы не будете получать неоплаченные заявки.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ