По умолчанию на платежной форме отображаются все способы оплаты, которые доступны магазину и есть в виджете. Дизайн экрана выбора и порядок отображения способов оплаты определяет виджет. Когда пользователь переходит к оплате, он выбирает нужный ему способ, вводит данные и подтверждает платеж.
Если готовый экран выбора вам не подходит, вы можете его отключить и указать тот способ оплаты, форму которого хотите отобразить пользователю. Этот режим подойдет тем, кто хочет реализовать собственный экран выбора или использовать только один способ оплаты.
Чтобы отобразить форму оплаты конкретным способом, при инициализации виджета передайте объект
customization с массивом payment_methods. Значение, которое нужно передать в массиве payment_methods, зависит от способа оплаты, который вы хотите использовать:Чтобы отобразить форму для оплаты банковской картой, передайте в
payment_methods значение bank_card. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата одним способом: банковская карта
При неуспешном платеже банковской картой виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
<script> //Инициализация виджета. Все параметры обязательные, кроме объекта customization. const checkout = new window.YooMoneyCheckoutWidget({ confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa return_url: 'https://example.com', //Ссылка на страницу завершения оплаты //Настройка виджета customization: { //Выбор способа оплаты для отображения payment_methods: ['bank_card'] }, error_callback: function(error) { //Обработка ошибок инициализации } }); //Отображение платежной формы в контейнере checkout.render('payment-form'); </script>
Чтобы отобразить форму для оплаты из кошелька ЮMoney, с привязанных карт и баллами лояльности, передайте в
payment_methods значение yoo_money. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата одним способом: ЮMoney
При неуспешном платеже из кошелька ЮMoney или с привязанной к кошельку карты виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
<script> //Инициализация виджета. Все параметры обязательные, кроме объекта customization. const checkout = new window.YooMoneyCheckoutWidget({ confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa return_url: 'https://example.com', //Ссылка на страницу завершения оплаты //Настройка виджета customization: { //Выбор способа оплаты для отображения payment_methods: ['yoo_money'] }, error_callback: function(error) { //Обработка ошибок инициализации } }); //Отображение платежной формы в контейнере checkout.render('payment-form'); </script>
Чтобы отобразить форму для оплаты через SberPay, передайте в
payment_methods значение sberbank. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.Оплата через СБП для компьютера и мобильного устройства отличается. При оплате с компьютера формируется QR-код, который нужно отсканировать телефоном в приложении СберБанка:
Оплата одним способом: SberPay
При оплате с мобильного устройства виджет открывает приложение СберБанка. Если открыть приложение не удалось, отображается кнопка Перейти в приложение:
Оплата одним способом (с мобильного устройства): SberPay
При неуспешном платеже через SberPay виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
<script> //Инициализация виджета. Все параметры обязательные, кроме объекта customization. const checkout = new window.YooMoneyCheckoutWidget({ confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa return_url: 'https://example.com', //Ссылка на страницу завершения оплаты //Настройка виджета customization: { //Выбор способа оплаты для отображения payment_methods: ['sberbank'] }, error_callback: function(error) { //Обработка ошибок инициализации } }); //Отображение платежной формы в контейнере checkout.render('payment-form'); </script>
Чтобы отобразить кнопку для оплаты через Mir Pay, передайте в
payment_methods значение mir_pay. Минимальная ширина контейнера для отображения кнопки — 288 пикселей. Цветовую схему кнопки изменить нельзя — ее фон может быть только белым.
Оплата одним способом на мобильном устройстве: Mir Pay
Кнопка отображается при оплате с мобильных устройств на Android. Если кнопку отобразить нельзя, вы получите ошибку
no_payment_methods_to_display.Если вы отображаете кнопку для оплаты через Mir Pay, вам нужно самостоятельно взаимодействовать с пользователем при каждой попытке оплаты. Если платеж закончился неудачей, выясните причину отмены платежа и сообщите ее пользователю. Чтобы виджет обрабатывал неуспешные попытки самостоятельно, отображайте все способы оплаты или комбинацию способов оплаты Mir Pay и банковская карта.
<script> //Инициализация виджета. Все параметры обязательные, кроме объекта customization. const checkout = new window.YooMoneyCheckoutWidget({ confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa return_url: 'https://example.com', //Ссылка на страницу завершения оплаты //Настройка виджета customization: { //Выбор способа оплаты для отображения payment_methods: ['mir_pay'] }, error_callback: function(error) { //Обработка ошибок инициализации } }); //Отображение платежной формы в контейнере checkout.render('payment-form'); </script>
Чтобы отобразить форму для оплаты через СБП, передайте в
payment_methods значение sbp. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.Оплата через СБП для компьютера и мобильного устройства отличается. При оплате с компьютера формируется QR-код, который нужно отсканировать телефоном:
Оплата одним способом (с компьютера): СБП
При оплате с мобильного устройства отображается кнопка Перейти в приложение:
Оплата одним способом (с мобильного устройства): СБП
При неуспешном платеже через СБП виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
<script> //Инициализация виджета. Все параметры обязательные, кроме объекта customization. const checkout = new window.YooMoneyCheckoutWidget({ confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa return_url: 'https://example.com', //Ссылка на страницу завершения оплаты //Настройка виджета customization: { //Выбор способа оплаты для отображения payment_methods: ['sbp'] }, error_callback: function(error) { //Обработка ошибок инициализации } }); //Отображение платежной формы в контейнере checkout.render('payment-form'); </script>
Вы можете передать только одну комбинацию способов оплаты: Mir Pay и банковская карта. Если оплата проходит с мобильного устройства на Android, кнопка Mir Pay отобразится над банковской картой.
Чтобы использовать комбинацию способов оплаты, перечислите их коды через запятую. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей. Цветовую схему кнопки Mir Pay изменить нельзя — ее фон может быть только белым.
Комбинация способов оплаты на мобильном устройстве: Mir Pay и банковская карта
Checkout.jsСправочник виджетаПодключение способов оплаты в виджете