Руководство по Web SDK для Checkout формы

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

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

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

  • Ваш сайт работает по протоколу 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: *
    

Безопасность и надежность

Библиотека Яндекс Пэй WebSDK сертифицирована по стандарту PCI DSS. Мы ежегодно проходим сертификацию и можем по запросу отправить вам подтверждающий сертификат.

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

Подключение Яндекс Пэй

Диагностика и отладка

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

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

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

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

Установите HTML-код на всех страницах, где будет размещена кнопка Яндекс Пэй, перед закрывающим тегом </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 указывает на тип оплаты сервисом Яндекс Пэй
        // Пользователь производит оплату на форме Яндекс Пэй,
        // и мерчанту возвращается только результат проведения оплаты
        version: 3,

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

        // Идентификатор продавца, который получают при регистрации в Яндекс Пэй
        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.error(`Payment error — ${event.reason}`);
    }

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

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

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

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

  1. Кнопки оплаты Яндекс Пэй.
  2. Виджеты оплаты Яндекс Пэй.

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

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

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

  1. Работа Яндекс Пэй через редиректы.

Интеграция Яндекс Пэй на сервере

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