---
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: en/custom/web-sdk/buttons.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://pay.yandex.ru/docs/en/llms.txt

# Payment buttons Yandex Pay

Using the Yandex Pay payment button, the user can click to pay for the order on your site or add their details to the order.

You can set up the layout and behavior for the payment button.

{% note info %}

Before setting up the payment button, you need to [connect Yandex Pay](https://pay.yandex.ru/docs/en/custom/web-sdk/index.md).

{% endnote %}

## How to add the button {#mount}

**Adding to the DOM**

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

**Removing from the DOM**

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

## Button parameters {#options}

| Parameter | Value | Layout |
| ----------- | ----------- | ----------- |
| **Text** | | |
| `type` | `YaPay.ButtonType.Pay` | ![Pay Button](_assets/buttons/type--pay.png =x62) |
| **Layout** | | |
| `theme` | `YaPay.ButtonTheme.Black` | ![Black Simple Button](_assets/buttons/theme--black.png =x62) <br /> ![Black Personalized Button](_assets/buttons/theme--black--pers.png =x62) |
| `theme` | `YaPay.ButtonTheme.White` | ![White Simple Button](_assets/buttons/theme--white.png =x62) <br /> ![White Personalized Button](_assets/buttons/theme--white--pers.png =x62) |
| `theme` | `YaPay.ButtonTheme.WhiteOutline` | ![WhiteOutline Simple Button](_assets/buttons/theme--white-outline.png =x62) <br /> ![WhiteOutline Personalized Button](_assets/buttons/theme--white-outline--pers.png =x62) |
| **Size** | | |
| `width` | `YaPay.ButtonWidth.Auto` | This parameter enables **fixed size** of the Yandex Pay button <br /> ![Width Auto Button](_assets/buttons/width--auto.png =x62) |
| `width` | `YaPay.ButtonWidth.Max` | This parameter enables **adaptive size** of the Yandex Pay button <br /> ![Width L Button](_assets/buttons/width--max-l.png =x62) <br /> ![Width M Button](_assets/buttons/width--max-m.png =x62) <br /> ![Width S Button](_assets/buttons/width--max-s.png =x62) <br /> ![Width XS Button](_assets/buttons/width--max-xs.png =x62) |

## Advanced layout customization {#custom}

You can use CSS styles to change the button's height and corner radius.

{% note tip %}

To make the button adaptively expand or shrink to fit the parent container, use the `YaPay.ButtonWidth.Max` value for the `width` parameter.
You can also explicitly specify its width using CSS.

{% endnote %}

```html

```

## Example {#example}

{% note warning %}

The Yandex Pay button's layout can vary depending on the current browser, login status at ya.ru, presence of an avatar or a linked bank card.

{% endnote %}

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

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