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

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

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

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

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

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

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

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

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

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

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

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

Параметр	Значение	Внешний вид
Тип бейджа
type	ultimate
type	bnpl
type	cashback
Стоимость товара
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 продукта

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

Подключение

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

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

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

<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

1. Измените тип бейджа (type) с cashback на ultimate.
2. Добавьте поле source, которое соответствует месту расположения бейджа.
3. Удалите поле 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>"
/>