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