Москва: 8 (495) 984-87-51
Санкт-Петербург: 8 (812) 385-75-57
8 (800) 775-37-51Контакт центр

Платёжный Widget

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

Генерация кода Widget

Сначала необходимо подготовить JavaScript-код для вставки на сайт с помощью личного кабинета. Для этого зайдите в свой личный кабинет PayKeeper, перейдите в раздел «Интеграции» и выберите вкладку «Виджет и кнопка оплаты».

Подготовка Widget’а включает в себя несколько этапов.

1 Заполнение полей формы оплаты

На этом этапе задаются основные параметры всплывающего окна: «Заголовок», «Описание», «Ширина», «Редактируемые поля для формы оплаты». Любое поле может быть обязательным для заполнения, необязательным или предзаполненным (фиксированным), есть возможность добавить неограниченное количество собственных полей.

Отображение формы оплаты

Отображение формы оплаты

На этом этапе также можно установить порядок полей формы оплаты. Для перемещения того или иного параметра нужно воспользоваться стрелками, расположенными слева от поля.

Отображение формы оплаты

Отображение формы оплаты

2 Выбор дополнительных параметров

На этом этапе можно выбрать или отключить несколько дополнительных параметров, связанных с поведением пользователя при взаимодействии с Widget:
Выбор параметра «Мгновенный переход» приведёт к тому, что при нажатии на платёжную ссылку Widget не будет показываться плательщику, вместо этого сразу будет выполняться переадресация на платёжную страницу банка.
Использование опции «Открывать платёжную страницу банка в iFrame» приведёт к отображению формы для ввода карты внутри Widget, без перехода на отдельную платёжную страницу банка. 

Настройка поля оплаты

Настройка поля оплаты

3 Формирование кода Widget

После заполнения всех полей в специальном окне появится готовый JavaScript-код. Он обновляется автоматически при изменении содержания полей формы.
В этом разделе также можно посмотреть необфусцированный (расшифрованный) код. Для этого нажмите кнопку «Показать необфусцированный код».

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

4 Сохранение настроек Widget

Настройки Widget могут быть сохранены и затем использованы для генерации JavaScript-кода.
Настройки можно сохранить в новый Widget или обновить данные в одном из уже используемых шаблонов.

Настройка поля оплаты

Настройка поля оплаты

Подготовка ссылки на оплату

После установки Widget’а на сайт нужно подготовить и разместить активные ссылки на оплату. Ссылка может быть одна или их может быть несколько, при этом в параметрах ссылки можно сразу передавать значения полей. При нажатии на эту ссылку будет отображаться всплывающее окно оплаты. Чтобы это сделать, можно к любой существующей ссылке добавить класс pk-pay-link или разместить новую ссылку следующего вида:

Для подготовки ссылки зайдите в свой личный кабинет PayKeeper, перейдите в раздел «Интеграции», выберите «Виджет и кнопка оплаты» и перейдите во вкладку «Кнопка оплаты».

Подготовка ссылки включает в себя несколько этапов.

1 Указание параметров оплаты в ссылке

Если у вас несколько пакетов услуг или несколько видов товаров, вы можете сделать отдельные ссылки оплаты для каждого случая с уже установленной суммой (и другими параметрами, например, описанием пакета услуг).
При подготовке ссылки на оплату можно указать в ней значения полей оплаты, отличные от заданных в настройках Widget. Код ссылки будет отображаться справа:

Для указания заранее заданных полей ссылки нужно использовать раздел «Дополнительные поля» платёжного Widget’а.

2 Стилизация ссылки

Готовую ссылку можно стилизовать и отображать её в виде кнопки. Для этого достаточно переместить вправо ползунок во вкладке «Стилизация» и выбрать подходящие параметры.

Настройка поля оплаты

Настройка поля оплаты

Оставьте заявку

Менеджер перезвонит вам и расскажет про детали подключения