Виджет Форма оплаты в конструкторе сайтов

В конструкторе лендингов SendPulse вы можете добавить кнопку оплаты на ваш сайт, чтобы посетители сайта смогли оплатить товар в один клик.

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

Разместите виджет Форма оплаты (Payment) сразу после описания вашего товара в нужную часть шаблона.

На сайте курса виджет называется Тарифы (Pricing plans).

Выберите тип продукта

В правой панели выберите тип продукта:

Добавьте способ оплаты

Выберите, через какую платежную систему принимать оплату.

Подробнее о подключении различных способов оплаты читайте в разделе Прием оплат.

Стандартный метод

Чтобы пользователь мог выбрать несколько платежных систем, нажмите Добавить платежную систему ​​(Add a payment method), затем нажмите на иконку карандаша, чтобы настроить цену и валюту.

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

Если вы выбираете способ оплаты LiqPay, monobank или Fondy, можно настроить передачу данных для РРО.

Читайте подробнее: Как настроить передачу данных РРО в LiqРay, Как настроить передачу данных РРО в monopay.

Другой метод

Вы можете выбрать опцию Другой способ оплаты (Another payment method), если предпочитаете альтернативные методы оплаты.

Нажмите Добавить платежную систему (Add a payment method) и выберите Другой способ оплаты (Another payment method) из выпадающего меню. Укажите название платежной системы и настройте цену.

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

Добавьте сумму оплаты

Выберите тип оплаты — Указанная цена (Indicated price) или Минимальная цена (Minimal) и введите сумму оплаты.

Чтобы выбрать или изменить валюту оплаты, перейдите в Настройки аккаунта > Платежные системы и напротив нужной платежной системы перейдите в настройки мерчанта — там вы сможете выбрать валюту.

Для оплаты с указанной ценой платеж будет считаться успешным, если пользователь оплатил эту сумму. А для оплаты с минимальной ценой — если оплачена сумма равная или выше минимальной.

К примеру, вы можете использовать тип оплаты Минимальная цена для сбора донатов и пожертвований.

Настройте интеграции с другими сервисами

Вы также можете ввести название сделки, выбрать воронку, в которую будут попадать автоматически созданные сделки, а также статус сделки, в зависимости от статуса платежа.

По умолчанию сделка добавляется на первый этап вашей воронки. Также в карточку контакта добавляется комментарий с информацией об источнике, местоположении, устройстве и браузере посетителя.

Вы можете настроить передачу UTM-меток в контакты CRM, если посетитель перешел на сайт по ссылке с меткой и совершил оплату на сайте.

Кроме того, вы можете создавать авторассылки по факту статуса оплаты. Для этого в CRM подключите создание сделок после оплаты, а в А360 выберите триггер запуска Создание сделки и источник сделки Оплаты.

Вы также можете добавить контакты, которые заполнили форму оплаты, в адресную книгу, чтобы отправлять им уведомления об оплате и другие сообщения с помощью Automation360. Для этого активируйте «Добавить в адресную книгу» (Add to a mailing list) и выберите книгу.

В адресную книгу попадают контакты тех пользователей, которые успешно совершили оплату. Данные тех, кто только оставил свои данные, но не выполнил платеж, сохраняться не будут.

Настройте форму оплаты

Настройте поля формы

Добавьте новые поля формы или настройте уже существующие, нажав на иконку карандаша.

Обратите внимание, что поле Email обязательное — его нельзя удалить.

Введите название поля и подсказку для поля в плейсхолдере и выберите тип поля.

Отметьте, является ли поле обязательным. Если поле обязательное, данные пользователя не отправятся, пока он не заполнит все обязательные поля.

В поле ввода типа Телефон вы можете добавить динамическую маску для номеров. Тогда форма будет определять по IP-адресу страну, где находится посетитель, и будет подставлять ему соответствующий код. Также посетитель сможет выбрать другой код из выпадающего списка.

Перейдите в настройках поля и активируйте переключатель Использовать динамическую маску (Use dynamic mask).

Сохраните значения полей в переменные

В выбранные переменные передаются данные пользователя, который оплатил товар.

Выберите, в какую переменную в сервисе email рассылок сохранить значение поля.

Выберите, в какие поля контакта (Contact field) и сделки (Deal field) в CRM сохранить значение поля.

Настройте внешний вид формы

В секции Показ (View) выберите, как отображать товар:

Чтобы перейти в редактирование формы заказа, нажмите Стили полей (Fields styles). Вы можете скрыть названия полей и настроить внешний вид полей: наличие границ и их цвет, цвет текста и фона, скругление и размер.

Слева вы можете просмотреть, как будет выглядеть форма оплаты для пользователя, который нажмет Оплатить. Проверьте данные, которые настроили в панели редактирования блока: название товара и его цену и поля для введения данных покупателя.

Настройте кнопку оплаты

Нажмите на карандаш и перейдите в меню редактирования кнопки оплаты. 

Введите текст и описание, которые будут отображаться на кнопке. Выберите стиль кнопки — основной, вторичный или настраиваемый и укажите размер кнопки.

Добавьте страницу после оплаты

Вы также можете направить пользователя на конкретную страницу после подтверждения оплаты. Для этого прокрутите вниз и выберите секцию Дополнительные настройки формы (Additional form settings). Введите ссылку на страницу, которая должна появиться после подтверждения оплаты. Вы также можете выбрать страницу сайта из раскрывающегося меню или добавить ссылку на чат-бот.

Читайте также: Как настроить страницу оплаты на сайте и продолжить воронку продаж.

Добавьте промокод

Вы можете предоставить пользователям возможность применять промокоды из CRM при оплате — это удобно для акций, скидок или бонусных предложений.

Перейдите в секцию Дополнительные настройки формы (Additional form settings) и активируйте Добавить поле для ввода промокода (Add a promo code field), затем выберите, какие промокоды разрешено использовать.

В поле Заголовок (Title) задайте название, которое будет отображаться над полем, например, «Используйте промокод». В поле Подсказка (Placeholder) введите текст подсказки внутри поля. В поле Промокод выберите один или несколько промокодов из выпадающего списка.

После публикации сайта в форме оплаты появится поле для ввода промокода. Пользователь сможет ввести код, и система автоматически проверит его — если промокод действителен, сумма заказа уменьшится на указанную величину скидки.

Настройте аналитику

Вы можете настроить передачу целей из формы в события Google Analytics и Facebook Pixel. Нажмите кнопку Настройки аналитики (Analytics settings).

Активируйте нужный переключатель: Передавать цель в Google Analytics (Transfer the goal to Google Analytics) или Передавать цель в пиксель Facebook (Transfer the goal to the Facebook pixel).

Если вы активировали переключатель Передавать цель в Google Analytics, введите данные для полей Категория (Category), Действие (Action), Ярлык (Label) — эти параметры будут передаваться к аналитике в разделе События.

Если вы активировали переключатель Передавать цель в пиксель Facebook, автоматически будет сформировано событие Purchase со значениями value и currency. Его вы сможете просматривать в Events Manager вашего бизнес-аккаунта Facebook.

Также можно передавать данные в аудиторию чат-бота, если вы добавляли для страницы подтверждения ссылку на цепочку.

Скопируйте ID

Для каждого элемента предусмотрен идентификатор (ID), который определяет элемент на странице. C его помощью вы можете применять стили и скрипты, настроить показ попапов и отслеживать события по этому элементу.

Чтобы скопировать ID, нажмите на него. Чтобы отредактировать ID, нажмите на значок карандаша.

Читайте подробнее: ID блока и виджета.

Завершите настройку виджета

Перед закрытием конструктора сайта проверьте правильность настроек виджета.

Если вы не заполнили какое-то поле, в настройках виджета оно подсветится красным, а в конструкторе появится предупреждающий знак. Форма с незаполненными полями не будет работать.

Обновлено: 24.10.2025