---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.5
alternate:
  - https://pay.yandex.ru/docs/ru/custom/web-sdk/badges.md
  - href: ru/custom/web-sdk/badges.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
title: "Бейджи Яндекс\_Пэй\_— брендирование платежных форм | Документация"
description: "Используйте официальные бейджи Яндекс\_Пэй на сайте. Иконки, логотипы и элементы брендинга для повышения доверия покупателей."
---
> **Documentation Index:** Fetch the complete configuration index at https://pay.yandex.ru/docs/ru/llms.txt


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

{% note info %}

Вы находитесь в разделе, посвященном Web SDK. Если вы используете мобильные устройства, перейдите в соответствующий [раздел](https://pay.yandex.ru/docs/ru/custom/front-index.yaml).

{% endnote %}

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

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

<!-- TODO: w-sdk-badges-1 -->

<div class="grid-container-badges">
  <div class="grid-item-badges">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/badge-example.png" alt="Пример бейджа" width="50%">
  </div>
</div>

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

<!-- TODO: w-sdk-badges-2 -->

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

{% note info %}

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

{% endnote %}

| **Виды бейджа**         |                                                                                             |
|------------------------|---------------------------------------------------------------------------------------------|
| Фиксированные проценты | ![Бейдж Ultimate с фиксированными процентами](../_assets/badges/type-ultimate-fix-percentages.png){width=320}     |
| Плавающие проценты     | ![Бейдж Ultimate с плавающими процентами](../_assets/badges/type-ultimate-float-percentages.png){width=320} |
| Абсолютное значение    | ![Бейдж Ultimate с абсолютным значением](../_assets/badges/type-ultimate-absolute.png){width=320}                   |
| Кешбэк                 | ![Бейдж Ultimate с кешбэком](../_assets/badges/type-ultimate-cashback.png){width=320}                   |

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

| **Цвет бейджа**        | **Внешний вид**                                                                             |
|------------------------|---------------------------------------------------------------------------------------------|
| Белый                  | ![Бейдж Ultimate, белый цвет](../_assets/badges/type-ultimate-fix-percentages.png){width=320}         |
| Зеленый                | ![Бейдж Ultimate, зеленый цвет](../_assets/badges/type-ultimate-fix-percentages-green.png){width=320}   |
| Красный                | ![Бейдж Ultimate, красный цвет](../_assets/badges/type-ultimate-fix-percentages-red.png){width=320}       |

При интеграции можно указать, какой цвет универсального бейджа будет основным. Обратитесь для этого в [поддержку](https://pay.yandex.ru/docs/ru/support.md).

## Интерактивное демо {#example}

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

<!-- source: ru/custom/web-sdk/_snippets/badges--custom-element.mdx -->
<!-- markdownlint-disable -->

<div class="ypd-preview">
    <a href="https://yastatic.net/s3/pay-static/docs/v46.0.0/custom/badges--custom-element/index.html" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V3h-6c-.55 0-1 .45-1 1z"></path></svg>
    </a>
    <iframe src="https://yastatic.net/s3/pay-static/docs/v46.0.0/custom/badges--custom-element/index.html" style="height: 390px"></iframe>
</div>
<!-- endsource: ru/custom/web-sdk/_snippets/badges--custom-element.mdx -->

## Параметры бейджа {#options}

<!-- TODO: w-sdk-badges-2 -->

| Параметр                                             | Значение                                                     | Внешний вид                                                                     |
|------------------------------------------------------|--------------------------------------------------------------|---------------------------------------------------------------------------------|
| **Тип бейджа**                                       |                                                              |                                                                                 |
| `type`                                               | `ultimate`                                                   | ![Бейдж Ultimate](../_assets/badges/type-ultimate-cashback.png){width=640}                |
| `type`                                               | `cashback`                                                   | ![Бейдж с кешбэком](../_assets/badges/type-cashback.png){width=640}                         |
| `type`                                               | `bnpl`                                                       | ![Бейдж Сплита](../_assets/badges/type-bnpl.png){width=640}                                |
| **Стоимость товара**                                 |                                                              |                                                                                 |
| `amount`                                             | Строка                                                       |                                                                                 |
| **Merchant ID**                                      |                                                              |                                                                                 |
| `merchantId`/`merchant-id`                           | Ваш `merchantId`, полученный при регистрации в Яндекс Пэй |                                                                                 |
| **Размер бейджа**                                    |                                                              |                                                                                 |
| `size`                                               | `s`                                                          | ![Бейдж, размер S](../_assets/badges/size-s.png){width=640}                             |
| `size`                                               | `m`                                                          | ![Бейдж, размер M](../_assets/badges/type-bnpl.png){width=640}                         |
| `size`                                               | `l`                                                          | ![Бейдж, размер L](../_assets/badges/size-l.png){width=640}                             |
| **Тема бейджа**                                      |                                                              |                                                                                 |
| `theme`                                              | `light`                                                      | ![Бейдж, светлая тема](../_assets/badges/type-bnpl-theme-light.png){width=640}                        |
| `theme`                                              | `dark`                                                       | ![Бейдж, темная тема](../_assets/badges/type-bnpl.png){width=640}                           |
| **Вариант отображения бейджа (при type="bnpl")**     |                                                              |                                                                                 |
| `variant`                                            | `simple`                                                     | ![Бейдж, вариант Simple](../_assets/badges/variant-simple.png){width=640}                    |
| `variant`                                            | `detailed`                                                   | ![Бейдж, вариант Detailed](../_assets/badges/type-bnpl.png){width=640}                       |
| **Вариант отображения бейджа (при type="cashback")** |                                                              |                                                                                 |
| `variant`                                            | `default`                                                    | ![Бейдж, вариант Default](../_assets/badges/type-cashback.png){width=640}                    |
| `variant`                                            | `compact`                                                    | ![Бейдж, вариант Compact](../_assets/badges/variant-compact.png){width=640}                  |
| **Цвет бейджа (при type="bnpl")**                    |                                                              |                                                                                 |
| `color`                                              | `primary`                                                    | ![Бейдж, основной цвет](../_assets/badges/type-bnpl.png){width=640}                        |
| `color`                                              | `green`                                                      | ![Бейдж, зеленый цвет](../_assets/badges/type-bnpl-green.png){width=640}                    |
| `color`                                              | `grey`                                                       | ![Бейдж, серый цвет](../_assets/badges/type-bnpl-grey.png){width=640}                      |
| `color`                                              | `transparent`                                                | ![Бейдж, прозрачный цвет](../_assets/badges/type-bnpl-transparent.png){width=640}        |
| **Цвет бейджа (при type="cashback")**                |                                                              |                                                                                 |
| `color`                                              | `primary`                                                    | ![Бейдж кешбэка, основной цвет](../_assets/badges/type-cashback.png){width=640}                 |
| `color`                                              | `grey`                                                       | ![Бейдж кешбэка, серый цвет](../_assets/badges/type-cashback-grey.png){width=640}               |
| `color`                                              | `transparent`                                                | ![Бейдж кешбэка, прозрачный цвет](../_assets/badges/type-cashback-transparent.png){width=640} |
| **Расположение бейджа (при type="ultimate")**        |                                                              |                                                                                 |
| `source`                                             | `main`, `listing`, `item`, `cart`, `checkout`, `other`       |                                                                                 |
| **Уникальные параметры (при type="ultimate")**       |                                                              |                                                                                 |
| `sku-id`                                             | Уникальный ID продукта                                       |                                                                                 |

## Работа с бейджами {#mount}

**Подключение**

{% note warning %}

Перед началом работы [подключите SDK](https://pay.yandex.ru/docs/ru/custom/web-sdk/index.md#include-sdk).

{% endnote %}

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

- для товаров с большой суммой;
- пользователям, которым недоступен [Сплит](https://split.yandex.ru).

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

{% list tabs %}

- Тег yandex-pay-badge

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

- Метод SDK

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

{% endlist %}

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

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

<!-- source: ru/_includes/split-limit.md -->
{% note info %}

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

{% endnote %}
<!-- endsource: ru/_includes/split-limit.md -->

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

<!-- TODO: w-sdk-ultimate-widget-2 -->

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

**Было**

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

**Стало**

```html
<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>"
/>
```