Payment buttons Yandex Pay

Using the Yandex Pay payment button, the user can click to pay for the order on your site or add their details to the order.

You can set up the layout and behavior for the payment button.

Note

Before setting up the payment button, you need to connect Yandex Pay.

How to add the button

Adding to the DOM

paymentSession.mountButton(
    document.querySelector('<selector>'),
    {
        type: YaPay.ButtonType.Pay,
        theme: YaPay.ButtonTheme.Black,
        width: YaPay.ButtonWidth.Auto,
    }
)

Removing from the DOM

paymentSession.unmountButton(
    document.querySelector('<selector>'),
)

Button parameters

Parameter Value Layout
Text
type YaPay.ButtonType.Pay Pay Button
Layout
theme YaPay.ButtonTheme.Black Black Simple Button
Black Personalized Button
theme YaPay.ButtonTheme.White White Simple Button
White Personalized Button
theme YaPay.ButtonTheme.WhiteOutline WhiteOutline Simple Button
WhiteOutline Personalized Button
Size
width YaPay.ButtonWidth.Auto This parameter enables fixed size of the Yandex Pay button
Width Auto Button
width YaPay.ButtonWidth.Max This parameter enables adaptive size of the Yandex Pay button
Width L Button
Width M Button
Width S Button
Width XS Button

Advanced layout customization

You can use CSS styles to change the button's height and corner radius.

Tip

To make the button adaptively expand or shrink to fit the parent container, use the YaPay.ButtonWidth.Max value for the width parameter. You can also explicitly specify its width using CSS.

<style>
  .ya-pay-button {
    height: 40px !important;
    border-radius: 10px !important;
  }
</style>

Example

Warning

The Yandex Pay button's layout can vary depending on the current browser, login status at ya.ru, presence of an avatar or a linked bank card.

Previous
Connect
Next
Payment widgets