Виджеты оплаты Yandex Pay
Виджет Yandex Pay позволяет встроить на ваш сайт кнопку оплаты вместе с сопроводительными продуктами,
которые в совокупности увеличивают конверсию: оплата в рассрочку, уведомления о доставке, информация о кэшбэке.
Для виджета оплаты можно настроить внешний вид и поведение.
Примечание
Перед настройкой виджета, вам нужно подключить Yandex Pay.
Работа с виджетом
Подключение в DOM
paymentSession.mountWidget(
document.querySelector('<selector>'),
{ widgetType: YaPay.WidgetType.Compact }
)
Удаление из DOM
paymentSession.unmountWidget(
document.querySelector('<selector>'),
)
Параметры виджета
Параметр | Значение | Внешний вид |
---|---|---|
Тип виджета | ||
widgetType |
YaPay.WidgetType.Mini |
![]() |
widgetType |
YaPay.WidgetType.Compact (default) |
![]() |
widgetType |
YaPay.ButtonType.BnplOffer |
![]() ![]() |
widgetType |
YaPay.ButtonType.BnplRequired |
![]() |
Тема виджета | Только для YaPay.WidgetType.Mini |
|
widgetTheme |
YaPay.WidgetTheme.Light (default) |
![]() |
widgetTheme |
YaPay.WidgetTheme.Dark |
![]() |
Тема кнопки | ||
buttonTheme |
YaPay.ButtonTheme.Black (default) |
|
buttonTheme |
YaPay.ButtonTheme.White |
|
buttonTheme |
YaPay.ButtonTheme.WhiteOutline |
|
Скругление виджета | ||
borderRadius |
0 - 24 |
|
Выбор Сплита по умолчанию | ||
bnplSelected |
true |
![]() |
bnplSelected |
false (default) |
![]() |
Размеры виджета
Виджет принимает размеры ширину контейнера, в который он встраивается.
Но с помощью CSS стилей можно указать ширину контейнера виджета.
Совет
В зависимости от наличия сопроводительных продуктов (оплата в рассрочку и т.д.), виджет может менять свою высоту.
По высоте виджет может занимать от 140px
до 460px
, учитывайте эту особенности при его установке.
<style>
.ya-pay-widget {
width: 360px !important;
}
</style>
Пример
Важно
Внешний вид виджета Yandex Pay может меняться в зависимости от текущего браузера, результата скоринга, авторизации на ya.ru, наличия аватара или привязанной банковской карты.