Установка виджета

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

<script src="{BUNDLE_URL}" async></script>

где {BUNDLE_URL}:

Настройка и использование виджета

Для открытия модального окна с нужной страницей оплаты CloudTips необходимо зарегистрировать функцию, которая создаёт объект класса ctips.CloudTipsSiteWidget и вызывает его метод open, с нужными параметрами:

function pay() {
  const widget = new ctips.CloudTipsSiteWidget();

  widget.open({
    layoutid: 'a2e88f6a', // id страницы оплаты
    placeCode: '23456twer', // страница сотрудников заведения (если указан и layoutid, placeCode передаётся как query-параметр)
    amount: 123, // предустановленная сумма на странице оплаты
    sum: 12345, // оплата в % от суммы чека
    invoiceid: '100500', // внешний идентификатор (например номер заказа)
    hideamount: true, // не показывать поле ввода суммы
  }, {
    onSuccess: (data) => { console.log('[onSuccess] data:', data); }, // Действия после успешной оплаты и закрытия пользователем окна виджета
    onFail: (data) => { console.log('[onFail] data:', data); }, // Действия после неуспешной оплаты
    // onSuccess: 'https://cloudpayments.ru/', // Если в onSuccess или onFail передать строку url, будет выполнен редирект на этот url
  });
}

open (options, events)
options – объект с параметрами страницы оплаты [обязательный]
events – объект с событиями [опциональный]

Обязательно должен быть указан параметр layoutid, либо placeCode, в options.
Если указан layoutid, будет открыта соответствующая страница оплаты.
Если указан placeCode и не указан layoutid, будет открыта страница сотрудников заведения.

И нужно добавить вызов этой функции, например, на нажатие кнопки «Оплатить»:

window.addEventListener('load', () => {
  const payBtn = document.getElementById('pay-btn');
  payBtn.addEventListener('click', pay);
});

Пример виджета

https://widget-sandbox.cloudtips.ru/testing-page/