Embedded Krypto-Checkout: ein Zahlungsfenster auf Ihrer Website
Embedded Krypto-Checkout: integrieren Sie ein Modal oder eingebettetes Formular direkt über JavaScript. Zahlungserstellung auf Server und Browser, Webhook-Verifizierung, Live-Demo.
Ein Embedded Krypto-Checkout bedeutet, dass sich das Zahlungsfenster direkt auf Ihrer Seite über ein JavaScript-Widget öffnet. Es kann ein Modal (Popup-Fenster) oder ein eingebettetes Formular sein. Qvard stellt ein produktionsreifes Widget auf https://qvard.com/checkout.js bereit. Dieser Leitfaden erklärt die Funktionsweise und wie Sie es integrieren.
Was Embedded Checkout bedeutet
Ein Embedded Checkout ist ein Zahlungsfenster, meist ein Modal, das sich über der Seite öffnet, auf der sich der Kunde gerade befindet. Der Kunde behält den Shop-Kontext und bezahlt, ohne die Website zu verlassen. Die Zahlungslogik bleibt dieselbe wie auf einer gehosteten Seite.
Funktionsweise bei Qvard
Das Widget wird von https://qvard.com/checkout.js geladen und öffnet ein Zahlungsfenster im Modal-Modus (Popup) oder eingebettet. Das Fenster ist dieselbe Qvard-Zahlungsseite: Der Kunde wählt Asset und Netzwerk, und der Betrag ist durch Ihre Bestellung festgelegt. Eine Widget-Instanz erhält Ihren öffentlichen Schlüssel (qvard_pk_…) für die Erstellung im Browser oder eine Zahlungs-ID für die Erstellung auf dem Server. Probieren Sie es live auf der Demo-Seite aus.
Zwei Wege zur Zahlungserstellung
Im Browser: Übergeben Sie den öffentlichen Schlüssel (qvard_pk_…) und den Betrag an das Widget; es erstellt die Zahlung und öffnet das Fenster. Auf dem Server: Ihr Backend erstellt die Zahlung über POST /api/v1/payment und übergibt die ID an das Widget. Bei Bestellungen mit Festpreis oder Lagerbegrenzung verwenden Sie die Serverseitige Erstellung, damit der Kunde den Preis nicht im Browser ändern kann. Alternativ übergehen Sie das Widget und leiten Kunden zur gehosteten Zahlungsseite weiter.
<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();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
}Auf dem Server: Zahlung zuerst erstellen
Ihr Server sendet die Bestell-ID und den Preis in USD mit dem Header x-api-key. Die Antwort liefert die Zahlungs-ID und die redirectUrl. Übergeben Sie die ID an das Widget im Browser oder nutzen Sie redirectUrl für eine gehostete Weiterleitung. Bewahren Sie den Schlüssel auf dem Server auf, denn die Anfrage darf nicht aus dem Browser kommen.
Zahlung vom Webhook verifizieren
Wenn der Status paid ist, empfängt Ihr Webhook-Endpoint die ID und den Status, signiert mit dem Header X-Qvard-Signature (HMAC-SHA256). Verifizieren Sie die Signatur mit Ihrem geheimen Schlüssel (qvard_sk_…) und stellen Sie sicher, dass der Betrag mit Ihrer Bestellung übereinstimmt. Markieren Sie die Bestellung als bezahlt nur nach Signaturverifizierung.
Wann das eingebettete Fenster wählen
Verwenden Sie das eingebettete Modal oder das eingebettete Formular, um Kunden auf Ihrer Seite zu halten. Die gehostete Zahlungsseite mit Weiterleitung funktioniert genauso gut und ist eine Option, wenn Sie das Zahlungsfenster nicht einbetten möchten. Beide Ansätze nutzen dieselbe API und denselben Webhook.
FAQ
Ist ein Embedded Krypto-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 die Erstellung im Browser, oder erstellen Sie die Zahlung auf dem Server und übergeben Sie die ID.
Wie integriere ich das Widget auf meiner Website?
Fügen Sie das Tag <script src="https://qvard.com/checkout.js"></script> ein und instanziieren Sie QvardCheckout mit Ihrem Schlüssel, Betrag und Modus (Modal oder eingebettet). Siehe Codebeispiele in diesem Artikel und in der Demo.
Ist die Zahlungssignatur wichtig?
Ja. Verifizieren Sie immer den Header X-Qvard-Signature in Ihrem Webhook mit Ihrem geheimen Schlüssel und stellen Sie sicher, dass der Betrag im Webhook mit Ihrer Bestellung übereinstimmt.
Kann ich die Weiterleitung statt des eingebetteten Fensters nutzen?
Ja. Die gehostete Zahlungsseite unter redirectUrl funktioniert genauso gut und erfordert kein Widget. Beide Ansätze verwenden dieselbe API und denselben Webhook.
