Устаановка виджета
Для установки виджета необходимо подключить на сайте скрипт (например, в разделе head):
<script src="{BUNDLE_URL}" async></script>
где {BUNDLE_URL}:
https://widget-sandbox.cloudtips.ru/bundle.js– для тестовой средыhttps://widget.cloudtips.ru/bundle.js– для прода
Настройка и использование виджета
Для открытия модального окна с нужной страницей оплаты 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);
});