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

Подготовка страницы

Добавьте на страницу, на которой планируется осуществлять прием оплаты, JS-скрипт:

Sandbox (тестовый виджет/сервер):

<script src=" https://cdn.pays.uz/checkout/js/v1.0.1/test-checkout.js "> </script>

Production (основной виджет/сервер):

<script src="https://cdn.pays.uz/checkout/js/v1.0.1/checkout.js"> </script>

Создайте пустой тэг div на странице, где скрипт по запросу будет создавать окно платежной системы. Дайте уникальный id тэгу.

<div id="parent-frame"></div>

Вызов виджета

Название Описание Обязательно Откуда получить
parent_id ID тэга созданного в шаге 1.2. да Система поставщика услуг
store_id Идентификатор поставщика услуг в PAYMO да PAYMO
account Идентификатор услуги в биллинге поставщика, который пользователь будет оплачивать. Пример: „998991234567“ – для Uzmobile, „he2223344“ – для SarkorTelecom, „номер инвойса“ – для интернет магазина. Запрос, с указанием данного идентификатора и суммы будет передан в биллинг поставщика после проведения оплаты да Система поставщика услуг
amount Сумма, которую пользователь должен оплатить. Указывается в тийнах. да Система поставщика услуг
key Генерируется при создании платежа в системе поставщика услуг следующим способом: SHA256(store_id+’’+amount+’’+account+’’+api_key). API ключ можно сгенерировать в кабинете поставщика. да Система поставщика услуг
success_redirect Ссылка, куда пользователь будет перенаправленпосле успешной оплаты да Система поставщика услуг
fail_redirect Ссылка, куда пользователь будет перенаправленпосле неуспешной оплаты да Система поставщика услуг
terminal_id В случае если у поставщика зарегистрированы несколько терминалов в PAYMO, то необходимо указать на какой именно списывать деньги. Если у поставщика только один терминал, это поле передавать необязательно нет PAYMO
version Версия платежного виджета. Если не указана, будет отображена последняя стабильная версия нет PAYMO
lang Язык на котором будет отображен платежный виджет. По умолчанию ru нет ru, uz
theme Тема платежного виджета. нет default, blue,green, pink,orange.

Пример

<script th:inline="javascript">
/*<![CDATA[*/
paymo_open_widget({
parent_id: "parent-frame",
store_id: "1",
account: "1512366",
terminal_id: "31",
success_redirect: "http://yoursite.ru/success_redirect",
fail_redirect: "http://yoursite.ru/success_redirect",
version: "1.0.0",
amount: 500000, //500000 тийин = 5000 сумов
details:"",
lang:"ru",
key:"D02099167CA668AFB97083F4D74CB0258C46F83B2EED5510817AB825D03E1DE4",
theme:"blue"
});
/*]]>*/
</script>

Оформление виджета

Виджет имеет предустановленные цветовые гаммы: default, blue, green, pink, orange. При необходимости каждому элементу виджета можно указать специальный цвет, соответствующий дизайну сайта поставщика услуг. Для кастомной стилизации дополнительно в виджет необходимо передать следующие поля со значением в виде шестнадцатеричный кода цвета (RGB):

Поле Описание
color1 Фон тела виджета
color2 Текст с деталями инвойса
color3 Фон шапки (хидера)
color4 Текст шапки (в хидере)
color5 Фон карты
color6 Текст лейблов на карте
color7 Фон кнопки «Оплатить»
color8 Текст кнопки «Оплатить»
color7 Фон кнопки «Назад»
color8 Текст кнопки «Назад»

Инструмент для визуальной настройки цветов виджет представлен в личном кабинете мерчанта в разделе «Точки продаж».

Оплата производится в два шага:
  1. Ввод реквизитов карты (номер карты и дата истечения). По номеру, привязанному к карте, высылается СМС с одноразовым паролем для подтверждения оплаты.
  2. На следующей странице пользователь вводит одноразовый пароль, указанный в СМС.
alternate text alternate text