Виджет Ю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Обработка событий виджета