Руководство по 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
Встраиваемые компоненты
Работа с платежом
Особенности работы
Интеграция Яндекс Пэй на сервере
Подробнее о настройке интеграции на сервере см. в разделе Интеграция на бэкенде.