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


# Руководство по Web SDK

Яндекс Пэй Web SDK позволяет подключить форму оплаты заказа для вашего интернет-магазина.

{% note warning %}

Этот способ интеграции требует настройки [API](../../custom/index).

{% endnote %}

## Требования к подключению {#requirements}

<!-- source: ru/_includes/web-sdk/requirements--v4.md -->
Для установки кнопки Яндекс Пэй должны быть выполнены следующие требования:

- ваш сайт работает по протоколу HTTPS;
- политики [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) на вашем сайте разрешают использовать:


  ```http
  script-src: https://pay.yandex.ru
  frame-src: https://pay.yandex.ru
  img-src: https://pay.yandex.ru
  connect-src: https://pay.yandex.ru
  style-src: 'unsafe-inline'
  ```



- на вашем сайте отсутствуют заголовки:

  ```http
  Cross-Origin-Opener-Policy: *
  ```
<!-- endsource: ru/_includes/web-sdk/requirements--v4.md -->

## Безопасность и надежность {#safety}

<!-- source: ru/_includes/web-sdk/safety.md -->
Библиотека Яндекс Пэй WebSDK сертифицирована по стандарту [PCI DSS](https://ru.wikipedia.org/wiki/PCI_DSS).
Мы ежегодно проходим сертификацию и можем по запросу отправить вам подтверждающий сертификат.

Важно подключать WebSDK с нашего домена по ссылке `https://pay.yandex.ru/sdk/v1/pay.js`. В этом случае будет использоваться актуальная версия SDK, включающая все исправления и обновления безопасности.
<!-- endsource: ru/_includes/web-sdk/safety.md -->

## Подключение Яндекс Пэй {#connect-yandex-pay}

<!-- source: ru/_includes/web-sdk/debug.md -->
{% note info "Диагностика и отладка" %}

Для диагностики подключения к Яндекс Пэй на этапе отладки используйте консоль разработчика в браузере:

{% list tabs %}

- MacOS

  На странице формы Яндекс Пэй нажмите `Command + Option + I` и перейдите на вкладку `Console`.

- Linux/Windows

  На странице формы Яндекс Пэй нажмите `F12` или `Control + Shift + I` и перейдите на вкладку `Console`.

{% endlist %}

{% endnote %}
<!-- endsource: ru/_includes/web-sdk/debug.md -->

### Шаг 1. Подключение SDK на страницу {#include-sdk}

<!-- source: ru/_includes/web-sdk/html-include.md -->
Установите HTML-код на всех страницах, где будет размещена кнопка Яндекс Пэй, перед закрывающим тегом ` </body> `.
Передайте в атрибут `onload` название метода, который будет отвечать за инициализацию и обработку платежей.

```html

```
<!-- endsource: ru/_includes/web-sdk/html-include.md -->

### Шаг 2. Создание формы оплаты {#payment-data}

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

Форма оплаты позволяет клиенту оплатить заказ, а именно:

- выбрать способ оплаты;
- оплатить покупку.

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

<div class="ypd-preview ypd-preview_with-source">
    <a href="https://yastatic.net/s3/pay-static/docs/v46.0.0/custom/create-session--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/create-session--v4/index.html" style="height: 120px"></iframe>
</div>

```javascript
function onYaPayLoad() {
    const YaPay = window.YaPay;

    // Данные платежа
    const paymentData = {
        // Для отладки нужно явно указать `SANDBOX` окружение,
        // для продакшена параметр можно убрать или указать `PRODUCTION`
        env: YaPay.PaymentEnv.Sandbox,

        // Версия 4 указывает на тип оплаты сервисом Яндекс Пэй
        // Пользователь производит оплату на форме Яндекс Пэй,
        // и мерчанту возвращается только результат проведения оплаты
        version: 4,

        // Код валюты в которой будете принимать платежи

        currencyCode: YaPay.CurrencyCode.Rub,

        // Идентификатор продавца, который получают при регистрации в Яндекс Пэй
        merchantId: '<YOUR_MERCHANT_ID>',

        // Сумма к оплате
        // Сумма которая будет отображена на форме зависит от суммы переданной от бэкенда
        // Эта сумма влияет на отображение доступности Сплита
        totalAmount: '15980.00',

        // Доступные для использования методы оплаты
        // Доступные на форме способы оплаты также зависят от информации переданной от бэкенда
        // Данные передаваемые тут влияют на внешний вид кнопки или виджета
        availablePaymentMethods: ['CARD', 'SPLIT'],
    };

    // Обработчик на клик по кнопке
    // Функция должна возвращать промис которые резолвит ссылку на оплату полученную от бэкенда Яндекс Пэй
    // Подробнее про создание заказа: https://pay.yandex.ru/ru/docs/custom/backend/yandex-pay-api/order/merchant_v1_orders-post
    async function onPayButtonClick() {
        // Создание заказа...
        // и возврат URL на оплату вида 'https://pay.ya.ru/l/XXXXXX'
    }

    // Обработчик на ошибки при открытии формы оплаты
    function onFormOpenError(reason) {
        // Выводим информацию о недоступности оплаты в данный момент
        // и предлагаем пользователю другой способ оплаты.
        console.error(`Payment error — ${reason}`);
    }

    // Создаем платежную сессию
    YaPay.createSession(paymentData, {
        onPayButtonClick: onPayButtonClick,
        onFormOpenError: onFormOpenError,
    })
        .then(function (paymentSession) {
            // Показываем кнопку Яндекс Пэй на странице.
            paymentSession.mountButton(document.querySelector('#button_container'), {
                type: YaPay.ButtonType.Pay,
                theme: YaPay.ButtonTheme.Black,
                width: YaPay.ButtonWidth.Auto,
            });
        })
        .catch(function (err) {
            // Не получилось создать платежную сессию.
        });
}

```
<!-- endsource: ru/custom/web-sdk/_snippets/create-session--v4.mdx -->

## Примеры работы с Web SDK {#examples}

**Встраиваемые компоненты**

1. [Кнопки оплаты Яндекс Пэй](https://pay.yandex.ru/docs/ru/custom/web-sdk/buttons.md).
1. [Виджеты оплаты Яндекс Пэй](https://pay.yandex.ru/docs/ru/custom/web-sdk/ultimate-widget.md).

**Работа с платежом**

1. [Обновление стоимости заказа](https://pay.yandex.ru/docs/ru/custom/web-sdk/order-update.md).
1. [Пересоздание платежной сессии и кнопок Яндекс Пэй](https://pay.yandex.ru/docs/ru/custom/web-sdk/reset-session.md).

## Интеграция Яндекс Пэй на сервере {#integration-server}

Подробнее о настройке интеграции на сервере см. в разделе [Интеграция на бэкенде](../../custom/back-index).