Crypto pay button: how to add it to your site
Crypto pay button guide: how to add a pay with crypto button to your site, what the planned SDK button is and what works today. With code. Step by step.
A crypto pay button is a single button on your site that starts a crypto payment. The planned Qvard SDK would render such a button in a few lines of code, but it is not released yet. This guide shows how to build a working button with the live API today.
What a crypto pay button does
A pay button starts a payment when the customer clicks it. On a crypto site the click leads to a payment page where the customer selects an asset and network. The button itself does not hold any money or keys.
Status: the SDK button is on the roadmap
The Qvard SDK button is not released yet. This article does not present it as a finished component, and the preview code in the media is labelled 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
}A working button today
The button sends a request to your backend. The backend creates the payment with POST /api/v1/payment and the x-api-key header, then returns the redirectUrl. The button redirects the customer there, and the webhook confirms the payment.
Place the button in the checkout
Put the button at the end of the cart, next to the total. Show the amount in USD before the click so the customer knows what to expect on the hosted page.
Make the button safe
Do not put the API key in the button code. Create the payment only when the customer clicks, and check the order total on the server, not in the browser.
// ROADMAP preview: the SDK is not released yet.
QvardCheckout.open({ amount: 149.99, currency: "USD", orderId: "order_1024" });Confirm with the webhook
When the webhook delivers the id and status paid, mark the order as paid. A click on the button does not mean the money has arrived.
FAQ
Is there a Qvard pay button component today?
Not as an SDK component. The SDK is on the roadmap. Today a normal button that calls your backend does the same job.
Can the button show the amount in another currency?
The price in the API request is in USD. The hosted page shows the exact amount in the chosen asset at a fixed rate.
Is the pay button enough without a webhook?
No. The button only starts the payment. Mark the order as paid only from the webhook.
How do I test the button?
Use a demo invoice flow and check that the webhook marks the order after the payment.
