Настройка отображения способов оплаты
Виджет поддерживает два режима отображения способов оплаты: все способы или только один.
По умолчанию на платежной форме отображаются все способы оплаты, которые доступны магазину и есть в виджете. Дизайн экрана выбора и порядок отображения способов оплаты определяет виджет. Когда пользователь переходит к оплате, он выбирает нужный ему способ, вводит данные и подтверждает платеж.
Если готовый экран выбора вам не подходит, вы можете его отключить и указать тот способ оплаты, форму которого хотите отобразить пользователю. Этот режим подойдет тем, кто хочет реализовать собственный экран выбора или использовать только один способ оплаты.
 
Использование формы для оплаты одним способом
Чтобы отобразить форму оплаты конкретным способом, при инициализации виджета передайте объект
customization
с массивом
payment_methods
. Значение, которое нужно передать в массиве
payment_methods
, зависит от способа оплаты, который вы хотите использовать:
Вы можете разместить на странице оплаты несколько экземпляров виджета. В этом случае создать платеж нужно только один раз и инициализировать все экземпляры одним и тем же токеном. Токен будет работать, пока не закончится срок его действия или пока пользователь не подтвердит платеж.
 
Банковская карта
Чтобы отобразить форму для оплаты банковской картой, передайте в 
payment_methods
значение
bank_card
. Минимальная ширина контейнера для отображения платежной формы — 280 пикселей.
При неуспешном платеже виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой неуспешной попытке оплаты, напишите вашему менеджеру Ю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>
 
Apple Pay
Чтобы отобразить кнопку для оплаты через Apple Pay, передайте в 
payment_methods
значение
apple_pay
. Минимальная ширина контейнера для отображения кнопки — 100 пикселей, минимальная высота — 40 пикселей.
Кнопка отображается только в браузерах Safari, если пользователь вошел в свой аккаунт на Apple. Если кнопку отобразить нельзя, вы получите ошибку
no_payment_methods_to_display
.
В этом режиме Apple Pay нельзя сохранить для повторов платежей. Если в 
save_payment_method
передано значение
true
, кнопка не отобразится, вы получите ошибку
no_payment_methods_to_display
. Если
save_payment_method
не передавать, кнопка отобразится, но ЮKassa не будет сохранять этот способ.
JavaScript
<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Выбор способа оплаты для отображения
        payment_methods: ['apple_pay']
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>
 
Google Pay
Чтобы отобразить кнопку для оплаты через Google Pay, передайте в 
payment_methods
значение
google_pay
. Минимальная ширина контейнера для отображения кнопки — 100 пикселей, минимальная высота — 40 пикселей.
В этом режиме Google Pay нельзя сохранить для повторов платежей. Если в 
save_payment_method
передано значение
true
, кнопка не отобразится, вы получите ошибку
no_payment_methods_to_display
. Если
save_payment_method
не передавать или передать со значением
false
, кнопка отобразится, но ЮKassa не будет сохранять этот способ.
JavaScript
<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Выбор способа оплаты для отображения
        payment_methods: ['google_pay']
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>
 
ЮMoney
Чтобы отобразить форму для оплаты из кошелька ЮMoney, с привязанных карт и баллами лояльности, передайте в 
payment_methods
значение
yoo_money
. Минимальная ширина контейнера для отображения платежной формы — 280 пикселей.
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
. Минимальная ширина контейнера для отображения платежной формы — 280 пикселей.
СберБанк Онлайн и SberPay нельзя сохранить для повторов платежей. Если при создании платежа передать
save_payment_method
со значением
true
, вы получите ошибку
no_payment_methods_to_display
, пользователь увидит сообщение о техническом сбое.
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>
 
Комбинации способов оплаты
Вы можете передать два типа комбинаций способов оплаты: Apple Pay и Google Pay и банковская карта с Apple Pay и Google Pay. В этом случае способы оплаты отобразятся друг под другом.
Чтобы использовать комбинацию способов оплаты, перечислите их коды через запятую.
Одновременно можно передавать только коды
bank_card
,
apple_pay
и 
google_pay
. Если передать комбинацию из других способов оплаты, виджет вернет ошибку
invalid_combination_of_payment_methods
.
В этом режиме при условном сохранении способа оплаты для повторов платежей сохранится только банковская карта.
При неуспешном платеже банковской картой виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой попытке оплаты, напишите вашему менеджеру ЮKassa.
JavaScript
<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Выбор способа оплаты для отображения
        payment_methods: ['bank_card', 'apple_pay', 'google_pay']
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>
 
Что почитать еще
Checkout.jsСправочник виджетаТиповые сценарии интеграции виджетаПодключение способов оплаты в виджете