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


# Кнопки оплаты Яндекс Пэй

{% note info %}

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

{% endnote %}

## Что такое кнопка оплаты

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

Кнопка оплаты Яндекс Пэй позволяет пользователю совершить оплату на вашем сайте в один клик. Вид кнопки зависит от доступных для использования методов оплаты, которые указаны в объекте `PaymentData` в `availablePaymentMethods` при подключении формы оплаты:

- доступна полная оплата и Сплит:

  ![image](../_assets/pay-button/button-split-cashback-xl-black.svg)

- доступен только Сплит:

  ![image](../_assets/pay-button/button-split-xl-black.svg)

Для кнопки можно настроить внешний вид и поведение.

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

Посмотрите, какие кнопки имеются в арсенале Яндекс Пэй, и как внешний вид зависит от [параметров](#options).

{% note warning %}

Внешний вид кнопки Яндекс Пэй может также меняться в зависимости от текущего браузера или авторизации на ya.ru.

{% endnote %}

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

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

<div class="ypd-preview">
    <a href="https://yastatic.net/s3/pay-static/docs/v46.0.0/custom/buttons--v4/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/buttons--v4/index.html" style="height: 500px"></iframe>
</div>
<!-- endsource: ru/custom/web-sdk/_snippets/buttons--v4.mdx -->

## Параметры кнопки {#options}


 #|
|| **Параметр** | **Значение**                      | **Внешний вид**                                                         ||
|| **Тип**      |                                   |                                                                         ||
|| `type`       | `YaPay.ButtonType.Pay`            | ![Black XL Button](../_assets/pay-button/button-split-cashback-xl-black.svg) <br /> ![Black Split XL Button](../_assets/pay-button/button-split-xl-black.svg) ||
|| **Вид**      |                                   |                                                                         ||
|| `theme`      | `YaPay.ButtonTheme.Black`         |  ![Black XL Button](../_assets/pay-button/button-split-cashback-xl-black.svg) <br /> ![Black Split XL Button](../_assets/pay-button/button-split-xl-black.svg) ||
|| `theme`      | `YaPay.ButtonTheme.White`         | ![White XL Button](../_assets/pay-button/button-split-cashback-xl-white.svg) <br /> ![White Split XL Button](../_assets/pay-button/button-split-xl-white.svg)||
|| `theme`      | `YaPay.ButtonTheme.WhiteOutlined` |![White Outline XL Button](../_assets/pay-button/button-split-cashback-xl-white-outline.svg) <br /> ![White Split Outline XL Button](../_assets/pay-button/button-split-xl-white-outline.svg) ||
|| **Размер**   |                                   |                                                                         ||
|| `width`      | `YaPay.ButtonWidth.Auto`          | Параметр включает **фиксированный размер** кнопки Яндекс Пэй:
                                                      ![Black XL Button Cashback Split](../_assets/pay-button/button-split-cashback-xl-black.svg) <br /> ![Black XL Button Split](../_assets/pay-button/button-split-xl-black.svg) ||
|| `width`      | `YaPay.ButtonWidth.Max`           | Параметр включает **адаптивный размер** кнопки Яндекс Пэй:
                                                      ![Black XL Button Cashback Split](../_assets/pay-button/button-split-cashback-xl-black.svg) <br /> ![Black XL Button Split](../_assets/pay-button/button-split-xl-black.svg)
                                                      ![Black L Button Cashback Split](../_assets/pay-button/button-split-cashback-l-black.svg) <br /> ![Black L Button Split](../_assets/pay-button/button-split-l-black.svg)
                                                      ![Black M Button Cashback Split](../_assets/pay-button/button-split-cashback-m-black.svg) <br /> ![Black M Button Split](../_assets/pay-button/button-split-m-black.svg) <br />
                                                       ![Black S Button Cashback Split](../_assets/pay-button/button-split-cashback-s-black.svg) <br /> ![Black S Button Split](../_assets/pay-button/button-split-s-black.svg) ||
|#



## Работа с кнопкой {#mount}

{% note info %}

Перед настройкой кнопки оплаты, вам нужно [подключить SDK](https://pay.yandex.ru/docs/ru/custom/web-sdk/index.md).

{% endnote %}

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

```javascript
paymentSession.mountButton(
    document.querySelector('<selector>'),
    {
        type: YaPay.ButtonType.Pay,
        theme: YaPay.ButtonTheme.Black,
        width: YaPay.ButtonWidth.Auto,
    }
)
```

**Удаление из DOM**

```javascript
paymentSession.unmountButton(
    document.querySelector('<selector>'),
)
```

## Дополнительная кастомизация внешнего вида {#custom}

Поменять высоту кнопки и ее скругление можно с помощью CSS стилей.

{% note tip %}

Чтобы кнопка стала адаптивной и растягивалась под размер родительского контейнера, укажите для параметра `width` значение `YaPay.ButtonWidth.Max`.
Вы также можете явно указать ее ширину через CSS.

{% endnote %}

```html

```