Отображение виджета во всплывающем окне
Вы можете управлять тем, как будет отображаться виджет — на вашей странице оплаты или во всплывающем окне.
Размещение на странице оплаты (основной способ) — вы разрабатываете страницу оплаты с контейнером для размещения платежной формы и инициализируете виджет: пользователь переходит на вашу страницу оплаты, выбирает способ оплаты и подтверждает платеж. Подробнее про размещение на странице оплаты
Отображение виджета во всплывающем окне — вам нужно только инициализировать виджет: когда пользователь переходит к оплате, виджет в вашем интерфейсе отображает всплывающее окно с платежной формой. В этом окне пользователь выбирает способ оплаты и подтверждает платеж.
Пример виджета во всплывающем окне
 
Сценарий проведения платежа
  1. Пользователь переходит к оплате, например, нажимает кнопку Заплатить.
  2. Вы отправляете ЮKassa запрос на создание платежа.
  3. ЮKassa возвращает вам созданный объект платежа с токеном для инициализации виджета.
  4. Вы инициализируете виджет с помощью токена.
  5. Виджет автоматически отображает всплывающее окно с платежной формой.
  6. Пользователь выбирает способ оплаты, вводит данные.
  7. При необходимости виджет перенаправляет пользователя на страницу подтверждения платежа или отображает еще одно всплывающее окно (например, для аутентификации по 3‑D Secure).
  8. Пользователь подтверждает платеж.
  9. При неуспешной оплате (например, не хватило денег) банковской картой, через Apple Pay или Google Pay виджет отображает пользователю сообщение об ошибке и, если срок действия токена для инициализации виджета еще не истек, предлагает оплатить еще раз с возможностью повторно выбрать способ оплаты.
  10. Если пользователь подтвердил платеж или если закончился срок действия токена для инициализации, виджет перенаправляет пользователя на страницу завершения оплаты на вашей стороне.
  11. Вы отображаете нужную информацию, в зависимости от статуса платежа.
Виджет не уведомляет о том, что пользователь закрыл всплывающее окно с платежной формой. Когда пользователь снова перейдет к оплате, вам нужно заново создать платеж и инициализировать виджет.
 
Инструкция по инициализации платежной формы
Чтобы платежная форма открывалась во всплывающем окне, нужно при инициализации виджета в объекте
customization
передать параметр
modal
со значением
true
. Для отображения платежной формы вызовите метод
render
.
При необходимости вы можете настроить цветовую схему платежной формы и отображение способов оплаты.
HTML
<!--Подключение библиотеки-->
<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>

<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Настройка способа отображения
        modal: true
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

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

Есть вопросы или замечания по документации?

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