Руководство по 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
Диагностика и отладка
Для диагностики подключения к Yandex Pay на этапе отладки используйте консоль разработчика в браузере:
На странице формы Yandex Pay нажмите Command + Option + I
и перейдите на вкладку Console
.
На странице формы Yandex Pay нажмите F12
или Control + Shift + I
и перейдите на вкладку Console
.
Шаг 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
Встраиваемые компоненты
Работа с платежом
Особенности работы
Интеграция Yandex Pay на сервере
Подробнее о настройке интеграции на сервере см. в разделе Интеграция на бэкенде.