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

Yandex Pay Web SDK позволяет подключить форму оформления и оплаты заказа для вашего интернет-магазина.

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

Для установки кнопки Yandex Pay должны быть выполнены следующие требования:

  • Ваш сайт работает по протоколу HTTPS.

  • На вашем сайте не должен обрезаться параметр __YP__ из URL (подробнее).

  • Политики CSP на вашем сайте разрешают использовать:

    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'
    
  • На вашем сайте отсутствуют заголовки:

    Cross-Origin-Opener-Policy: *
    

Подключение Yandex Pay

Шаг 1. Подключение SDK на страницу

Установите HTML-код на всех страницах, где будет размещена кнопка Yandex Pay, перед закрывающим тегом </body>.
Передайте в атрибут onload название метода, который будет отвечать за инициализацию и обработку платежей.

<script src="https://pay.yandex.ru/sdk/v1/pay.js" onload="onYaPayLoad()" async></script>

Шаг 2. Создание формы оформления/оплаты

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

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

  • адрес доставки;
  • способ доставки или самовывоз;
  • получателя платежа;
  • скидочный купон;
  • выбрать способ оплаты
  • оплатить покупку.
function onYaPayLoad() {
    const YaPay = window.YaPay;

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

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

        // Код валюты в которой будете принимать платежи
        currencyCode: YaPay.CurrencyCode.Rub,

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

        // Информация о корзине покупателя
        cart: {
            // Внешний ID корзины (опционально)
            externalId: 'external-cart-id',

            // Состав корзины
            items: [
                {
                    productId: '1',
                    total: '26990.00',
                },
                {
                    productId: '3',
                    // При необходимости указываем кол-во товара
                    quantity: { count: 2 },
                    // Сумма для 2 товаров (7990 * 2)
                    total: '15980.00',
                },
            ],
        },

        // Произвольные доп. данные корзины (опционально)
        // Данные не могут быть длиннее 128 символов после применения encodeURIComponent
        metadata: 'order-metadata',
    };

    // Обработчик на успешную оплату
    function onPaymentSuccess(event) {
        // Заказ успешно оформлен
        // показываем пользователю экран успешного оформления
        console.log(`OrderId — ${event.orderId}\nMetadata — ${event.metadata}`);
    }

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

    // Обработчик на отмену оплаты
    function onPaymentAbort(event) {
        // Пользователь закрыл форму Yandex Pay.
        // Предлагаем пользователю другой способ оплаты.
    }

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

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

  • выбрать способ оплаты;
  • оплатить покупку.
function onYaPayLoad() {
    const YaPay = window.YaPay;

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

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

        // Код валюты в которой будете принимать платежи
        currencyCode: YaPay.CurrencyCode.Rub,

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

        // ВАЖНО!
        // ID оплачиваемого заказа
        // При его наличии, показывается форма оплаты
        //               а не форма оформления заказа
        orderId: 'order-id',

        // Информация о корзине покупателя (опционально)
        cart: {
            // Состав корзины
            items: [
                {
                    productId: '1',
                    total: '26990.00',
                },
                {
                    productId: '3',
                    // При необходимости указываем кол-во товара
                    quantity: { count: 2 },
                    // Сумма для 2 товаров (7990 * 2)
                    total: '15980.00',
                },
            ],
        },

        // Произвольные доп. данные корзины (опционально)
        // Данные не могут быть длиннее 128 символов после применения encodeURIComponent
        metadata: 'order-metadata',
    };

    // Обработчик на успешную оплату
    function onPaymentSuccess(event) {
        // Заказ успешно оформлен
        // показываем пользователю экран успешного оформления
        console.log(`OrderId — ${event.orderId}\nMetadata — ${event.metadata}`);
    }

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

    // Обработчик на отмену оплаты
    function onPaymentAbort(event) {
        // Пользователь закрыл форму Yandex Pay.
        // Предлагаем пользователю другой способ оплаты.
    }

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

Примеры работы с Web SDK

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

  1. Кнопки оплаты Yandex Pay.
  2. Виджеты оплаты Yandex Pay.

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

  1. Обновление корзины.
  2. Пересоздание платежной сессии и кнопок Yandex Pay.
  3. Передача скидочных купонов.

Дополнительные возможности Web SDK

  1. Проверка доступности Яндекс Сплит.

Особенности работы

  1. Работа Yandex Pay через редиректы.

Интеграция Yandex Pay на сервере

Подробнее о настройке интеграции на сервере см. в разделе Интеграция на бэкенде.