Криптовиджет оплаты: как добавить его на сайт
Гайд по криптовиджету оплаты: подключите встроенный чекаут Qvard на сайт. Создание платежей с сервера и браузера, проверка подписи webhook, демо.
Криптовиджет оплаты — это JavaScript-виджет, который открывает окно оплаты на вашем сайте. Виджет Qvard уже живой на https://qvard.com/платёжная страница.js. Статья объясняет, как он работает и как его подключить.
Что такое криптовиджет
Виджет — компактный платёжный элемент, который сайт встраивает, чтобы начать оплату. В Qvard виджет открывает ту же платёжную страницу, что видят ваши клиенты, в модальном или встроенном окне. Клиент выбирает актив и сеть; сумма задана вашим заказом.
Как это работает в Qvard
Виджет загружается из https://qvard.com/платёжная страница.js и открывает окно оплаты либо модальным (всплывающее окно), либо встроенным. Окно — та же платёжная страница Qvard: клиент выбирает актив и сеть по фиксированному курсу на время счёта. Экземпляр виджета получает ваш публичный ключ (qvard_pk_…) для создания в браузере или id платежа для создания на сервере. Попробуйте на живую на демо-странице https://qvard.com/ru/embedded-платёжная страница/playground/.
<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();Два способа создать платёж
В браузере: передайте публичный ключ (qvard_pk_…) и сумму виджету; он создаст платёж и откроет окно. На сервере: ваш бэкенд создаёт платёж через POST /api/v1/payment и передаёт id виджету. Для заказов с фиксированной ценой или лимитом товара используйте серверный способ, чтобы клиент не мог изменить цену в браузере. В качестве альтернативы пропустите виджет и перенаправьте клиента на платёжную страницу.
Вызов с бэкенда
Ваш сервер отправляет номер заказа в id и цену в USD в price с заголовком x-api-key. В ответе приходят id платежа и redirectUrl. Передайте id виджету в браузер или используйте redirectUrl для редиректа. Никогда не отправляйте секретный ключ (qvard_sk_…) в браузер.
Проверьте платёж по webhook
Когда статус paid, ваш webhook-endpoint получает id и status, подписанные заголовком X-Qvard-Signature (HMAC-SHA256). Проверьте подпись, используя секретный ключ (qvard_sk_…), и убедитесь, что сумма совпадает с вашим заказом. Помечайте заказ оплаченным только после проверки подписи. Важно: событие onSuccess виджета — не доказательство оплаты.
Когда выбрать встроенное окно
Используйте встроенное модальное окно или форму, чтобы клиент остался на вашей странице. Платёжная страница с редиректом работает столь же хорошо и является вариантом, если вы не хотите встраивать окно. Оба подхода используют один и тот же API и webhook.
FAQ
Есть ли криптовиджет Qvard сегодня?
Да. Загрузите виджет из https://qvard.com/платёжная страница.js и передайте публичный ключ (qvard_pk_…) для создания в браузере или создайте платёж на сервере и передайте его id.
Как добавить виджет на сайт?
Добавьте тег <script src="https://qvard.com/платёжная страница.js"></script> и создайте Qvardплатёжная страница с вашим ключом, суммой и режимом (modal или inline). Смотрите примеры кода в этой статье и демо.
Виджет держит клиента на моём сайте?
Да, в модальном или встроенном режиме. Редирект на платёжную страницу отправляет клиента на другой сайт, но после оплаты он возвращается по ссылке.
Как протестировать поток?
Создайте тестовый платёж и убедитесь, что обработчик webhook получает подписанный статус и сумма совпадает, прежде чем выходить в продакшен.
