Виджет ЮKassa
С помощью виджета ЮKassa вы можете встроить на сайт готовую платежную форму. Пользователю будут доступны такие способы оплаты: кошелек ЮMoney и привязанные к нему банковские карты, произвольная банковская карта, Apple Pay, Google Pay и Сбербанк Онлайн/SberPay.
Платежная форма виджета ЮKassa
 
Ключевые особенности
Платежная форма автоматически подстраивается под размеры устройства пользователя, проверяет вводимые данные и подсказывает пользователю, если что-то введено некорректно. Можно настроить язык интерфейса и цветовую схему платежной формы.
При оплате банковской картой виджет обрабатывает неуспешные попытки: если платеж не прошел, виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз с возможностью выбора другой карты и другого способа оплаты. Вы можете отключить эту настройку через менеджера ЮKassa и обрабатывать неуспешные попытки самостоятельно.
С помощью виджета пользователь сможет сохранить для автоплатежей любой поддерживаемый способ оплаты, кроме СберБанка Онлайн/SberPay.
Чтобы принять платеж с помощью виджета, достаточно создать платеж по API ЮKassa, инициализировать виджет и отобразить форму на странице оплаты.
 
Сценарий проведения платежа
  1. Пользователь переходит к оплате.
  2. Вы отправляете ЮKassa запрос на создание платежа.
  3. ЮKassa возвращает вам созданный объект платежа с токеном для инициализации виджета.
  4. Вы инициализируете виджет и отображаете форму на странице оплаты.
  5. Пользователь выбирает способ оплаты, вводит данные.
  6. При необходимости виджет перенаправляет пользователя на страницу подтверждения платежа или отображает всплывающее окно (например, для аутентификации по 3‑D Secure).
  7. Пользователь подтверждает платеж.
  8. Если пользователь использовал банковскую карту, платеж не прошел (например, не хватило денег), но срок действия токена для инициализации виджета еще не закончился, виджет отображает сообщение об ошибке и предлагает попробовать оплатить еще раз с возможностью выбора другой карты и другого способа оплаты.
  9. Если пользователь подтвердил платеж или если закончился срок действия токена для инициализации, виджет перенаправляет пользователя на страницу завершения оплаты на вашей стороне.
  10. Вы отображаете нужную информацию, в зависимости от статуса платежа.
Готово!
Используйте Быстрый старт, чтобы провести свой первый платеж с помощью виджета ЮKassa.
 
Что почитать еще
Типовые сценарии интеграции виджетаCheckout.jsОсновы работы с API