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