Панель управления
Платежные системы

Форма оплаты на сайте: создание и настройка

17min

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

Как создать форму оплаты

Для создания формы оплаты на сайте перейдите в Редактор дизайна и добавьте на холст виджет Payment.

Для каждого товара необходимо создать отдельную форму оплаты и настроить ее параметры. Вы можете добавить на сайт любое количество форм оплаты, выбрав для каждой свою платежную систему. Например, для одного товара настроить оплату через СберБанк, а для другого — через Robokassa.

Document image


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

Форма оплаты содержит:

1) Заголовок формы, который отображается на сайте.

Document image


2) Поля ввода, где пользователь будет заполнять свои данные и комментарии к заказу:

  • E-mail
  • Телефон
  • Описание
Document image


В форму нельзя добавить другие поля или удалить существующие.

Вы можете настроить параметры для каждого поля ввода на вкладке Настройки.

  • Для всех полей можно добавить фоновый текст (placeholder).
  • Для поля Телефон можно дополнительно настроить маску, которая позволит проверять корректность введенного пользователем номера.
  • Поля E-mail и Телефон обязательны для заполнения.
  • Поле Описание — по умолчанию необязательное, но вы можете включить для него эту опцию в настройках.
Настройка маски для поля Телефон
Настройка маски для поля Телефон




Настройки поля Описание
Настройки поля Описание




3) Кнопку Оплатить — после нажатия на эту кнопку пользователь будет перенаправлен на сайт платежного сервиса для оплаты, и будет создан новый заказ.

Document image


Чтобы изменить заголовок формы, подписи к полям или название кнопки, кликните на соответствующий элемент на холсте. 

Для корректной работы формы оплаты необходимо настроить ее параметры на вкладке Настройки на правой панели.

Document image


Общие настройки формы оплаты

1) Название формы (Form name). Это название будет отображаться в списке заказов в настройках проекта.

Document image


2) Состояние формы (Form state). Вы можете настроить дизайн формы в статусах «По умолчанию», «Успешно» и «Ошибка».  

Document image




  • Статус «По умолчанию» — как выглядит форма при загрузке страницы — до того, как пользователь ее заполнит. Здесь вы можете изменить дизайн формы — например, отредактировать заголовок, названия полей и их стили.
  • Статус «Успешно» — сообщение, которое выводится после успешной отправки формы — когда редирект на сторону платежной системы прошел без ошибок. Вы можете изменить текст и стили сообщения, например, шрифт или цвет текста.
Document image

  • Статус «Ошибка» — сообщение, которое выводится после отправки формы с ошибкой — например, когда не ответил сервер или настройки платежной системы некорректны. Вы можете изменить текст и стили сообщения, например, шрифт или цвет текста.
Document image


3) Состояние полей (Fields state). Можно настроить отображение полей по умолчанию и при ошибочном вводе данных, например, в случае ввода некорректного номера телефона или незаполненного обязательного поля.

Document image


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

Document image


Настройки платежной системы

Данные настройки позволяют привязать к форме оплаты один из платежных сервисов, подключенных к проекту. Заполнение этих параметров обязательно для корректной работы формы на сайте.

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

Document image


Если в проект добавлены один или несколько платежных сервисов, вы увидите кнопку «Подключить платежную систему».

Document image


После нажатия кнопки вам нужно заполнить Настройки формы оплаты (Payment settings):

Document image

  • Платежная система (Payment). Выберите один из платежных сервисов, подключенных к проекту. Для каждой формы можно выбрать только одну платежную систему.
Document image

  • Название и стоимость товара (Product name, Price). Эти данные передаются в выбранный платежный сервис для оплаты заказа. После заказа товара пользователем эти параметры будут отображаться в данных заказа — их можно просмотреть в настройках проекта в разделе «Заявки» (Leads).
Document image

  • Открыть в новой вкладке (Open in new tab). Настройка позволяет при перенаправлении пользователя на сайт платежной системы открывать его в новой вкладке. По умолчанию сайт откроется в текущем окне.
Document image


Возможные проблемы с формой оплаты

Пользователи не смогут оплатить заказ на вашем сайте в следующих случаях:

1. Не завершена интеграция с платежной системой.

  • К форме не подключена платежная система. Вы добавили на сайт форму оплаты, но не подключили платежную систему в настройках формы. Вы увидите следующее сообщение в настройках формы оплаты:
Document image

  • В настройках проекта не добавлена платежная система. Вы добавили на сайт форму оплаты, но не подключили ни одной платежной системы в настройках проекта. Вы увидите следующее сообщение в настройках формы оплаты:
Document image

  • В настройках проекта удалена платежная система. Вы добавили на сайт форму оплаты и подключили к ней платежную систему, а затем удалили эту платежную систему в настройках проекта. В этом случае вам необходимо либо привязать к форме другую платежную систему (из списка подключенных к проекту), либо добавить новую платежную систему в настройках проекта и затем привязать ее к форме.

2. У проекта закончился хостинг — истек срок действия тарифа хостинга Basic. В этом случае интеграция с платежными системами будет отключена.

Даже если вы ранее добавили платежную систему и корректно настроили форму оплаты, без подключенного тарифа хостинга Basic проведение оплаты будет невозможно.

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

Document image


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

Document image


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

Document image