Настройка отображения платежного виджета
Для добавления интерфейса платежного виджета на вашу платформу вам необходимо добавить библиотеку виджета. Для улучшения пользовательского опыта вы также можете настроить высоту виджета и обработку событий.
Добавление библиотеки платежного виджета
Примечание
Чтобы открыть платежный виджет в тестовом окружении, воспользуйтесь инструкцией.
Установка с помощью скрипта
Добавьте скрипт на страницу сайта вашей платформы. В параметрах инициализации скрипта передайте авторизационный токен, полученный на предыдущем шаге интеграции. Скрипт будет запускаться каждый раз при загрузке страницы.
Copy
<script>
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://static.xsolla.com/payouts/v0/_bundles/santorelli.min.js";
s.addEventListener('load', function () {
const widget = new XPayoutsWidget.Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});
}, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>Установка с помощью npm-пакета
- Выполните команду
npm install @xsolla/payouts-sdkи установите библиотеку виджета. - Добавьте ссылку на библиотеку на страницу сайта вашей платформы. В запросе передайте авторизационный токен, полученный на предыдущем шаге интеграции.
Используйте следующий код инициализации:
Copy
import {Widget} from '@xsolla/payouts-sdk';
const widget = new Widget({
token: '<auth token>',
theme: 'black',
size: 'fixed'
});
widget.show('<container_id>');
widget.addEventListener('load', () => {
console.log('loaded');
});Дополнительные настройки
Высота
Вы можете настроить высоту виджета. Для этого передайте в коде инициализации параметр:
| Параметр | Тип | Описание |
|---|---|---|
| string | Высота платежного виджета. Может принимать значения:
|
Обработка событий
Вы можете настроить обработку следующих событий виджета:
loaded— загрузка виджета внутри iframe.tokenExpired— истечение срока жизни токена.requestWithdrawal— успешная отправка запроса на получение выплаты.heightResize— изменение высоты виджета. Событие обрабатывается только если передан параметрsize=='auto'.
Пример настройки обработки событий:
Copy
widget.addEventListener('tokenExpired', () => {
console.log('tokenExpired');
});
widget.addEventListener('heightResize', ({ height }) => {
console.log(`height resize to: ${height}`);
});
widget.addEventListener('requestWithdrawal', ({ amount }) => {
console.log(`success request withdrawal, amount: ${amount}`);
});Прогресс интеграции
Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.
