Не переживайте, с вашими деньгами все в порядке
В результате атак БПЛА пострадали инфраструктуры дата-центров Яндекса. Мы делаем все возможное для восстановления работы наших сервисов. Сейчас обращений больше, чем обычно, поэтому ожидание ответа может занять значимо больше времени. Поддержка ответит вам, как только сможет.
Спасибо за понимание и терпение.
Руководство по 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
Встраиваемые компоненты
Работа с платежом
Особенности работы
Интеграция Яндекс Пэй на сервере
Подробнее о настройке интеграции на сервере см. в разделе Интеграция на бэкенде.