Настройка отображения способов оплаты
Доступно только после согласования. Если хотите использовать этот режим, напишите вашему менеджеру ЮKassa.
По умолчанию на платежной форме отображаются все способы оплаты, которые доступны магазину и есть в виджете. Дизайн экрана выбора и порядок отображения способов оплаты определяет виджет. Когда пользователь переходит к оплате, он выбирает нужный ему способ, вводит данные и подтверждает платеж.
Если готовый экран выбора вам не подходит, вы можете его отключить и указать тот способ оплаты, форму которого хотите отобразить пользователю. Этот режим подойдет тем, кто хочет реализовать собственный экран выбора или использовать только один способ оплаты.
Использование формы для оплаты одним способом
Чтобы отобразить форму оплаты конкретным способом, при инициализации виджета передайте объект
customization
с массивом
payment_methods
. Значение, которое нужно передать в массиве
payment_methods
, зависит от способа оплаты, который вы хотите использовать:
Вы можете разместить на странице оплаты несколько экземпляров виджета. В этом случае создать платеж нужно только один раз и инициализировать все экземпляры одним и тем же токеном. Токен будет работать, пока не закончится срок его действия или пока пользователь не подтвердит платеж.
Банковская карта
Чтобы отобразить форму для оплаты банковской картой, передайте в 
payment_methods
значение
bank_card
. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата одним способом: банковская карта
При неуспешном платеже банковской картой виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
JavaScript
<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
Чтобы отобразить форму для оплаты из кошелька ЮMoney, с привязанных карт и баллами лояльности, передайте в 
payment_methods
значение
yoo_money
. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата одним способом: ЮMoney
При неуспешном платеже из кошелька ЮMoney или с привязанной к кошельку карты виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
JavaScript
<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
Чтобы отобразить форму для оплаты через SberPay, передайте в 
payment_methods
значение
sberbank
. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата одним способом: SberPay
При неуспешном платеже через SberPay виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
JavaScript
<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>
СБП (Система быстрых платежей)
Чтобы отобразить форму для оплаты через СБП, передайте в 
payment_methods
значение
sbp
. Минимальная ширина контейнера для отображения платежной формы — 288 пикселей.
Оплата через СБП для компьютера и мобильного устройства отличается. При оплате с компьютера формируется QR-код, который нужно отсканировать телефоном:
Оплата одним способом (с компьютера): СБП
При оплате с мобильного устройства отображается кнопка Перейти в приложение:
Оплата одним способом (с мобильного устройства): СБП
При неуспешном платеже через СБП виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру ЮKassa.
JavaScript
<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>
Что почитать еще
Checkout.jsСправочник виджетаПодключение способов оплаты в виджете