Встроенный крипточекаут: модальное окно оплаты на вашем сайте
Встроенный крипточекаут: подключите модальное или встроенное окно оплаты через JavaScript. Создание платежей с сервера и браузера, проверка подписи webhook, демо.
Встроенный крипточекаут означает, что окно оплаты открывается прямо на вашей странице через JavaScript-виджет. Это может быть модальное окно (поверх контента) или встроенная форма. У Qvard есть боевой виджет на https://qvard.com/платёжная страница.js. Статья объясняет, как он работает и как его подключить.
Что такое встроенный чекаут
Встроенный чекаут — это окно оплаты, обычно модальное, которое открывается поверх страницы, где уже находится клиент. Клиент сохраняет контекст магазина и платит, не покидая сайт. Логика платежа остаётся такой же, как на платёжной странице.
Как это работает в Qvard
Виджет загружается из https://qvard.com/платёжная страница.js и открывает окно оплаты либо модальным (всплывающее окно), либо встроенным. Окно — это та же платёжная страница Qvard: клиент выбирает актив и сеть; сумма задана вашим заказом. Экземпляр виджета получает ваш публичный ключ (qvard_pk_…) для создания платежа в браузере или id платежа для создания на сервере. Попробуйте на живую на демо-странице https://qvard.com/ru/embedded-платёжная страница/playground/.
Два способа создать платёж
В браузере: передайте публичный ключ (qvard_pk_…) и сумму виджету; он создаст платёж и откроет окно. На сервере: ваш бэкенд создаёт платёж через POST /api/v1/payment и передаёт id виджету. Для заказов с фиксированной ценой или лимитом товара используйте серверный способ, чтобы клиент не мог изменить цену в браузере. В качестве альтернативы пропустите виджет и перенаправьте на платёжную страницу.
<script src="https://qvard.com/checkout.js"></script>
new QvardCheckout({
mode: 'modal',
publishableKey: 'qvard_pk_…',
price: 10,
onSuccess: function (e) {
console.log('paid', e.paymentId);
}
}).open();x-api-key: qvard_sk_…
{
"id": "order_1024",
"price": 149.99,
"paymentSystemId": 12
}
// 201 Created
{
"data": {
"id": "8f3k2a1c",
"redirectUrl": "https://my.qvard.com/pay/8f3k2a1c"
},
"code": 201,
"message": "success",
"status": true
}Серверный способ: создайте платёж первым
Ваш сервер отправляет номер заказа и цену в USD с заголовком x-api-key. В ответе приходят id платежа и redirectUrl. Передайте id виджету в браузер или используйте redirectUrl для редиректа. Ключ храните на сервере: запрос не должен выполняться из браузера.
Проверьте платёж по webhook
Когда статус paid, ваш webhook-endpoint получает id и status, подписанные заголовком X-Qvard-Signature (HMAC-SHA256). Проверьте подпись, используя секретный ключ (qvard_sk_…), и убедитесь, что сумма совпадает с вашим заказом. Помечайте заказ оплаченным только после проверки подписи.
Когда выбрать встроенное окно
Используйте встроенное модальное окно или форму, чтобы клиент остался на вашей странице. Платёжная страница с редиректом работает столь же хорошо и является вариантом, если вы не хотите встраивать окно. Оба подхода используют один и тот же API и webhook.
FAQ
Есть ли встроенный крипточекаут в Qvard сегодня?
Да. Загрузите виджет из https://qvard.com/платёжная страница.js и передайте публичный ключ (qvard_pk_…) для создания платежа в браузере или создайте платёж на сервере и передайте его id.
Как добавить виджет на сайт?
Добавьте тег <script src="https://qvard.com/платёжная страница.js"></script> и создайте Qvardплатёжная страница с вашим ключом, суммой и режимом (modal или inline). Смотрите примеры кода в этой статье и демо.
Важна ли подпись платежа?
Да. Всегда проверяйте заголовок X-Qvard-Signature в webhook, используя ваш секретный ключ, и убедитесь, что сумма в webhook совпадает с вашим заказом.
Могу ли я использовать редирект вместо встроенного окна?
Да. Платёжная страница по redirectUrl работает столь же хорошо и не требует виджета. Оба подхода используют один и тот же API и webhook.
