Krypto-Zahlungs-Widget: so binden Sie es in Ihre Website ein
Anleitung zum Krypto-Zahlungs-Widget: integrieren Sie das Embedded Checkout von Qvard in Ihre Website. Zahlungserstellung auf Server und Browser, Webhook-Signaturverifizierung, Live-Demo.
Ein Krypto-Zahlungs-Widget ist ein JavaScript-Widget, das ein Zahlungsfenster auf Ihrer Website öffnet. Das Qvard-Widget ist jetzt live unter https://qvard.com/checkout.js. Dieser Leitfaden erklärt die Funktionsweise und die Integrationsschritte.
Was ein Krypto-Zahlungs-Widget ist
Ein Widget ist ein kompaktes Zahlungselement, das eine Website einbettet, um eine Zahlung zu starten. Bei Qvard öffnet das Widget dieselbe Zahlungsseite, die Ihre Kunden in einem Modal oder eingebetteten Formular sehen. Der Kunde wählt Asset und Netzwerk; der Betrag ist durch Ihre Bestellung festgelegt.
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 zu einem Festkurs für die Dauer der Rechnung. 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.
<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();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.
Der Aufruf aus dem Backend
Ihr Server sendet die Bestell-ID in id und den Preis in USD in price 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 Weiterleitung. Senden Sie den geheimen Schlüssel (qvard_sk_…) niemals an den Browser.
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. Hinweis: Das onSuccess-Ereignis des Widgets ist kein Zahlungsnachweis.
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 das Krypto-Zahlungs-Widget von Qvard heute 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.
Hält das Widget den Kunden auf meiner Website?
Ja, im Modal- oder eingebetteten Modus. Die Weiterleitung zur gehosteten Seite sendet den Kunden auf eine andere Website, aber er kehrt nach Zahlungsabschluss über einen Link zurück.
Wie teste ich den Ablauf?
Legen Sie eine Demo-Zahlung an und prüfen Sie, dass Ihr Webhook-Handler die Signatur und den Betrag empfängt und übereinstimmt, bevor Sie live gehen.
