Виджет

Платежный виджет

Платежный виджет

Платежный виджет — всплывающая форма для ввода реквизитов карты. В данном варианте фактически ввод реквизитов карты происходит на стороне Платежного шлюза, а визуально - на стороне сайта Интернет-магазина. Виджет автоматически определяет тип платежной системы: Visa, MasterCard, Maestro или "МИР", а также банк-эмитент карты и показывает соответствующие логотипы. Форма оптимизирована для использования в любых браузерах и мобильных устройствах. Внутри виджета открывается iframe, который гарантирует безопасность передачи карточных данных и не требует от ТСП сертификации для использования. Отсутствие перенаправления на другие сайты положительно воспринимается пользователями и повышает конверсию платежей.

Демонстрация виджета

Для демонстрации работы Платежного виджета необходимо перейти на форму заказа ниже, заполнить следующие данные и нажать на кнопку «Оплата»:
1) Сумма заказа
2) Описание заказа
3) Номер заказа

После нажатия кнопки «Оплата» откроется всплывающее окно Платежного виджета в виде iframe:
Для тестирования можно использовать тестовые карточные данные:


Номер карты 4111 1111 1111 1111
Дата истечения срока действия 02/24
Проверочный код на обратной стороне 123
Установите платёжный виджет

Для установки виджета необходимо прописать на сайте Интернет-магазина в разделе

следующий скрипт:
//При работе с тестовой средой Платежного шлюза GateLine:
<script src="https://checkout.sandbox.gateline.net/js/gateline/widget.js"></script>
//При работе с промышленной средой Платежного шлюза GateLine:
<script src="https://checkout.gateline.ru/js/gateline/widget.js"></script>

С помощью метода checkout_pay({token: token}); если передан параметр token из ранее сформированной ссылки на платежную форму, виджет запросит эту форму и отобразит ее в виде всплывающего окна браузера.

Пример:

checkout_pay({site: site, api_key: api_key, merchant_order_id: ...});

Далее создаем объект Widget.

let widget = new GL.Widget({style: { width: 123,  height: 123}});

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

Полный скрипт:

<script>
  function sendRequest() {
    let elems = document.querySelectorAll('form[class="payForm"] input');
    let params = {};
    for (let el of elems) {
      if (el.name)
        params[el.name] = el.value;
      else if (el.hasAttribute("istoken"))
        params.api_key = el.value;
    }
    let widget = new GL.Widget({
      animated_hide: true,
      hide_on_click: true,
    });
    widget.checkout_pay(params, { on_result: (res) => { console.log(res) } });
    return false;
  }
</script>
Параметры формирования заказа и оплаты по платежному виджету

Для ввода данных по заказу и параметров подключения к платежному виджету, необходимо внести данные в следующий скрипт:

<div class="form-wrapper">
  <form form-type="sandbox" class="payForm">
    <input type="button" >

Вставьте UID (идентификатор) Вашего сайта в значение параметра site и ключ сайта (token) в значение параметра isToken.
UID и ключ выдаются при подключении к платёжному шлюзу Gateline (или при заключении договора)

<input type="hidden" name="site" value="glnet_demo">
<input type="hidden" value="2de639e455ad2299792978ef6a8f0f5c" isToken>

Для использования виджета в тестовой среде задайте параметру form-type значение sandbox.
Для использования в боевой среде необходимо задавать параметру form-type значение prod

<form form-type="sandbox" onsubmit="sendRequest();" class="payForm">
Настройте платёжный виджет

Вставьте UID (идентификатор) Вашего сайта в значение параметра site и ключ сайта (token) в значение параметра isToken.
UID и ключ выдаются при подключении к платёжному шлюзу Gateline (или при заключении договора)

&ltinput type="hidden" name="site" value="glnet_demo"&gt
&ltinput type="hidden" value="2de639e455ad2299792978ef6a8f0f5c" isToken&gt
Изменение состава полей платёжного виджета

Если необходимо изменить состав полей платёжного виджета, то у полей, которые хотите скрыть, укажите type="hidden" и удалите атрибут name (либо полностью уберите данный элемент input)

Список возможных полей (name="имя_поля" value="значение") Обязательные поля:

//merchant_order_id - номер заказа в Вашей системе (прим.: "123")
<input type="text" name="merchant_order_id" value="123">
//amount - сумма заказа (прим.: "1", "1.00")
<input type="text" name="amount" value="1.00" required>
//description - описание заказа (прим.: "Оплата заказа 123")
<input type="text" name="description" value="оплата заказ 123" required>

Опциональные поля:

email - email клиента (может использоваться для отправки уведомлений от нашего шлюза об успешной оплате; "прим.: email@email.ru")

<input type="text" name="email" value="email@email.ru">

Другие принимаемые параметры:

Параметр Описание Пример
force3d * См. Работа с 3D Secure в API 1
return_success_url * URL для перенаправления клиента в случае успешной операции должен http://example.com/success?
быть передан согласно стандарту RFC 3986
return_failure_url * URL для перенаправления клиента в случае ошибки должен быть передан согласно стандарту RFC 3986 http://example.com/failure
activation_required * Необходима ли активация карты. Если передано, значение перекрывает соответствующую настройку сайта (“Только активированные карты”). 1
email * E-mail клиента mail@example.com
project * Название проекта promosite
currency * Цифровой код валюты согласно ISO 4217 643
exchange_rate * Курс валюты относительно рубля 0.05
currency_amount * Сумма заказа отображаемая на платежной форме в случаи если currency не равно 643 123
phone * Номер телефона клиента (до 20 символов) +74951231212
custom_numeric * Числовое пользовательское поле (8 байт) 123456789
custom_text * Текстовое пользовательское поле (до 12 символов) 12345-NB-123
terminal * Дескриптор терминала MYSHOP.RU
timeout * Время жизни токена платежной формы в минутах или секундах. 15 (15 минут) 831s (831 секунда)
locale * Язык платежной формы en, ru en
extended * Дополнительные параметры См. Формирование параметра extended в API
Виджет может сам сделать запрос /checkout/pay в API. В этом случае параметры, передаваемые в метод, соответствуют параметрам одноименного метода API. Обязательно передавать идентификатор сайта и его пароль, они используются при формировании чек-суммы.

Другие обязательные параметры соответствуют таковым в API.
<script>
widget.checkout_pay({
  site: "site_id",        //  идентификатор магазина в gateline
  api_key: "1231",    // ключ магазина в gateline
  amount: 12.34,       // сумма оплаты
  description: "Назначение платежа",
  merchant_order_id: "123456",    // id заказа в магазине
}, {
// Функции, вызываемые после получения результата оплаты. Аргумент result будет содержать параметрам редиректа на результат оплаты
  on_result: function(result) { ... },
  on_success: function(result) { ... },
  on_fail:    function(result) { ... },
}
});
</script>

Ознакомьтесь с полной документацией API GateLine

Получите полную документацию в формате PDF уже через 1 минуту

Получить полную документацию
Остались вопросы?

Задайте их прямо сейчас и получите консультацию специалиста

* — обязательные поля ввода