Встроить стейблкоин-чекаут в интернет-магазин
Встроить стейблкоин-чекаут в интернет-магазин: как использовать встроенный виджет, создание платежа в браузере и на сервере, проверка webhook.
Встроить стейблкоин-чекаут означает поместить окно оплаты USDT или USDC внутрь вашего интернет-магазина. Виджет встроенного чекаута Qvard принимает стейблкоины уже сегодня. Клиенты выбирают криптоактив и сеть на странице оплаты, а вы проверяете платёж через webhook.
Что такое встроенный стейблкоин-чекаут
Встроенный стейблкоин-чекаут — это окно оплаты, которое открывается на вашей странице через JavaScript-виджет. Это может быть модальное окно (поверх контента) или встроенное окно. Клиенты остаются на вашей странице и платят USDT или USDC, не уходя. Окно оплаты — это та же страница Qvard в iframe: клиент видит её на своём языке, выбирает стейблкоин и сеть, а сумма рассчитывается по фиксированному курсу для вашего счёта.
Как это работает в Qvard
Виджет загружается из https://qvard.com/платёжная страница.js и открывает окно оплаты стейблкоинов модально или встроенным. Окно показывает доступные активы и сети; клиент выбирает, и выводится сумма к отправке. Виджет генерирует события: onSuccess (платёж произведён), onClose (окно закрыто), onError (платёж не прошёл). Экземпляр виджета получает ваш публичный ключ (qvard_pk_...) для создания платежа в браузере или id платежа для создания на сервере. Попробуйте на демо https://qvard.com/ru/embedded-платёжная страница/playground/.
Два способа создать платёж
В браузере: передайте публичный ключ (qvard_pk_...) и сумму виджету; он создаст платёж и откроет окно. Клиент может изменить сумму в браузере, поэтому используйте этот способ в информационных целях. Публичный ключ можно ограничить разрешёнными сайтами в кабинете, и запросы rate-limited. На сервере: ваш бэкенд создаёт платёж через POST /api/v1/payment и передаёт виджету id платежа. Для заказов с фиксированной или критичной ценой используйте серверный способ и проверяйте сумму в webhook. Или пропустите виджет и перенаправьте клиента на платёжную страницу.
На сервере: создайте платёж первым
Ваш сервер отправляет POST-запрос на /api/v1/payment с номером заказа и ценой в USD, используя заголовок x-api-key с вашим секретным ключом (qvard_sk_...). Ответ возвращает { id, redirectUrl }. Передайте id виджету в браузере или используйте redirectUrl для редиректа. Держите секретный ключ на сервере; запрос нельзя делать из браузера.
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
}Проверьте платёж по webhook
Когда статус paid, ваш webhook получает { id, status }, подписанные заголовком X-Qvard-Signature в формате t=...,v1=... (HMAC-SHA256 с вашим секретным ключом). Проверьте подпись вашим секретным ключом (qvard_sk_...) и убедитесь, что сумма в webhook совпадает с вашим заказом. Ключи без префикса qvard_sk_ также получают заголовок x-api-key. Помечайте заказ оплаченным только после проверки подписи. Смотрите инструкцию по подписи на https://qvard.com/ru/docs/webhook-signature/.
Когда выбрать встроенное окно
Используйте встроенное модальное или встроенное окно, чтобы держать клиента на вашей странице и обеспечить плавный чекаут со стейблкоинами. Платёжная страница с редиректом работает так же хорошо и подходит, если вы предпочитаете не встраивать окно. Оба подхода используют одинаковый процесс создания платежа, webhook и проверку подписи.
FAQ
Доступен ли встроенный стейблкоин-чекаут в Qvard сегодня?
Да. Загрузите виджет из https://qvard.com/платёжная страница.js и передайте публичный ключ (qvard_pk_...) для создания в браузере, или создайте платёж на сервере и передайте id.
Как клиент выбирает стейблкоин и сеть на виджете?
Клиент видит доступные стейблкоины и сети на странице оплаты и выбирает нужные. Сумма к отправке обновляется в зависимости от выбора.
Зачем проверять сумму в webhook?
Сумма в webhook — источник истины из Qvard. Всегда проверяйте совпадение с вашим заказом, даже если вы создавали платёж на сервере, потому что клиент выбрал стейблкоин и сеть.
Как протестировать перед запуском?
Используйте демо-страницу на https://qvard.com/ru/embedded-платёжная страница/playground/ для тестирования виджета и просмотра событий webhook. Убедитесь, что ваш webhook проверяет подпись и помечает заказ оплаченным.
