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

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

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

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

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

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

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

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

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

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

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

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

Параметр	Значение	Внешний вид
Тип бейджа
type	ultimate
type	cashback
type	bnpl
Стоимость товара
amount	Строка
Merchant ID
merchantId/merchant-id	Ваш merchantId, полученный при регистрации в Яндекс Пэй
Размер бейджа
size	s
size	m
size	l
Тема бейджа
theme	light
theme	dark
Товарный контекст
cart	JSON-строка с товарами в корзине
product-id	Уникальный ID товара
sku-id	Устаревшее название уникального ID товара. Используйте product-id
Вариант отображения бейджа (при 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

Товарный контекст

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

Бейдж для корзины

На странице корзины передавайте cart со всеми товарами.

cart — JSON-строка с непустым массивом объектов следующего формата:

<yandex-pay-badge
    type="bnpl"
    amount="4480.00"
    merchant-id="<YOUR_MERCHANT_ID>"
    cart='[{"product_id":"YOUR_UNIQUE_PRODUCT_ID_1","total":"2490.00"},{"product_id":"YOUR_UNIQUE_PRODUCT_ID_2","total":"1990.00"}]'
/>

YaPay.mountBadge(
    document.querySelector('<selector>'),
    {
        type: 'bnpl',
        amount: '4480.00',
        merchantId: '<YOUR_MERCHANT_ID>',
        cart: JSON.stringify([
            { product_id: 'YOUR_UNIQUE_PRODUCT_ID_1', total: '2490.00' },
            { product_id: 'YOUR_UNIQUE_PRODUCT_ID_2', total: '1990.00' },
        ]),
    }
)

Бейдж для одного товара вне корзины

Для бейджа одного товара вне корзины можно передать его идентификатор через product-id или использовать cart с одной позицией — по аналогии с примером в разделе «Бейдж для корзины».

<yandex-pay-badge
    type="bnpl"
    amount="2490.00"
    merchant-id="<YOUR_MERCHANT_ID>"
    product-id="YOUR_UNIQUE_PRODUCT_ID"
/>

YaPay.mountBadge(
    document.querySelector('<selector>'),
    {
        type: 'bnpl',
        amount: '2490.00',
        merchantId: '<YOUR_MERCHANT_ID>',
        productId: 'YOUR_UNIQUE_PRODUCT_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"
  cart='[{"product_id":"YOUR_UNIQUE_PRODUCT_ID_1","total":"600.00"},{"product_id":"YOUR_UNIQUE_PRODUCT_ID_2","total":"400.00"}]'
/>

Стало

<yandex-pay-badge
  merchant-id="<YOUR_MERCHANT_ID>"
  type="ultimate"
  amount="1000.00"
  size="l"
  variant="default"
  theme="light"
  align="left"
  source="cart"
  cart='[{"product_id":"YOUR_UNIQUE_PRODUCT_ID_1","total":"600.00"},{"product_id":"YOUR_UNIQUE_PRODUCT_ID_2","total":"400.00"}]'
/>