So fügst du deiner Website einen Krypto-Bezahlbutton oder Checkout hinzu

Button oder eingebetteter Checkout

• Der Bezahlbutton (cosmos-pay-button) öffnet den gehosteten Checkout in einem Pop-up, zentriert über deiner Seite. Blockiert der Browser das Pop-up, wechselt stattdessen derselbe Tab zum Checkout.
• Der eingebettete Checkout (cosmos-pay-checkout) zeigt die Zahlung direkt in deiner Seite an, bis zu 420 Pixel breit: den Betrag, den QR-Code, einen Button, der die Wallet des Zahlers öffnet, und den Live-Status.
• Beide funktionieren für Zahlungslinks auf Stellar, Solana und Monad, auf Englisch, Spanisch, Portugiesisch, Französisch, Deutsch, Hindi und Chinesisch.

Woher der Link kommt

Jedes Element zeigt einen Zahlungslink, den du über seine ID im Attribut link angibst. Erstelle den Link im Dashboard oder, wenn dein Kunde zur Kasse geht, von deinem Server aus mit der Zahlungs-API oder dem TypeScript-SDK, und setze seine ID in die Seite. Die Seite liest den Link ohne API-Schlüssel, dein geheimer Schlüssel bleibt also auf deinem Server.

Zeige pro Zahlung einen eingebetteten Checkout: Ein Link wird einmal bezahlt.

API für ZahlungslinksSo nimmst du USDC-Zahlungen online an

Attribute und Gestaltung

• link: die ID des Zahlungslinks. Erforderlich.
• lang: die Sprache, etwa es oder es-AR. Standardmäßig die Browsersprache des Zahlers, sonst Englisch.
• theme: light (der Standard), dark oder auto, das der Systemeinstellung des Zahlers folgt.
• demo: zeigt ein Beispiel, das sich nicht bezahlen lässt und keine Anfrage sendet, für Vorführungen.
• Text im Button ersetzt seine Beschriftung, und mit ::part(button) und ::part(card) gestaltet dein CSS die Elemente um.

Einen Bezahlbutton einbauen, Schritt für Schritt

1. Lade das Skript

   Füge deiner Seite einmal ein Script-Tag hinzu: https://payments.cosmospay.lat/embed/cosmos-pay.js, mit dem Attribut defer.

2. Hol dir einen Zahlungslink

   Erstelle einen Link im Dashboard oder, wenn dein Kunde zur Kasse geht, von deinem Server aus, und merke dir seine ID.

3. Füge das Element hinzu

   Schreibe ein Element cosmos-pay-button oder cosmos-pay-checkout, setze link auf diese ID und, wenn du möchtest, lang oder theme.

4. Erlaube es in deiner CSP

   Wenn deine Website eine Content Security Policy sendet, erlaube script-src https://payments.cosmospay.lat, connect-src https://api.cosmospay.lat und img-src data:.

5. Teste es

   Nutze einen Link, der in der Sandbox erstellt wurde: Der eingebettete Checkout zeigt an, dass er in einem Testnetz läuft. Das Attribut demo zeigt ein Beispiel ganz ohne Link.

6. Bestätige die Zahlung auf deinem Server

   Füge einen Webhook-Endpunkt hinzu und liefere die Bestellung aus, wenn PAYMENT_INTENT_SUCCEEDED ankommt.

Eine Zahlung einbetten (Dokumentation)Webhooks

Ereignisse und Bestätigung der Zahlung

Beide Elemente lösen auf deiner Seite die Ereignisse cosmospay:status und cosmospay:paid aus, mit der ID und dem Status des Links. Nutze sie, um zu aktualisieren, was der Zahler sieht, nicht um die Bestellung auszuliefern: Ein Ereignis in der Seite lässt sich fälschen.

Liefere die Bestellung aus, wenn dein Server PAYMENT_INTENT_SUCCEEDED erhält, den signierten Webhook, den Cosmos Pay sendet, sobald das Netzwerk die Zahlung bestätigt. Sendet deine Seite eine Cross-Origin-Opener-Policy mit dem Wert same-origin oder wird das Pop-up blockiert, sendet der Button keine Ereignisse.

So bestätigst du eine Zahlung auf deinem Server