Der Buy-Button und das Zahlungs-Popup, das er öffnet, übernehmen beide Ihre Farben, Schriften und Form. Sie setzen ein paar CSS-Variablen; beide folgen gemeinsam. Alles unten ist ein funktionierendes Beispiel, das Sie anklicken können, mit dem genauen Code, der es erzeugt hat, direkt daneben.
Keines davon ist ein vorgefertigtes Design. Jeder Look entsteht aus dem schlichten CSS daneben. Kopieren Sie eines als Ausgangspunkt und ändern Sie, was immer Sie möchten.
Das sind echte Buttons mit Platzhalter-Anbietern und einem fiktiven Referenzcode. Es wird keine Zahlung entgegengenommen. Klicken Sie einen Button, um sein Popup zu öffnen, und lesen Sie dann den Code, der es gestaltet hat.
Kein CSS, keine Attribute. Der Button und sein Popup teilen sich von Haus aus ein neutrales Anthrazit. Das ist theme="dark", die Voreinstellung, das Ausschreiben ändert also nichts.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Fügen Sie theme="light" hinzu, und sowohl der Button als auch das Popup werden ein sanftes Cremeweiß. Ein Attribut, kein CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Jedes davon ist nur das CSS daneben, nicht mehr. Nehmen Sie eines, fügen Sie es in Ihr eigenes Stylesheet ein und ändern Sie die Werte. Mischen Sie sie, wie Sie möchten.
Ein indigofarbener Button mit passendem indigofarbenem Popup, gesetzt mit einer Handvoll CSS-Variablen. Ändern Sie einen beliebigen Wert, um ihn umzufärben.
coin-moebius-buy {
/* the button */
--cm-button-bg: #4f46e5;
--cm-button-color: #fff;
--cm-button-radius: 9999px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #1e1b4b;
--cm-color: #e0e7ff;
--cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 9999px;
}Schwarzer Hintergrund, grüner Monospace-Text, eckige Ecken. Das Popup folgt demselben Look. Jeder Wert hier lässt sich austauschen.
coin-moebius-buy {
/* the button */
--cm-button-bg: #001b00;
--cm-button-color: #39ff14;
--cm-button-radius: 0;
--cm-font: 'Courier New', monospace;
/* the popup, styled to match */
--cm-modal-bg: #000;
--cm-color: #39ff14;
--cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
border: 1px solid #39ff14;
border-radius: 0;
}
coin-moebius-buy::part(provider) {
border-radius: 0;
}Ein warmrosa Button mit passendem zartrosa Popup. Runden Sie die Ecken mehr oder weniger ab, indem Sie eine Zahl bearbeiten.
coin-moebius-buy {
/* the button */
--cm-button-bg: #ec4899;
--cm-button-color: #fff;
--cm-button-radius: 14px;
/* the popup, styled to match */
--cm-modal-bg: #fff1f7;
--cm-color: #831843;
--cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
border-radius: 18px;
}
coin-moebius-buy::part(provider) {
border-radius: 12px;
}Eine Button-Fläche mit Farbverlauf, mit passend getöntem Popup. Gestalten Sie die Button-Fläche, wie Sie möchten.
coin-moebius-buy::part(button) {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 10px;
padding: 0.8rem 2rem;
font-weight: 700;
}
coin-moebius-buy {
/* the popup, picking up the gradient's colors */
--cm-modal-bg: #f5f3ff;
--cm-color: #4c1d95;
--cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
border-top: 4px solid #764ba2;
}Ein dünner Umriss, gedämpfter Text und ein klares weißes Popup. Reduzieren Sie es, bis es so schlicht ist, wie Sie es wollen.
coin-moebius-buy {
/* the button */
--cm-button-bg: transparent;
--cm-button-color: #374151;
--cm-button-radius: 6px;
/* the popup, styled to match */
--cm-modal-bg: #fff;
--cm-color: #374151;
--cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
border-radius: 8px;
border: 1px solid #e5e7eb;
}Die Beispiele oben sitzen auf leerem Hintergrund. Hier steht es stattdessen auf einer Seite, eingebettet in eine Karte, mit aktiviertem editierbarem Betrag, sodass der Käufer wählt, was er gibt. Klicken Sie und probieren Sie es.
Geben Sie ein Trinkgeld. Es hält den Laden am Laufen und die Beiträge im Fluss.
coin-moebius-buy {
/* the button */
--cm-button-bg: #b45309;
--cm-button-color: #fff;
--cm-button-radius: 8px;
--cm-font: Georgia, serif;
/* the popup, styled to match */
--cm-modal-bg: #fffaf3;
--cm-color: #7c4a02;
--cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
border-radius: 14px;
}Fügen Sie editable-amount="true" hinzu, und das Popup zeigt ein Betragsfeld, das der Käufer ausfüllt, für Trinkgelder, Spenden oder Zahlen-was-du-willst. Lassen Sie es weg, was die Voreinstellung ist, und der amount, den Sie festlegen, ist fix und es erscheint kein Feld. So oder so bleiben die Zahlungs-Buttons deaktiviert, bis der Betrag eine positive Zahl ist, sodass ein Käufer nicht für nichts auschecken kann.
Jede Fläche, die Sie gestalten können. Setzen Sie die Variablen am Button; den Rest erreichen Sie mit ::part().
Setzen Sie diese am Element coin-moebius-buy (oder an einem seiner Vorfahren, da Custom-Properties vererben):
| Property | Standard | Was es steuert |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Schriftfamilie für das Button-Label und jedes Textelement im Auswahl-Modal. |
--cm-color | #ededed (#1f1f1f mit theme="light") | Textfarbe für das Popup und seine Anweisungen. |
--cm-button-bg | #2b2b2b (#f5f5f5 mit theme="light") | Hintergrundfarbe des Buttons. Passt standardmäßig zur Popup-Fläche. |
--cm-button-color | #ededed (#1f1f1f mit theme="light") | Textfarbe des Buttons. |
--cm-button-radius | 6px | Eckenradius des Buttons. Nutzen Sie 999px für eine Pille, 0 für eckig. |
--cm-modal-bg | #2b2b2b (#f5f5f5 mit theme="light") | Hintergrund des Auswahl-Popups. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Hintergrundtönung hinter dem Auswahl-Modal. |
Für alles jenseits der obigen Variablen sprechen Sie die benannten Parts der Komponente aus Ihrem Seiten-CSS an. Der Button stellt acht bereit:
| Part | Element |
|---|---|
button | Der Buy-Button selbst. |
modal | Der bildschirmfüllende Overlay-Container hinter der Auswahl. |
dialog | Die zentrierte Auswahl-Modal-Box. |
provider | Jede Zahlungsanbieter-Option innerhalb der Auswahl. |
provider-icon | Das kleine Symbol neben dem Namen eines Anbieters. |
provider-name | Der Text des Anbieternamens. |
close | Der "Abbrechen"-Button unten in der Auswahl. |
instructions | Das Anweisungsfeld, das bei Zahlen per Post gezeigt wird (die Postadresse + der Referenzcode). |
Das Popup ist standardmäßig dunkel. Für ein helles Popup fügen Sie theme="light" am Element hinzu. Das ist der ganze Schalter, und er folgt nicht der Geräteeinstellung des Besuchers, sodass das, was Sie wählen, jeder Käufer sieht. Möchten Sie etwas Bestimmtes? Setzen Sie eine der obigen Variablen über eines der Themes und Ihre Werte gewinnen.
Ein paar Dinge sind in v1 absichtlich fest verdrahtet: die 120ms-Hover-Übergänge, der z-index des Modals und der meiste Abstand/Innenabstand innerhalb der Auswahl. Wenn ein Markenbedarf auf eines davon trifft, ist die Umgehung derselbe ::part()-Selektor mit einer !important-Überschreibung; die sauberere Lösung ist, uns zu bitten, eine CSS-Variable dafür hinzuzufügen. Der SDK-Issue-Tracker ist der richtige Ort dafür.
Wählen Sie, welche Methoden im Popup erscheinen, benennen Sie sie um und legen Sie ihre Reihenfolge für jedes Produkt in Ihrem Dashboard fest. Ein Abo kann das Zahlen per Post weglassen, während ein Download es behält.
Kopieren Sie ein beliebiges Beispiel in Ihr Stylesheet und nehmen Sie Zahlungen entgegen. Kostenlos zum Start, keine Karte.