Бейджи Яндекс Пэй

Примечание

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

Что такое бейджи

Бейджи — небольшие элементы интерфейса, которые содержат информацию о кешбэке Плюса или платежах Яндекс Сплит. Рекомендуем размещать бейджи в каталоге товаров:

Универсальный бейдж (ultimate)

Универсальный бейдж (ultimate) — это дебетовый бейдж, который отображает персонализированное предложение для пользователя, в том числе кешбэк или скидку. Бейдж также можно использовать для продвижения конкретного товара или услуги на сайте.

Примечание

Ultimate-бейдж — это улучшенная версия бейджа cashback.

Виды бейджа
Фиксированные проценты
Плавающие проценты
Абсолютное значение
Кешбэк

Бейдж может быть разного цвета:

Цвет бейджа	Внешний вид
Белый
Зеленый
Красный

При интеграции можно указать, какой цвет универсального бейджа будет основным. Обратитесь для этого в поддержку.

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

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

Параметры бейджа

Параметр	Значение	Внешний вид
Тип бейджа
`type`	`ultimate`
`type`	`cashback`
`type`	`bnpl`
Стоимость товара
`amount`	Строка
Merchant ID
`merchantId`/`merchant-id`	Ваш `merchantId`, полученный при регистрации в Яндекс Пэй
Размер бейджа
`size`	`s`
`size`	`m`
`size`	`l`
Тема бейджа
`theme`	`light`
`theme`	`dark`
Вариант отображения бейджа (при type="bnpl")
`variant`	`simple`
`variant`	`detailed`
Вариант отображения бейджа (при type="cashback")
`variant`	`default`
`variant`	`compact`
Цвет бейджа (при type="bnpl")
`color`	`primary`
`color`	`green`
`color`	`grey`
`color`	`transparent`
Цвет бейджа (при type="cashback")
`color`	`primary`
`color`	`grey`
`color`	`transparent`
Расположение бейджа (при type="ultimate")
`source`	`main`, `listing`, `item`, `cart`, `checkout`, `other`
Уникальные параметры (при type="ultimate")
`sku-id`	Уникальный ID продукта

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

Подключение

Важно

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

Бейдж Сплита может не отображаться:

для товаров с большой суммой;
пользователям, которым недоступен Сплит.

Для подключения бейджей воспользуйтесь одним из способов:

Тег yandex-pay-badge

Метод SDK

<div>
    <yandex-pay-badge
        type="bnpl"
        amount="2000.00"
        size="l"
        variant="detailed"
        color="primary"
        merchant-id="a5f49c84-0baa-41e1-814f-6f99746a6987"
    />
</div>

YaPay.mountBadge(
    document.querySelector('<selector>'),
    {
        type: 'bnpl',
        amount: '2000.00',
        size: 'l',
        variant: 'detailed',
        color: 'primary',
        merchantId: 'a5f49c84-0baa-41e1-814f-6f99746a6987',
    }
)

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

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

Примечание

Размер лимита Сплита может варьироваться в зависимости от результатов скоринга — оценки надежности клиента на основе его активности в сервисах Яндекса и других условий.

Как перейти с cashback-бейджа на ultimate

Измените тип бейджа (type) с cashback на ultimate.
Добавьте поле source, которое соответствует месту расположения бейджа.
Удалите поле color — будут использоваться настроенные варианты бейджей по merchant‑id и source.

Было

<yandex-pay-badge
  merchant-id="<YOUR_MERCHANT_ID>"
  type="cashback"
  amount="1000.00"
  size="l"
  variant="default"
  theme="light"
  align="left"
  color="primary"
/>

Стало

<yandex-pay-badge
  merchant-id="<YOUR_MERCHANT_ID>"
  type="ultimate"
  amount="1000.00"
  size="l"
  variant="default"
  theme="light"
  align="left"
  source="cart"
  sku-id="<MERCHANT_UNIQUE_PRODUCT_ID>"
/>

Была ли статья полезна?

Виджеты

Обновление стоимости заказа