При использовании платёжного Widget’а не нужно менять вёрстку страницы оплаты на вашем сайте и продумывать расположение блока с оплатой в текущем сайте. Форма оплаты будет располагаться поверх существующей страницы.
Сначала необходимо подготовить JavaScript-код для вставки на сайт с помощью личного кабинета. Для этого зайдите в свой личный кабинет PayKeeper, перейдите в раздел «Интеграции» и выберите вкладку «Виджет и кнопка оплаты».
Подготовка Widget’а включает в себя несколько этапов.
На этом этапе задаются основные параметры всплывающего окна: «Заголовок», «Описание», «Ширина», «Редактируемые поля для формы оплаты». Любое поле может быть обязательным для заполнения, необязательным или предзаполненным (фиксированным), есть возможность добавить неограниченное количество собственных полей.
На этом этапе также можно установить порядок полей формы оплаты. Для перемещения того или иного параметра нужно воспользоваться стрелками, расположенными слева от поля.
На этом этапе можно выбрать или отключить несколько дополнительных параметров, связанных с поведением пользователя при взаимодействии с Widget:
Выбор параметра «Мгновенный переход» приведёт к тому, что при нажатии на платёжную ссылку Widget не будет показываться плательщику, вместо этого сразу будет выполняться переадресация на платёжную страницу банка.
Использование опции «Открывать платёжную страницу банка в iFrame» приведёт к отображению формы для ввода карты внутри Widget, без перехода на отдельную платёжную страницу банка.
После заполнения всех полей в специальном окне появится готовый JavaScript-код. Он обновляется автоматически при изменении содержания полей формы.
В этом разделе также можно посмотреть необфусцированный (расшифрованный) код. Для этого нажмите кнопку «Показать необфусцированный код».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $secret_seed = "verysecretseed"; $id = $_POST['id']; $sum = $_POST['sum']; $clientid = $_POST['clientid']; $orderid = $_POST['orderid']; $key = $_POST['key']; if ($key != md5 ($id.number_format($sum, 2, ".", "") .$clientid.$orderid.$secret_seed)) { echo "Error! Hash mismatch"; exit; } # Рекомендуем проверять, существует ли заказ $orderid, # принадлежит ли он пользователю $clientid, # совпадает ли его сумма с переданной $sum ... # Заказ $orderid можно считать оплаченным, # нужно отметить, что он оплачен ... echo "OK ".md5($id.$secret_seed); ?> |
Код нужно скопировать и вставить в конце страницы сайта, на которой будет размещена оплата.
Если впоследствии нужно будет изменить настройки Widget, ссылка на код Widget изменится, и её надо будет вставить ещё раз.
Настройки Widget могут быть сохранены и затем использованы для генерации JavaScript-кода.
Настройки можно сохранить в новый Widget или обновить данные в одном из уже используемых шаблонов.
После установки Widget’а на сайт нужно подготовить и разместить активные ссылки на оплату. Ссылка может быть одна или их может быть несколько, при этом в параметрах ссылки можно сразу передавать значения полей. При нажатии на эту ссылку будет отображаться всплывающее окно оплаты. Чтобы это сделать, можно к любой существующей ссылке добавить класс pk-pay-link или разместить новую ссылку следующего вида:
1 |
<a class="pk-pay-link" href="#">Оплата</a> |
Для подготовки ссылки зайдите в свой личный кабинет PayKeeper, перейдите в раздел «Интеграции», выберите «Виджет и кнопка оплаты» и перейдите во вкладку «Кнопка оплаты».
Подготовка ссылки включает в себя несколько этапов.
Если у вас несколько пакетов услуг или несколько видов товаров, вы можете сделать отдельные ссылки оплаты для каждого случая с уже установленной суммой (и другими параметрами, например, описанием пакета услуг).
При подготовке ссылки на оплату можно указать в ней значения полей оплаты, отличные от заданных в настройках Widget. Код ссылки будет отображаться справа:
Для указания заранее заданных полей ссылки нужно использовать раздел «Дополнительные поля» платёжного Widget’а.
Готовую ссылку можно стилизовать и отображать её в виде кнопки. Для этого достаточно переместить вправо ползунок во вкладке «Стилизация» и выбрать подходящие параметры.
Менеджер перезвонит вам и расскажет про детали подключения