Настройка отображения платежного виджета

Для добавления интерфейса платежного виджета на вашу платформу вам необходимо добавить библиотеку виджета. Для улучшения пользовательского опыта вы также можете настроить высоту виджета и обработку событий.

Добавление библиотеки платежного виджета

Установка с помощью скрипта

Добавьте скрипт на страницу сайта вашей платформы. В параметрах инициализации скрипта передайте авторизационный токен, полученный на предыдущем шаге интеграции. Скрипт будет запускаться каждый раз при загрузке страницы.

Copy
Full screen
Small screen

    <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-пакета

    1. Выполните команду npm install @xsolla/payouts-sdk и установите библиотеку виджета.
    2. Добавьте ссылку на библиотеку на страницу сайта вашей платформы. В запросе передайте авторизационный токен, полученный на предыдущем шаге интеграции.
    Частые вопросы
    Изучите ответы и решите возникшие проблемы.

    Используйте следующий код инициализации:

    Copy
    Full screen
    Small screen

      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');
      });

      Дополнительные настройки

      Высота

      Вы можете настроить высоту виджета. Для этого передайте в коде инициализации параметр:

      ПараметрТипОписание
      size
      stringВысота платежного виджета. Может принимать значения:
      • fixed — фиксированная высота виджета 600 px.
      • auto — динамическая высота виджета, меняется в зависимости от расширения экрана.

      Обработка событий

      Вы можете настроить обработку следующих событий виджета:

      • loaded — загрузка виджета внутри iframe.
      • tokenExpired — истечение срока жизни токена.
      • requestWithdrawal — успешная отправка запроса на получение выплаты.
      • heightResize — изменение высоты виджета. Событие обрабатывается только если передан параметр size=='auto'.

      Пример настройки обработки событий:

      Copy
      Full screen
      Small screen

        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}`);
        });

        Прогресс интеграции
        Спасибо за обратную связь!
        Последнее обновление: 26 апреля 2023

        Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

        Сообщите о проблеме
        Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
        Укажите email-адрес, чтобы мы могли связаться с вами
        Спасибо за обратную связь!