Для демонстрации работы Платежного виджета необходимо перейти на форму заказа ниже, заполнить следующие данные и нажать на кнопку «Оплата»:
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" >