Виджеты оплаты 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 Mini Auth
widgetType YaPay.WidgetType.Compact (default) Compact Auth
widgetType YaPay.ButtonType.BnplOffer BnplOffer Auth Off
BnplOffer Auth On
widgetType YaPay.ButtonType.BnplRequired BnplRequired Auth
Тема виджета Только для YaPay.WidgetType.Mini
widgetTheme YaPay.WidgetTheme.Light (default) Mini Auth
widgetTheme YaPay.WidgetTheme.Dark Compact Auth
Тема кнопки
buttonTheme YaPay.ButtonTheme.Black (default)
buttonTheme YaPay.ButtonTheme.White
buttonTheme YaPay.ButtonTheme.WhiteOutline
Скругление виджета
borderRadius 0 - 24
Выбор Сплита по умолчанию
bnplSelected true BnplOffer Auth On
bnplSelected false (default) BnplOffer Auth Off

Размеры виджета

Виджет принимает размеры ширину контейнера, в который он встраивается.
Но с помощью CSS стилей можно указать ширину контейнера виджета.

Совет

В зависимости от наличия сопроводительных продуктов (оплата в рассрочку и т.д.), виджет может менять свою высоту.
По высоте виджет может занимать от 140px до 460px, учитывайте эту особенности при его установке.

<style>
  .ya-pay-widget {
    width: 360px !important;
  }
</style>

Пример

Важно

Внешний вид виджета Yandex Pay может меняться в зависимости от текущего браузера, результата скоринга, авторизации на ya.ru, наличия аватара или привязанной банковской карты.

В этой статье: