<!--Library implementation-->
<script src="https://yookassa.ru/payouts-data/3.1.0/widget.js"></script>

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  }
});

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

//Method that, when called, results in the form being hidden or the user leaving the page in a single-page app
onCloseForm(){
  //Вызов метода, который удаляет callback-функции
  payoutsData.clearListeners()
} 

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  },
  lang: 'en_US', //Настройка языка
});

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

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Widget customization
  customization: {
      //Color scheme customization, minimum one parameter, color values in HEX
      colors: {
        control_primary: '#00BF96' // Базовый цвет кнопки Дальше и других акцентных элементов
      }
  },
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  }
});

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

    customization: {
        //Color scheme customization, minimum one parameter, color values in HEX
        colors: {
          control_primary: '#00BF96', // Базовый цвет кнопки Дальше и других акцентных элементов
          control_primary_content: '#FFFFFF' // Цвет текста кнопки Дальше
        }
    },

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Widget customization
  customization: {
      //Color scheme customization, minimum one parameter, color values in HEX
      colors: {
        background: '#F2F3F5' // Цвет фона формы
      }
  },
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  }
});

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

    customization: {
        //Color scheme customization, minimum one parameter, color values in HEX
        colors: {
          background: '#F2F3F5', // Цвет фона формы
          text: '#222222', // Text color
          border: '#D4D4D4', // Color of borders and separators
          control_secondary: '#AFBDCA' // Color of non-accent interface elements
        }
    },

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Widget customization
  customization: {
      //Color scheme customization, minimum one parameter, color values in HEX
      colors: {
        background: '#F2F3F5', // Цвет фона формы
        control_primary: '#00BF96' // Базовый цвет кнопки Дальше и других акцентных элементов
      }
  },
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  }
});

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

    customization: {
        //Color scheme customization, minimum one parameter, color values in HEX
        colors: {
          background: '#F2F3F5', // Цвет фона формы
          control_primary: '#00BF96', // Базовый цвет кнопки Дальше и других акцентных элементов
          control_primary_content: '#FFFFFF', // Цвет текста кнопки Дальше
          control_secondary: '#AFBDCA', // Color of non-accent interface elements
          border: '#D4D4D4', // Color of borders and separators
          text: '#222222' // Text color
        }
    },

<!--HTML element where the form for entering the card number will be placed-->
<div id="payout-form"></div>

<script>
//Widget initialization. All parameters are required.
const payoutsData = new window.PayoutsData({
  type: 'payout',
  account_id: '<Идентификатор_шлюза>', //Идентификатор шлюза (agentId в личном кабинете)
  //Widget customization
  customization: {
      //Color scheme customization, minimum one parameter, color values in HEX
      colors: {
        //Параметры цветовой схемы, которые вы хотите изменить
      }
  },
  success_callback: function(data) {
    //Processing the response with card’s token
  },
  error_callback: function(error) {
    //Processing of errors during card token issuance
  }
});

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