Payment widgets Yandex Pay
The Yandex Pay widget enables you to embed into your site a payment button along with accompanying products that collectively increase the conversion rate: pay in installments, delivery notifications, and cashback info.
You can set up the layout and behavior for the payment widget.
Note
Before setting up the payment widget, you need to connect Yandex Pay.
Mounting the widget
Adding to the DOM
paymentSession.mountWidget(
document.querySelector('<selector>'),
{ widgetType: YaPay.WidgetType.BnplPreview }
)
Removing from the DOM
paymentSession.unmountWidget(
document.querySelector('<selector>'),
)
Widget parameters
| Parameter | Value | Layout |
|---|---|---|
| Widget type | ||
widgetType |
YaPay.WidgetType.Simple |
 |
widgetType |
YaPay.WidgetType.BnplOffer |
  |
widgetType |
YaPay.WidgetType.BnplRequired |
 |
widgetType |
YaPay.WidgetType.BnplPreview |
 |
widgetType |
YaPay.WidgetType.Info |
   |
| Button theme | ||
buttonTheme |
YaPay.ButtonTheme.Black (default) |
|
buttonTheme |
YaPay.ButtonTheme.White |
|
buttonTheme |
YaPay.ButtonTheme.WhiteOutline |
|
| Rounding the widget | ||
borderRadius |
0 - 24 |
|
| Yandex Split enabled by default | ||
bnplSelected |
true |
|
bnplSelected |
false (default) |
|
Widget dimensions
The widget adapts to the size of its host container. However, you can use CSS to specify the widget container width.
Tip
In the presence of accompanying products (pay in installments, and so on), the widget can change its height.
The widget height may vary between 140px and 460px, please bear this in mind when adding the widget.
<style>
.ya-pay-widget {
width: 360px !important;
}
</style>
Example
Warning
The Yandex Pay widget's layout can vary depending on the current browser, scoring result, login status at ya.ru, presence of an avatar or linked bank card.