Configuring payment method display options
The widget supports two modes of displaying payment methods: all methods or just one.
By default, the payment form will display all payment methods available to the store and in the widget. The selection screen design and the order of displaying the payment methods is determined by the widget. When the user proceeds to payment, they choose the method they need and confirm the payment.
If the predesigned selection screen doesn’t suit you, you can disable it and specify the payment method you want the user to see. This mode is suitable for those who want to implement their own selection screen or use only one payment method.
 
Using the form for payment via only one method
To display the form for payment via a certain method, specify the
customization
object with the
payment_methods
array during widget initialization. The value that you need to specify in the
payment_methods
array depends on the payment method that you want to use:
You can place several widgets on the payment page. In this case, you will only need to create one payment and initialize all widgets with one token. The token will work until it expires or until the user confirm the payment.
 
Bank card
To display the form for payment via bank cards, specify the
bank_card
value in 
payment_methods
. The minimum container width for displaying the payment form is 280 pixels.
Payment via single method: bank card
If the payment is unsuccessful, the widget displays an error message to the user and prompts to try paying again. If you’d like to interact with the user after each unsuccessful payment attempt on your own, contact your YooMoney manager.
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['bank_card']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>
 
Apple Pay
To display the button for payment via Apple Pay, specify the
apple_pay
value in 
payment_methods
. The minimum container width for displaying the payment form is 100 pixels, the minimum height is 40 pixels.
Payment via single method: Apple Pay
The button will only be displayed in Safari browsers if the user logged in to their Apple account. If the button cannot be displayed, you will see the
no_payment_methods_to_display
error.
In this mode, Apple Pay cannot be saved for recurring payments. If you specify
save_payment_method
with the
true
value, the button will not be displayed, and you will see the
no_payment_methods_to_display
error. If 
save_payment_method
is not specified, the button will be displayed, but YooMoney will not save this method.
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['apple_pay']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>
 
Google Pay
To display the button for payment via Google Pay, specify the
google_pay
value in 
payment_methods
. The minimum container width for displaying the payment form is 100 pixels, the minimum height is 40 pixels.
Payment via single method: Google Pay
In this mode, Google Pay cannot be saved for recurring payments. If you specify
save_payment_method
with the
true
value, the button will not be displayed, and you will see the error
no_payment_methods_to_display
. If 
save_payment_method
is not specified or specified with the value
false
, the button will be displayed, but YooMoney will not save this method.
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['google_pay']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>
 
YooMoney
To display the form for payment via YooMoney wallet, from linked cards, or with bonus points, specify the
yoo_money
value in 
payment_methods
. The minimum container width for displaying the payment form is 280 pixels.
Payment via single method: YooMoney
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['yoo_money']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>
 
Sberbank Online/SberPay
To display the form for payment via Sberbank Online/SberPay, specify the
sberbank
value in 
payment_methods
. The minimum container width for displaying the payment form is 280 pixels.
Payment via single method: SberPay
Sberbank Online and SberPay cannot be saved for recurring payments. If you specify
save_payment_method
with the
true
value during payment creation, you will see the
no_payment_methods_to_display
error, and the user will get a technical error notification.
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['sberbank']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>
 
Payment method combinations
You can send two types of payment method combinations: Apple Pay and Google Pay, and bank card with Apple Pay and Google Pay. In this case, payment methods will be displayed on top of each other.
To use a payment method combination, specify their codes separated by commas.
Only the following codes can be sent simultaneously:
bank_card
,
apple_pay
, and
google_pay
. If you send a combination of other payment methods, the widget will return the
invalid_combination_of_payment_methods
error.
Payment method combinations: bank card with Apple Pay and Google Pay
Payment method combinations: Apple Pay and Google Pay
In this mode, only bank cards can be saved for recurring payments when you use conditional saving for payment methods.
If the payment is unsuccessful, the widget displays an error message to the user and prompts to try paying again. If you’d like to interact with the user after each unsuccessful payment attempt on your own, contact your YooMoney manager.
JavaScript
<script>
//Widget initialization. All parameters are required except for the customization object.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Token that must be obtained from YooMoney before the payment process
    return_url: 'https://example.com', //URL to the payment completion page

    //Widget customization
    customization: {
        //Selection of payment method for display
        payment_methods: ['bank_card', 'apple_pay', 'google_pay']
    },
    error_callback: function(error) {
        //Processing of initialization errors
    }
});

//Display of payment form in the container
checkout.render('payment-form');
</script>

Do you have any questions or comments regarding the documentation?

We can set up a call and discuss them: we'll help you solve the problem and you'll help us understand what we need to improve. To do that, share your contact information and select the time.
Yes, I'd like to set up a meeting
 
See also
Checkout.jsReference for widgetEnabling payment methods in the widget