Binden Sie Checkout in Ihre Website ein
Öffnen Sie den Checkout in einem Modal, betten Sie ihn in eine Seite ein oder senden Sie den Kunden auf eine dedizierte Zahlungsseite. Das Widget verwendet eine öffentliche Checkout-URL und benötigt niemals einen Händler-API-Schlüssel im Browser.
Auf dieser Seite
Von Rechnung zu Checkout#
Erstellen Sie eine Rechnung in /account#links und erhalten Sie sofort checkoutUrl. Öffnen Sie /account#widget, fügen Sie den Link ein und wählen Sie ein Modal, einen Inline-Block oder eine Weiterleitung. Schlüssel und Webhooks sind in den angrenzenden Kontobereichen verfügbar.
Die Builder-Vorschau verwendet immer eine Demo-Bestellung ohne Belastung. Der generierte Widget-Code behält Ihren Live-Link, dessen Bedingungen aus der gespeicherten Server-Rechnung stammen.
Für eine neue Rechnung in der Oberfläche bietet USD Karten und Alipay an; RUB bietet SBP an; USDT bietet Krypto an. Die API kann auch USD + Krypto für die Kompatibilität speichern, aber ihre Live-Kryptozahlung ist mit crypto_requires_usdt blockiert. USD und USDT sind unterschiedlich, ohne automatische Umrechnung oder angenommenen 1:1-Kurs. Eine Kryptozahlung erfordert eine separate USDT-Rechnung.
Ein Button mit normalem Link-Fallback#
Dieses Beispiel öffnet eine Demo ohne Geld zu belasten. Ersetzen Sie beide URL-Werte durch checkoutUrl aus Ihrer Rechnungsantwort. Laden Sie das Skript von derselben Kevmi-Quelle wie die Checkout-URL.
Das href öffnet den Checkout, wenn JavaScript nicht verfügbar ist. data-kevmi-label gibt dem iframe einen zugänglichen Namen. Fügen Sie das Skript einmal pro Seite ein.
<script src="https://kevmi.maxeevmax1.chatgpt.site/widgets/kevmi.js" defer></script>
<a href="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-checkout="https://kevmi.maxeevmax1.chatgpt.site/en/pay/demo"
data-kevmi-mode="modal"
data-kevmi-label="Order checkout">Pay securely</a>Drei Möglichkeiten, den Checkout zu öffnen#
Verwenden Sie einen Container wie div für den Inline-Modus und ersetzen Sie CHECKOUT_URL_FROM_API durch eine echte URL. Der Rahmen passt sich der Containerbreite an; Checkout-Nachrichten können seine Höhe innerhalb eines begrenzten Bereichs anpassen.
Das Modal schließt mit seinem Button, Escape oder einem Klick auf den Hintergrund. Der Fokus kehrt nach dem Schließen zum ursprünglichen Auslöser zurück. Reduzierte-Bewegung-Einstellungen verkürzen den Übergang.
| data-kevmi-mode | Verhalten | Nützlich für |
|---|---|---|
| Modal | Ein Overlay-Dialog; der Standardmodus | Ein Zahlungsbutton auf Bestellebene |
| inline | Ein iframe im ausgewählten Container | Ein Checkout-Schritt auf Ihrer Website |
| redirect | Navigation zu Kevmi im aktuellen Tab | Eine vollständige Zahlungsseite |
<div data-kevmi-checkout="CHECKOUT_URL_FROM_API"
data-kevmi-mode="inline"
data-kevmi-label="Order checkout"></div>Öffnen Sie den Checkout über Ihre Oberfläche#
Die Dokumentereignisse kevmi:opened und kevmi:closed ermöglichen es Ihrer Oberfläche, auf das Öffnen und Schließen zu reagieren. Ein kevmi:error-Ereignis am Auslöser meldet eine ungültige Checkout-URL. Nichts beweist eine Zahlung. Rufen Sie die JavaScript-API auf, nachdem das Widget-Skript geladen wurde.
window.Kevmi.open(checkoutUrl, {
mode: 'modal',
label: 'Order checkout',
closeLabel: 'Close checkout'
});
// Inline blocks added after page load are detected automatically.
// You may also request mounting explicitly:
window.Kevmi.mount(document);Was eine erfolgreiche Zahlung beweist#
Platzieren Sie keine API-Schlüssel oder Signiergeheimnisse in HTML. Das Widget erhält nur einen öffentlichen Link zu einer Rechnung. Der Checkout verschlüsselt Kartendaten und Bankcodes mit dem Gateway-Schlüssel; der Kevmi-Server akzeptiert sie nicht im Klartext.
postMessage aktualisiert den Oberflächenzustand, nicht die Auftragserfüllung. Überprüfen Sie den Nachrichtenursprung und das Quellfenster vor der Verarbeitung. Verwenden Sie ein verifiziertes payment.succeeded-Ereignis oder einen Status 'succeeded' in der GET link.payment-Zusammenfassung des Servers für das Endergebnis.
Vor dem Hinzufügen des Widgets zur Produktion#
- Erlauben Sie die Kevmi-Quelle in Ihren Content-Security-Policy-Direktiven script-src und frame-src, ohne unzusammenhängende Richtlinien zu erweitern.
- Prüfen Sie schmale Bildschirme, Tastaturzugriff sowie helle und dunkle Designs.
- Bestätigen Sie, dass die Rechnung aktiv, nicht abgelaufen ist und den korrekten Preis und die Kostenanteile aufweist.
- Behalten Sie einen gewöhnlichen Zahlungslink als Fallback.
- Testen Sie fehlgeschlagene Zustellungen und doppelte Webhook-Ereignisse, ohne einen Auftrag zweimal zu erstellen.