Stablecoin-Checkout in Ihren Onlineshop einbetten
Stablecoin-Checkout einbetten: wie Sie das eingebettete Widget nutzen, Zahlungserstellung im Browser und auf dem Server, und Webhook-Verifikation.
Einen Stablecoin-Checkout einzubetten heißt, ein USDT- oder USDC-Zahlungsfenster in Ihren Onlineshop zu setzen. Das eingebettete Checkout-Widget von Qvard nimmt Stablecoins heute an. Ihre Kunden wählen das Krypto-Asset und das Netzwerk auf der Zahlungsseite, Sie verifizieren die Zahlung per Webhook.
Was ein eingebetteter Stablecoin-Checkout ist
Ein eingebetteter Stablecoin-Checkout ist ein Zahlungsfenster, das sich auf Ihrer Seite über ein JavaScript-Widget öffnet. Es kann als Modal (Popup-Fenster) oder eingebettet in einem Element angezeigt werden. Ihre Kunden bleiben auf Ihrer Seite und zahlen mit USDT oder USDC, ohne zu gehen. Das Zahlungsfenster ist die gleiche Qvard-Seite in einem iframe: Der Kunde sieht sie in seiner Sprache, wählt das Stablecoin-Asset und das Netzwerk, und der Betrag wird zu einem festen Kurs für Ihre Rechnung berechnet.
So funktioniert es bei Qvard
Das Widget lädt sich von https://qvard.com/checkout.js und öffnet ein Stablecoin-Zahlungsfenster im Modal- oder eingebetteten Modus. Das Fenster zeigt verfügbare Assets und Netzwerke; der Kunde wählt, und der zu sendende Betrag wird angezeigt. Das Widget sendet Ereignisse: onSuccess (Zahlung erfolgreich), onClose (Fenster geschlossen), onError (Zahlung fehlgeschlagen). Eine Widget-Instanz erhält Ihren öffentlichen Schlüssel (qvard_pk_...) für browsergestützte Erstellung oder die Zahlungs-ID für serverseitige Erstellung. Probieren Sie die Demo-Seite bei qvard.com aus.
Zwei Wege, die Zahlung zu erstellen
Im Browser: übergeben Sie den öffentlichen Schlüssel (qvard_pk_...) und den Betrag an das Widget; es erstellt die Zahlung und öffnet das Fenster. Der Kunde kann den Betrag im Browser ändern, daher nutzen Sie dies zu Informationszwecken. Ihr öffentlicher Schlüssel kann auf zulässige Websites in Ihrem Dashboard beschränkt werden, und Anfragen sind frequenzlimitiert. Auf dem Server: Ihr Backend erstellt die Zahlung über POST /api/v1/payment und gibt die Zahlungs-ID dem Widget. Für Bestellungen mit festen oder kritischen Beträgen verwenden Sie die serverseitige Erstellung und überprüfen Sie den Betrag immer in Ihrem Webhook. Oder überspringen Sie das Widget und leiten Sie Kunden auf die gehostete Zahlungsseite weiter.
Auf dem Server: Zahlung zuerst erstellen
Ihr Server sendet eine POST-Anfrage an /api/v1/payment mit Bestell-ID und Preis in USD unter Verwendung des Headers x-api-key mit Ihrem geheimen Schlüssel (qvard_sk_...). Die Antwort gibt { id, redirectUrl } zurück. Übergeben Sie die ID dem Widget im Browser, oder verwenden Sie redirectUrl für eine Umleitung. Bewahren Sie Ihren geheimen Schlüssel auf dem Server auf; die Anfrage darf nicht vom Browser aus gestellt werden.
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
}Zahlung im Webhook überprüfen
Wenn der Status paid ist, erhält Ihr Webhook { id, status }, signiert mit dem Header X-Qvard-Signature im Format t=...,v1=... (HMAC-SHA256 mit Ihrem geheimen Schlüssel). Überprüfen Sie die Signatur mit Ihrem geheimen Schlüssel (qvard_sk_...) und stellen Sie sicher, dass der Betrag im Webhook mit Ihrer Bestellung übereinstimmt. Ältere Schlüssel ohne qvard_sk_-Präfix erhalten auch den Header x-api-key. Markieren Sie die Bestellung als bezahlt nur nach Signaturüberprüfung. Siehe Signaturanleitung in der Qvard-Dokumentation.
Wann das eingebettete Fenster wählen
Verwenden Sie das eingebettete Modal oder das Widget, um Kunden auf Ihrer Seite zu halten und einen nahtlosen Stablecoin-Checkout bereitzustellen. Die gehostete Seite mit Umleitung funktioniert gleich gut und ist eine Option, wenn Sie das Zahlungsfenster nicht einbetten möchten. Beide nutzen den gleichen Zahlungserstellungsprozess, Webhook-Fluss und Signaturüberprüfung.
FAQ
Ist eingebetteter Stablecoin-Checkout heute bei Qvard verfügbar?
Ja. Laden Sie das Widget von https://qvard.com/checkout.js und übergeben Sie Ihren öffentlichen Schlüssel (qvard_pk_...) für browsergestützte Erstellung, oder erstellen Sie die Zahlung auf dem Server und übergeben Sie die ID.
Wie wählen Kunden ein Stablecoin-Netzwerk im Widget?
Kunden sehen die verfügbaren Stablecoin-Assets und Netzwerke auf der Zahlungsseite und wählen das zu verwendende aus. Der zu sendende Betrag wird basierend auf ihrer Auswahl aktualisiert.
Warum sollte ich den Betrag im Webhook überprüfen?
Der Betrag im Webhook ist Qvards Quelle der Wahrheit. Überprüfen Sie immer, ob er mit Ihrer Bestellung übereinstimmt, auch wenn Sie die Zahlung serverseitig erstellt haben, da der Kunde das Stablecoin und Netzwerk gewählt hat.
Wie teste ich vor dem Livegang?
Nutzen Sie die Demo-Seite bei qvard.com, um das Widget zu testen und Webhook-Ereignisse zu sehen. Bestätigen Sie, dass Ihr Webhook die Signatur überprüft und die Bestellung als bezahlt markiert.
