Подключение виджета для выплат

<!--Подключение библиотеки-->
<script src="https://yookassa.ru/payouts-data/3.1.0/widget.js"></script>

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  }
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>

//Метод, при вызове которого скрывается форма или пользователь уходит со страницы в одностраничном приложении
onCloseForm(){
  //Вызов метода, который удаляет callback-функции
  payoutsData.clearListeners()
} 

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  },
  lang: 'en_US', //Настройка языка
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Настройка виджета
  customization: {
      //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
      colors: {
        control_primary: '#00BF96' // Базовый цвет кнопки Дальше и других акцентных элементов
      }
  },
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  }
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>

    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          control_primary: '#00BF96', // Базовый цвет кнопки Дальше и других акцентных элементов
          control_primary_content: '#FFFFFF' // Цвет текста кнопки Дальше
        }
    },

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Настройка виджета
  customization: {
      //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
      colors: {
        background: '#F2F3F5' // Цвет фона формы
      }
  },
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  }
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>

    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5', // Цвет фона формы
          text: '#222222', // Цвет текста
          border: '#D4D4D4', // Цвет границ и разделителей
          control_secondary: '#AFBDCA' // Цвет неакцентных элементов интерфейса
        }
    },

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Настройка виджета
  customization: {
      //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
      colors: {
        background: '#F2F3F5', // Цвет фона формы
        control_primary: '#00BF96' // Базовый цвет кнопки Дальше и других акцентных элементов
      }
  },
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  }
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>

    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5', // Цвет фона формы
          control_primary: '#00BF96', // Базовый цвет кнопки Дальше и других акцентных элементов
          control_primary_content: '#FFFFFF', // Цвет текста кнопки Дальше
          control_secondary: '#AFBDCA', // Цвет неакцентных элементов интерфейса
          border: '#D4D4D4', // Цвет границ и разделителей
          text: '#222222' // Цвет текста
        }
    },

<!--HTML-элемент, в котором будет отображаться форма ввода номера карты-->
<div id="payout-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Настройка виджета
  customization: {
      //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
      colors: {
        //Параметры цветовой схемы, которые вы хотите изменить
      }
  },
  success_callback: function(data) {
    //Обработка ответа с токеном карты
  },
  error_callback: function(error) {
    //Обработка ошибок при получении токена карты
  }
});

//Отображение формы в контейнере
payoutsData.render('payout-form')
//Метод возвращает Promise, исполнение которого говорит о полной загрузке формы сбора данных (можно не использовать).
  .then(() => {
    //Код, который нужно выполнить после отображения формы.
  });
</script>