Руководство по Web SDK
Яндекс Пэй Web SDK позволяет подключить форму оплаты заказа для вашего интернет-магазина.
Важно
Этот способ интеграции требует настройки API.
Требования к подключению
Для установки кнопки Яндекс Пэй должны быть выполнены следующие требования:
-
ваш сайт работает по протоколу HTTPS;
-
политики 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,
// Версия 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) {
// Не получилось создать платежную сессию.
});
}
Примеры работы с Web SDK
Встраиваемые компоненты
Работа с платежом
Интеграция Яндекс Пэй на сервере
Подробнее о настройке интеграции на сервере см. в разделе Интеграция на бэкенде.