Der Buy-Button
Der Buy-Button ist ein paar Zeilen HTML, die Sie auf jeder Seite einfügen. Kein Framework, kein Installationsschritt auf Ihrer Seite. Der Button rendert beim ersten Aufbau; die Anbieterauswahl und die SDKs der Zahlungsanbieter laden bei Bedarf beim ersten Klick eines Käufers. Er funktioniert in jeder Website oder jedem Framework, das HTML rendert, einschließlich der No-Code-Baukästen, die HTML-Embeds einfügen lassen.
Bestätigt funktionierend mit: Angular, Hugo, Jekyll, reinem HTML, Webflow (Custom-Code-Embed), Carrd (Embed-Element), Framer (HTML-Embed), Squarespace (Code-Block), WordPress (Custom-HTML-Block), Ghost, Notion-Seiten (HTML-Embed-Widgets). Wenn Ihre Website Sie HTML auf einer Seite einfügen lässt, funktioniert der Buy-Button dort.
Attributreferenz
| Attribut | Erforderlich | Was es annimmt | Hinweise |
|---|---|---|---|
endpoint | Nein | URL-String | Fast immer weglassen. Der Button erkennt seine API-Basis automatisch: https://api.coinmoebius.com in der Produktion, http://localhost:8787 auf localhost. Setzen Sie es nur als Überschreibung für eine ungewöhnliche Einrichtung (z. B. einen selbst gehosteten Proxy vor der API). |
project-id | Ja | String, mit Präfix proj_ | Von Ihrer Projektseite im Dashboard. Kann öffentlich gemacht werden, es ist eine Kennung, kein Zugangsdatum. |
product-id | Ja (im Strict-Modus) / Empfohlen (im Ad-hoc-Modus) | String, beliebiges Format Ihrer Wahl | Ihre interne Produktkennung. Im Strict-Modus (Voreinstellung) schlägt der Worker damit den Preis aus Ihrem Katalog nach. Im Ad-hoc-Modus wird sie dennoch in metadata.productId an Ihre Webhooks durchgereicht, damit Sie Transaktionen Ihrem Bestand zuordnen können. Siehe den Abschnitt Strict-Modus vs. Ad-hoc-Modus weiter unten. |
amount | Nur im Ad-hoc-Modus | Dezimalzahl als String | Der Preis in Hauptwährungseinheiten (z. B. Dollar, nicht Cent). Muss positiv sein. Im Strict-Modus weglassen. Der Worker liest den maßgeblichen Preis aus Ihrem Katalog und ignoriert jeden Wert im HTML. Nur erforderlich, wenn das Projekt im Ad-hoc-Modus ist und die product-id nicht im Katalog steht. |
currency | Nur im Ad-hoc-Modus | Dreistelliger ISO-4217-Code oder Ihr eigener Einheitenname | USD, EUR usw. für Karten- / Krypto-Zahlungswege. Der Zahlen-per-Post-Anbieter nimmt jeden String an (z. B. GBK), weil der Händler derjenige ist, der die Transaktion abwickelt. Dieselbe Regel wie amount: im Strict-Modus weglassen, im Ad-hoc-Modus für nicht im Katalog stehende Produkte erforderlich. |
label | Nein | String | Der Button-Text. Standard ist Buy. Damit unterscheiden Sie Buttons auf derselben Seite. |
customer-ref | Nein | String, beliebiges Format Ihrer Wahl | Eine undurchsichtige Kennung für den Käufer in Ihrem eigenen System, etwa eine angemeldete Nutzer-ID. Der Button leitet sie als metadata.customerRef an den Worker weiter, und der Worker markiert die Transaktion damit. Später können Sie mit Ihrer eigenen ID fragen "welcher meiner Nutzer hat gezahlt?", ohne dass wir tatsächliche Kundendaten halten. Bei anonymen Checkouts weglassen. |
theme | Nein | dark oder light | Wählt das eingebaute Farbschema für Button und Popup gemeinsam. Standard ist dark. Setzen Sie theme="light" für das helle Schema. Ihre CSS-Variablen überschreiben beide. Siehe den Gestaltungsleitfaden. |
editable-amount | Nein | true oder false | Bei true zeigt das Popup ein Betragsfeld, das der Käufer ausfüllt (Trinkgelder, Spenden, Zahlen-was-du-willst). Standard ist false, wobei der amount, den Sie festlegen, fix ist und kein Feld erscheint. Die Zahlungs-Buttons bleiben deaktiviert, bis der Betrag eine positive Zahl ist. |
Mehrere Buttons auf einer Seite
Das Skript registriert den Button einmal, danach kann eine beliebige Anzahl von Instanzen auf einer Seite rendern. Jede Instanz ist unabhängig. Das Beispiel unten nutzt den Strict-Modus (Voreinstellung): kein amount oder currency im HTML, weil der Worker den Preis für jedes Produkt aus Ihrem Katalog nachschlägt.
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>Wenn Ihr Projekt im Ad-hoc-Modus ist (Spenden-Widgets, Trinkgläser), enthält jeder Button auch amount und currency. Siehe Strict-Modus vs. Ad-hoc-Modus für das vollständige Bild.
Den Button gestalten
Der Buy-Button rendert in einem Shadow DOM, was bedeutet, dass kein vorhandenes CSS Ihrer Seite hineinreicht. Das ist Absicht: Es lässt den Button auf jeder Seite gleich aussehen und verhindert, dass eine verirrte * { box-sizing: ... }-Regel das Auswahl-Modal bricht. Sie gestalten ihn über zwei Flächen aus Ihrem eigenen Stylesheet: CSS-Custom-Properties für Farben, Schriften und Form sowie ::part()-Selektoren für alles andere. Kein JavaScript beteiligt.
Jede Variable und jeder Part ist im Gestaltungsleitfaden dokumentiert, mit Live-Beispielen, die Sie anklicken und kopieren können:
Den interaktiven Gestaltungsleitfaden öffnen →
Die Erfolgs- und Abbruch-URLs
Wenn Sie Stripe oder NOWPayments im Reiter Anbieter des Dashboards verbinden, legen Sie zwei URLs fest:
- Erfolgs-URL, wo der Käufer nach einer erfolgreichen Zahlung landet. Stripe und NOWPayments hängen einen Abfrageparameter an (
?session_id=...für Stripe,?NP_id=...für NOWPayments), damit Ihre Erfolgsseite erkennen kann, welche Transaktion abgeschlossen wurde. Die meisten statischen Websites zeigen einfach eine allgemeine "Danke, Ihre Zahlung wird verarbeitet"-Meldung und verlassen sich für die maßgebliche Wahrheit auf das Dashboard. - Abbruch-URL, wo der Käufer landet, wenn er vor dem Zahlen abbricht. Oft dieselbe wie Ihre Warenkorbseite.
Beide URLs werden pro Anbieter im Dashboard konfiguriert, das Element muss nichts davon wissen.