Configuring payment method display options
Discussed individually: contact your YooMoney manager.
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 288 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>
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 288 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>
SberPay
To display the form for payment via SberPay, specify the 
sberbank
value in 
payment_methods
. The minimum container width for displaying the payment form is 288 pixels.
Payment via single method: SberPay
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>
FPS (Faster Payments System)
To display the form for payment via FPS, specify the 
sbp
value in 
payment_methods
. The minimum container width for displaying the payment form is 288 pixels.
You can't save the FPS method for recurring payments. If
save_payment_method
isn't specified or if it's specified with the 
true
value, the payment method won't be displayed, and you'll see the 
no_payment_methods_to_display
error.
Payments via FPS on PC are not the same as on mobile devices. For payments on PC, the widget creates a QR code that should be scanned with a phone:
Payment via single method (on PC): FPS
The Go to the app button is displayed during payments on mobile devices:
Payment via single method (on mobile device): FPS
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: ['sbp']
    },
    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