Вы можете управлять тем, как будет отображаться виджет — на вашей странице оплаты или во всплывающем окне.
Размещение на странице оплаты (основной способ) — вы разрабатываете страницу оплаты с контейнером для размещения платежной формы и инициализируете виджет: пользователь переходит на вашу страницу оплаты, выбирает способ оплаты и подтверждает платеж. Подробнее про размещение на странице оплаты
Отображение виджета во всплывающем окне — вам нужно только инициализировать виджет: когда пользователь переходит к оплате, виджет в вашем интерфейсе отображает всплывающее окно с платежной формой. В этом окне пользователь выбирает способ оплаты и подтверждает платеж.
Пример виджета во всплывающем окне
- Пользователь переходит к оплате, например нажимает кнопку Заплатить.
- Вы отправляете ЮKassa запрос на создание платежа.
- ЮKassa возвращает вам созданный объект платежа с токеном для инициализации виджета.
- Вы инициализируете виджет с помощью токена.
- Виджет автоматически отображает всплывающее окно с платежной формой.
- Пользователь выбирает способ оплаты, вводит данные.
- При необходимости виджет перенаправляет пользователя на страницу подтверждения платежа или отображает еще одно всплывающее окно (например, для аутентификации по 3‑D Secure).
- Пользователь подтверждает платеж.
- Если по какой-то причине платеж не прошел (например, не хватило денег) и срок действия токена для инициализации виджета еще не истек, виджет отображает пользователю сообщение об ошибке и предлагает оплатить еще раз с возможностью повторно выбрать способ оплаты.
- Если пользователь подтвердил платеж или если закончился срок действия токена для инициализации, виджет перенаправляет пользователя на страницу завершения оплаты на вашей стороне.
- Вы отображаете нужную информацию, в зависимости от статуса платежа.
Чтобы платежная форма открывалась во всплывающем окне, нужно при инициализации виджета в объекте
customization передать параметр modal со значением true. Для отображения платежной формы вызовите метод render.При необходимости вы можете настроить цветовую схему платежной формы и отображение способов оплаты.
<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>
Справочник виджетаВнешний вид платежной формыРазмещение виджета на собственной странице оплатыОбработка событий виджета