Крипточекаут на сайте против редиректа: конверсия и компромиссы
Встроенный крипточекаут против редиректа: как каждая модель влияет на конверсию, контроль и трудозатраты. Виджет Qvard уже запущен. Сравните подходы и выберите нужный.
Встроенный крипточекаут оставляет оплату внутри вашей страницы, а редирект отправляет клиента на платёжную страницу. У каждой модели свои компромиссы по конверсии, контролю и трудозатратам. Виджет Qvard уже работает, поэтому статья сравнивает оба подхода и показывает, как выбрать.
Что такое встроенный чекаут
Встроенный чекаут — это окно оплаты, которое открывается прямо на вашей странице через JavaScript-виджет. Это может быть модальное окно (поверх контента) или встроенная форма. Клиент остаётся в контексте вашего сайта и платит, не уходя. Логика платежа такая же, как на платёжной странице; отличается только представление.
Как это работает в 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();На сервере: создайте платёж первым
Ваш сервер отправляет id заказа и цену в USD с заголовком x-api-key. Ответ вернёт 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 и статус, подписанный заголовком X-Qvard-Signature (HMAC-SHA256). Проверьте подпись вашим секретным ключом (qvard_sk_...) и убедитесь, что сумма совпадает с вашим заказом. Помечайте заказ оплаченным только после проверки подписи.
Когда выбрать встроенное окно
Используйте встроенное модальное или встроенное окно, чтобы держать клиента на вашей странице. Платёжная страница с редиректом работает так же хорошо и подходит, если вы предпочитаете не встраивать окно. Оба подхода используют одинаковый процесс создания платежа и 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.
