Интеграция Yandex Pay Web SDK

При данном способе подключения Yandex Pay продавцу передается платежный токен, а далее он самостоятельно проводит оплату.

Данный способ оплаты по принципу работы похож на оплату через Apple Pay и Google Pay.

Примечание

Через 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,

        // Версия 2 указывает на тип оплаты через токен
        // Yandex Pay предоставляет платежный токен, а мерчант самостоятельно проводит по нему оплату
        version: 2,

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

        // Данные продавца:
        //   - id — идентификатор, который продавец получает при регистрации в Yandex Pay
        //   - name — имя продавца
        //   - url — сайт продавца
        merchant: {
            id: '<YOUR_MERCHANT_ID>',
            name: 'test-merchant-name',
            url: 'https://test-merchant-url.ru',
        },

        // Информация о товарах и сумме платежа
        order: {
            // ID заказа
            id: 'order-id',
            // Общая стоимость товаров
            total: { amount: '43980.00' },
            // Детализация по товарам платежа (опционально)
            items: [
                { label: 'Яндекс.Станция Макс, черный', amount: '26990.00' },
                { label: 'Яндекс.Станция 2, антрацит', amount: '16990.00' },
            ],
        },

        // Информация доступные методы оплаты
        // (в примере указаны значения для тестового окружения)
        paymentMethods: [
            {
                type: YaPay.PaymentMethodType.Card,
                gateway: 'test-gateway',
                gatewayMerchantId: 'test-gateway-merchant-id',
                allowedAuthMethods: [YaPay.AllowedAuthMethod.PanOnly],
                allowedCardNetworks: [
                    YaPay.AllowedCardNetwork.Visa,
                    YaPay.AllowedCardNetwork.Mastercard,
                    YaPay.AllowedCardNetwork.Mir,
                    YaPay.AllowedCardNetwork.Maestro,
                    YaPay.AllowedCardNetwork.VisaElectron,
                ],
            },
        ],
    };

    // Обработчик на получение платежного токена
    function onPaymentProcess(event) {
        // Платежный токен.
        console.log(`Payment token — ${event.token}`);

        // ...проводим платеж по платежному токену...
    }

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

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

    // Создаем платежную сессию
    YaPay.createSession(paymentData, {
        onProcess: onPaymentProcess,
        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.

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

  1. Обновление корзины.
  2. Получение данных плательщика.

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

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