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

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

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

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

//При работе с тестовой средой Платежного шлюза 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" onclick="sendRequest()" class="orange-button" value="Оплата">
    <input type="text" name="amount" value="1.5" placeholder="Сумма заказа" required>
    <input type="text" name="description" value="test pay" placeholder="Описание заказа" required>
    <input type="text" name="merchant_order_id" value="1234567890" placeholder="Номер заказа">
    <input type="hidden" name="site" value="glnet_demo">
    <input type="hidden" value="2de639e455ad2299792978ef6a8f0f5c" isToken>
  </form>
</div>

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

<form form-type="sandbox" onsubmit="sendRequest();" class="payForm">

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

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

//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>