Настройка отображения способов оплаты
Виджет поддерживает два режима отображения способов оплаты: все способы или только один.
По умолчанию на платежной форме отображаются все способы оплаты, которые доступны магазину и есть в виджете. Дизайн экрана выбора и порядок отображения способов оплаты определяет виджет. Когда пользователь переходит к оплате, он выбирает нужный ему способ, вводит данные и подтверждает платеж.
Если готовый экран выбора вам не подходит, вы можете его отключить и указать тот способ оплаты, форму которого хотите отобразить пользователю. Этот режим подойдет тем, кто хочет реализовать собственный экран выбора или использовать только один способ оплаты.
 
Использование формы для оплаты одним способом
Чтобы отобразить форму оплаты конкретным способом, при инициализации виджета передайте объект
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 пикселей.
Оплата одним способом: Apple Pay
Кнопка отображается только в браузерах Safari версии 11.1 и новее, если пользователь вошел в свой аккаунт на Apple. Если кнопку отобразить нельзя, вы получите ошибку
no_payment_methods_to_display
.
В этом режиме Apple Pay нельзя сохранить для повторов платежей. Если в 
save_payment_method
передано значение
true
, кнопка не отобразится, вы получите ошибку
no_payment_methods_to_display
. Если
save_payment_method
не передавать, кнопка отобразится, но ЮKassa не будет сохранять этот способ.
Если вы отображаете кнопку для оплаты через Apple Pay, вам нужно самостоятельно взаимодействовать с пользователем при каждой попытке оплаты. Чтобы виджет обрабатывал неуспешные попытки самостоятельно, отображайте все способы оплаты или комбинацию способов оплаты банковская карта, Apple Pay и Google Pay.
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
В этом режиме Google Pay нельзя сохранить для повторов платежей. Если в 
save_payment_method
передано значение
true
, кнопка не отобразится, вы получите ошибку
no_payment_methods_to_display
. Если
save_payment_method
не передавать или передать со значением
false
, кнопка отобразится, но ЮKassa не будет сохранять этот способ.
Если вы отображаете кнопку для оплаты через Google Pay, вам нужно самостоятельно взаимодействовать с пользователем при каждой попытке оплаты. Чтобы виджет обрабатывал неуспешные попытки самостоятельно, отображайте все способы оплаты или комбинацию способов оплаты банковская карта, Apple Pay и Google Pay.
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 пикселей.
Оплата одним способом: ЮMoney
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
СберБанк Онлайн и 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
.
Комбинация способов оплаты: банковская карта, Apple Pay и Google Pay
Комбинация способов оплаты: Apple Pay и Google Pay
Кнопка Apple Pay отображается только в браузерах Safari версии 11.1 и новее, если пользователь вошел в свой аккаунт на Apple.
В этом режиме при условном сохранении способа оплаты для повторов платежей сохранится только банковская карта.
Если используется любая комбинация с банковской картой, при неуспешных платежах виджет отображает пользователю сообщение об ошибке и предлагает попробовать оплатить еще раз. Если хотите самостоятельно взаимодействовать с пользователем при каждой попытке оплаты, напишите вашему менеджеру ЮKassa.
Если используется комбинация без банковской карты (только
apple_pay
и 
google_pay
) вам нужно самостоятельно взаимодействовать с пользователем при каждой попытке оплаты.
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Справочник виджетаТиповые сценарии интеграции виджетаПодключение способов оплаты в виджете