С помощью виджета ЮKassa вы можете встроить на сайт готовую платежную форму. Пользователю будут доступны популярные способы оплаты: кошелек ЮMoney, банковская карта, SberPay и другие.
Платежная форма виджета ЮKassa
Способы оплаты, которые поддерживает виджет:
- кошелек ЮMoney;
- банковская карта — произвольная карта и карты, привязанные к кошельку ЮMoney или к Сбер ID;
- SberPay;
- Mir Pay;
- СБП.
Если проводите платежи в две стадии или сохраняете способ оплаты для автоплатежей, на платежной форме отображаются только те способы, которые поддерживают используемую вами опцию.
Подробнее о способах оплаты и их возможностях
Платежная форма автоматически подстраивается под размеры устройства пользователя, проверяет вводимые данные и подсказывает пользователю, если что-то введено некорректно.
Можно настроить язык интерфейса и цветовую схему платежной формы.
Если оплата не проходит, виджет обрабатывает неуспешные попытки: он отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз с повторным выбором способа оплаты.
Вы можете отключить эту настройку через менеджера ЮKassa и обрабатывать неуспешные попытки самостоятельно.
Чтобы принять платеж с помощью виджета, достаточно создать платеж по API ЮKassa, инициализировать виджет и отобразить форму на странице оплаты или во всплывающем окне.
Вы можете обрабатывать события виджета для взаимодействия с пользователем после оплаты и при закрытии всплывающего окна с платежной формой.
- Пользователь переходит к оплате.
- Вы отправляете ЮKassa запрос на создание платежа.
- ЮKassa возвращает вам созданный объект платежа с токеном для инициализации виджета.
- Вы инициализируете виджет и отображаете форму на странице оплаты или во всплывающем окне.
- Пользователь выбирает способ оплаты, вводит данные.
- При необходимости виджет перенаправляет пользователя на страницу подтверждения платежа или отображает всплывающее окно (например, для аутентификации по 3‑D Secure).
- Пользователь подтверждает платеж.
- Если по какой-то причине платеж не прошел (например, не хватило денег) и срок действия токена для инициализации виджета еще не истек, виджет отображает пользователю сообщение об ошибке и предлагает оплатить еще раз с возможностью повторно выбрать способ оплаты.
- Если пользователь подтвердил платеж или если закончился срок действия токена для инициализации, виджет перенаправляет пользователя на страницу завершения оплаты на вашей стороне или выполняет действия, настроенные вами для события завершения оплаты.
- Вы отображаете нужную информацию, в зависимости от статуса платежа.
Готово!
Используйте Быстрый старт, чтобы провести свой первый платеж с помощью виджета ЮKassa.
Типовые сценарии интеграции виджетаCheckout.jsОсновы работы с APIОбработка событий виджета