Кнопка оплаты криптой: как добавить её на сайт
Кнопка оплаты криптой: как добавить кнопку «оплатить криптой» на сайт, что такое запланированная кнопка SDK и что работает сегодня. С кодом.
Кнопка оплаты криптой — это одна кнопка на сайте, которая запускает платёж в криптовалюте. Запланированный SDK Qvard отрисовывал бы такую кнопку несколькими строками кода, но он ещё не выпущен. Статья показывает, как собрать рабочую кнопку на живом API уже сегодня.
Что делает кнопка оплаты
Кнопка оплаты запускает платёж, когда клиент на неё нажимает. На крипто-сайте нажатие ведёт на платёжную страницу, где клиент выбирает актив и сеть. Сама кнопка не хранит средств и ключей.
Статус: кнопка SDK в дорожной карте
Кнопка SDK от Qvard ещё не выпущена. Статья не представляет её как готовый компонент, а код-предпросмотр в медиа помечен как roadmap.
x-api-key: sk_live_…
{
"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
}Рабочая кнопка сегодня
Кнопка отправляет запрос на ваш бэкенд. Бэкенд создаёт платёж запросом POST /api/v1/payment с заголовком x-api-key и возвращает redirectUrl. Кнопка перенаправляет клиента туда, а webhook подтверждает оплату.
Размещение кнопки в чекауте
Поставьте кнопку в конце корзины рядом с итогом. Покажите сумму в USD до нажатия, чтобы клиент понимал, что увидит на платёжной странице.
Безопасность кнопки
Не кладите ключ API в код кнопки. Создавайте платёж только по нажатию клиента и проверяйте сумму заказа на сервере, а не в браузере.
// ROADMAP preview: the SDK is not released yet.
QvardCheckout.open({ amount: 149.99, currency: "USD", orderId: "order_1024" });Подтверждение по webhook
Когда webhook передаёт id и статус paid, помечайте заказ оплаченным. Нажатие на кнопку не означает, что деньги поступили.
FAQ
Есть ли сегодня компонент кнопки оплаты от Qvard?
Не в виде компонента SDK: SDK в дорожной карте. Сегодня ту же задачу решает обычная кнопка, которая вызывает ваш бэкенд.
Может ли кнопка показывать сумму в другой валюте?
Цена в запросе API задаётся в USD. Платёжная страница показывает точную сумму в выбранном активе по фиксированному курсу.
Достаточно ли кнопки без webhook?
Нет. Кнопка только запускает платёж. Помечайте заказ оплаченным только по webhook.
Как протестировать кнопку?
Используйте демо-сценарий с тестовым платежом и проверьте, что webhook отмечает заказ после оплаты.
