Виджеты Яндекс Пэй

Примечание

Вы находитесь в разделе, посвященном Web SDK. Если вы используете мобильные устройства, перейдите в соответствующий раздел.

Что такое виджет

Пример виджета Сплита
Пример виджета

Виджет Яндекс Пэй увеличивает конверсию засчёт отображения информации об оплате в рассрочку или размере кешбэка:

Интерактивное демо

Посмотрите, какие виджеты имеются в арсенале Яндекс Пэй, и как внешний вид зависит от параметров.

Важно

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

Параметры виджета

Параметр Значение Внешний вид
Тип виджета
widgetType YaPay.WidgetType.Simple BnplPreview Default
widgetType YaPay.WidgetType.BnplPreview BnplPreview Default
widgetType YaPay.WidgetType.BnplOffer BnplOffer Auth Off

BnplOffer Auth On
widgetType YaPay.WidgetType.BnplRequired BnplRequired Auth
widgetType YaPay.WidgetType.Info Info full
Info split
Info cashback
Скругление виджета
borderRadius 0 - 24
Выбор Сплита по умолчанию
bnplSelected true BnplOffer Auth On
bnplSelected false (default) BnplOffer Auth Off

Работа с виджетом

Важно

Перед перед началом работы подключите SDK.

Подключение в DOM

paymentSession.mountWidget(
    document.querySelector('<selector>'),
    { widgetType: YaPay.WidgetType.BnplPreview }
)

Удаление из DOM

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

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

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

Совет

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

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

Виджет оплаты только через Сплит

Вы можете указать в качестве способа оплаты только оплату через Сплит. В таком случае, если пользователю недоступна оплата через Сплит, виджет будет скрыт.

Совет

Скрытие виджета стоит учитывать при построении дизайна и верстки приложения.

Чтобы включить режим оплаты только через Сплит, добавьте в PaymentData объект строку availablePaymentMethods со списком из одного метода оплаты 'SPLIT':

const paymentData = {
    // ... прочие параметры
    availablePaymentMethods: ['SPLIT'],
};

Логика отображения виджета

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

Пример расчёта

Для клиента с лимитом Сплита 20000 р. стоимость покупки составила 28600 р. При расчете Сплита на четыре платежа в рамках лимита сумма каждого платежа составит 5000 р.

А так как превышающая лимит сумма составляет 28600 - 20000 = 8600 р., то, согласно логике отображения виджета, она будет добавлена к первому платежу. Таким образом, сумма, которую клиент должен будет оплатить в момент покупки в Сплит, составит 8600 + 5000 = 13600 р., как показано на рисунке.

Split Widget Over Limit

Примечание

Размер лимита Сплита может различаться в зависимости от типа и настроек браузера, типа операционной системы и устройства клиента.

Предыдущая
Следующая