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


# Интеграция Яндекс Пэй и Сплит
<!--
<div class="grid-container-custom1">
    <div class="grid-item-custom1">
        <h3><a href="./integration-guide">Для онлайн-магазинов (рекомендуемая)</a></h3>
        <p></p>
    </div>
    <div class="grid-item-custom1">
        <h3><a href="./integration-guide-link">Для онлайн-магазинов (без SDK)</a></h3>
        <p></p>
    </div>
    <div class="grid-item-custom1">
        <h3><a href="./pay-offline">Для офлайн-магазинов</a></h3>
        <p></p>
    </div>
    <div class="grid-item-custom1">
        <h3><a href="../cms/index">При помощи CMS-модулей</a></h3>
        <p></p>
    </div>
</div>
-->

Когда у вас большой или средний бизнес, то принимать оплату за каждый заказ вручную становится непростой задачей. Интеграция с Яндекс Пэй по [API](https://pay.yandex.ru/docs/ru/custom/back-index.yaml) поможет избежать ручного труда, а также:

- увеличить **конверсию в покупку** при помощи умных бейджей, виджетов и кнопок оплаты;
- привлечь **больше покупателей** эффективными маркетинговыми инструментами продвижения.

<!--

## Как привлечь покупателей {#attract}

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

-->

{% note tip %}

 Используйте [API Яндекс Пэй](https://pay.yandex.ru/docs/ru/custom/back-index.yaml) вместе с готовыми [библиотеками SDK](https://pay.yandex.ru/docs/ru/custom/front-index.yaml), которые содержат умные бейджи, виджеты и кнопки оплаты. Посмотреть, как они выглядят, можно на [демо-сайте](https://pay.yandex.ru/demo).

Такая интеграция поможет вашим клиентам выбрать удобный способ оплаты и положительно отразится на продажах — до 34% GMV и до x2.2 в среднем чеке.

{% endnote %}


Как интегрировать Яндекс Пэй и Сплит, смотрите в нашем видео:

<iframe
  frameborder="0" width="350" height="200" scrolling="no" allowfullscreen="" allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock" 
  src="https://frontend.vh.yandex.ru/player/vSarOgGxoaVY?loop=0&autoplay=1&mute=1&object_fit=cover&from=lpc">
</iframe>


## Гайд по правильной интеграции {#guide}

<!--
<div class="grid-container-custom2">
    <div class="grid-item-custom2">
        <a href="https://pay.yandex.ru/demo"><span class="button_demo">Протестировать на демо-сайте</span></a>
    </div>
    <div class="grid-item-custom2">
        <a href="https://www.figma.com/file/SHBrrv4lVRApZ9JMSpRtTJ/Кнопки-Yandex-Pay-(external)?t=BKYGF7fylvrJDrPF-6"><span class="button_demo">Посмотреть в Figma</span></a>
    </div>
</div>
-->

1. [Зарегистрируйтесь и подайте заявку](https://pay.yandex.ru/docs/ru/console/registration.md) на подключение сервиса в личном кабинете Яндекс Пэй.
1. После подключения сервиса [настройте интеграцию](https://pay.yandex.ru/docs/ru/custom/integration-guide.md) по API.
1. Подключите SDK для вашей платформы (Web или Mobile), чтобы использовать готовые умные бейджи, виджеты и кнопки оплаты.

   {% list tabs %}
  
   - Web
  
     1. [Установите](../custom/web-sdk/badges.html) [умные бейджи](*badge) в каталоге товаров.
        > _Бейджи повышают конверсию, рассказывая о возможности покупки в Сплит и показывая сумму кешбэка Плюса._
     1. [Установите](../custom/web-sdk/widgets.html) [виджеты](*widget) в карточке товара.
        > _Виджеты сохраняют вовлеченность, рассказывая об условиях покупки в Сплит и показывая сумму кешбэка Плюса._
     1. Настройте [кнопку](*checkout) **Перейти к оформлению** на экран с выбором способов оплаты.
     1. Установите два [способа](*methods) оплаты (Пэй и Сплит) с готовыми логотипами и текстом.

        {% note warning %}

        <!-- source: ru/_includes/split-fz-283.md -->
        В соответствии с Федеральным законом № 283‑ФЗ «О деятельности по предоставлению сервиса рассрочки» при использовании сервиса Сплит договор о предоставлении сервиса рассрочки с пользователем обязательно должен содержать сведения об объекте рассрочки — товарах, работах, услугах или результатах интеллектуальной деятельности, оплачиваемых в Сплит.
        <!-- endsource: ru/_includes/split-fz-283.md -->

        Поэтому в [запросе на создание заказа](https://pay.yandex.ru/docs/ru/custom/backend/yandex-pay-api/order/merchant_v1_orders-post.md) обязательно передавайте данные всех объектов рассрочки в корзине в параметре `cart.items`.

        {% endnote %}

     1. [Настройте](../custom/web-sdk/widgets.html) отображение [виджета Сплита](*split_widget) по клику на способ оплаты Сплит и [кнопки](*button) Яндекс Пэй для вызова формы для оплаты.
        > _Бейджи, виджеты и кнопки уже [настроены](https://pay.yandex.ru/docs/ru/branding.md) для адаптации к вашему сайту. Переделать эти элементы нельзя — сломаются настройки кешбэка, планы Сплита и обновления._
  
   - Mobile

     Ознакомьтесь с [готовыми продуктовыми решениями](https://pay.yandex.ru/docs/ru/custom/mobile-sdk/yandex-pay-kit/product-solutions/index.md) на основе модулей Mobile SDK, чтобы выбрать подходящий сценарий интеграции, или подключите необходимые модули [Yandex Pay Kit](https://pay.yandex.ru/docs/ru/custom/mobile-sdk/yandex-pay-kit/index.md).
    
   {% endlist %}  

6. [Расскажите](https://pay.yandex.ru/guide/about) вашим покупателям о возможностях оплаты с Яндекс Пэй.

<!--
### Шаг 1

Зарегиструйтесь в [личном кабинете](https://pay.yandex.ru/ru/docs/console/), оставьте заявку на подключение сервиса и [настройте интеграцию по API](https://pay.yandex.ru/docs/ru/custom/integration-guide.md).

### Шаг 2

<div class="grid-container-custom3">
  <div class="grid-item-text">
    <p>Установите <a href="./web-sdk/badges">умные бейджи</span></a> Сплита и/или Плюса в каталоге товаров.</p>
  </div>
  <div class="grid-item-pic">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-2.png" class="c-screenshot" width="100" alt="Умные бейджи Сплита и Плюса в каталоге товаров">
  </div>
</div>

{% note info %}

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

{% endnote %}

### Шаг 3

<div class="grid-container-custom3">
  <div class="grid-item-text">
    <p>Установите <a href="./web-sdk/widgets">виджеты</a> Сплита с графиком платежей и Плюса с суммой кешбэка в карточке товара.</p>
  </div>
  <div class="grid-item-pic">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-3.png" class="c-screenshot" width="200" alt="Виджет Сплита с графиком платежей и виджет Плюса с суммой кешбэка в карточке товара">
  </div>
</div>

{% note info %}

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

{% endnote %}

### Шаг 4

<div class="grid-container-custom3">
  <div class="grid-item-text">
    <p>Настройте кнопку **Перейти к оформлению** на экран с выбором способов оплаты.</p>
  </div>
  <div class="grid-item-pic">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-4.png" class="c-screenshot" width="200" alt="Кнопка «Перейти к оформлению» на экране выбора способов оплаты">
  </div>
</div>

### Шаг 5

<div class="grid-container-custom3">
  <div class="grid-item-text">
    <p>Установите два способа оплаты: Пэй и Сплит с логотипами и готовым текстом.</p>
  </div>
  <div class="grid-item-pic">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-5.png" class="c-screenshot" width="200" alt="Два способа оплаты — Пэй и Сплит — с логотипами и готовым текстом">
  </div>
</div>

### Шаг 6

<div class="grid-container-custom3">
  <div class="grid-item-text">
    <p>По клику на способ оплаты **Сплит** настройте отборажение виджета Сплита и кнопки Яндекс Пэй для вызова формы для оплаты.</p>
  </div>
  <div class="grid-item-pic">
    <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-6.png" class="c-screenshot" width="200" alt="Виджет Сплита и кнопка Яндекс Пэй для вызова формы оплаты">
  </div>
</div>

{% note info %}

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

{% endnote %}

### Шаг 7

Обязательно [расскажите](https://pay.yandex.ru/guide/about) вашим покупателям о подключении Яндекс Пэй!

<!--

Эти небольшие элементы фронтенда помогут вашим пользователям удобно оплачивать покупки, а бизнесу —  увеличивать прибыль!

{% cut "**Кнопки**" %}

Кнопка оплаты Яндекс Пэй позволяет пользователю совершить оплату в одно нажатие. Обычно ее размещают в чекауте.

Изучите интерактивный пример того, как может выглядеть кнопка Яндекс Пэй в вашем интерфейсе (клик по кнопке ведет на тестовую страницу оплаты):

{% include notitle [_](./web-sdk/_snippets/buttons--v4.mdx) %}

Подробнее о настройках читайте в [документации](https://pay.yandex.ru/docs/ru/custom/front-index.yaml).

{% endcut %}

{% cut "**Бейджи**" %}

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

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

{% include notitle [_](./web-sdk/_snippets/badges--custom-element.mdx) %}

Подробнее о настройках читайте в [документации](https://pay.yandex.ru/docs/ru/custom/front-index.yaml).

{% endcut %}

{% cut "**Виджеты**" %}

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

Изучите интерактивный пример того, как может выглядеть виджет Яндекс Пэй в вашем интерфейсе. (клик по виджету ведет на тестовую страницу оплаты):

{% include notitle [_](./web-sdk/_snippets/widgets--v4.mdx) %}

Подробнее о настройках читайте в [документации](https://pay.yandex.ru/docs/ru/custom/front-index.yaml).

{% endcut %}

<div class="grid-container-custom2">
    <div class="grid-item-custom2">
        <a href="https://www.figma.com/file/SHBrrv4lVRApZ9JMSpRtTJ/Кнопки-Yandex-Pay-(external)?t=BKYGF7fylvrJDrPF-6"><span class="button_demo">Посмотреть в Figma</span></a>
    </div>
    <div class="grid-item-custom2">
        <a href="https://pay.yandex.ru/demo"><span class="button_demo">Протестировать на демо-сайте</span></a>
    </div>
</div>

{% cut "Рекомендации" %}

Общие рекомендации по размещению каждого из элементов можно также представить одной картинкой:

![scheme](../_assets/integration.png)

{% endcut %}

-->

## Для чего еще использовать API? {#whatelse}

Можно использовать [API Яндекс Пэй](https://pay.yandex.ru/docs/ru/custom/back-index.yaml) отдельно от SDK, чтобы:

- получать и пользоваться [прямой ссылкой на платежную форму](https://pay.yandex.ru/docs/ru/custom/integration-guide-link.md) Яндекс Пэй на свое усмотрение;
- принимать оплату в [офлайн-магазине](https://pay.yandex.ru/docs/ru/custom/pay-offline.md) (при помощи QR-кода);
- устанавливать или разрабатывать [готовые модули](https://pay.yandex.ru/docs/ru/cms/index.md);
- автоматизировать [возврат платежей](https://pay.yandex.ru/docs/ru/custom/refund-payments.md).

{% note info %}

Если вы пока не готовы к интеграции по API, но платежи принимать нужно уже сейчас, сформируйте [ссылку на оплату](https://pay.yandex.ru/docs/ru/console/create-link.md) прямо в личном кабинете и отправьте ее покупателю.

Обратите внимание, что в данном случае реквизиты платежа нужно заполнять вручную, а все перечисленные и другие преимущества интеграции по API теряются.

{% endnote %}



[*badge]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/badge-example.png" width="300" alt="Пример умного бейджа Яндекс Пэй в каталоге товаров">

[*widget]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/widget-example.png" width="300" alt="Пример виджета Яндекс Пэй в карточке товара">

[*checkout]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-4.png" width="300" alt="Кнопка «Перейти к оформлению» на экране выбора способов оплаты">

[*methods]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/step-5.png" width="300" alt="Два способа оплаты — Пэй и Сплит — с логотипами и готовым текстом">

[*split_widget]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/split-widget-example.png" width="300" alt="Пример виджета Сплита с графиком платежей">

[*button]: <img src="https://yastatic.net/s3/doc-binary/src/support/pay/button-example.png" width="300" alt="Пример кнопки Яндекс Пэй для оплаты">