Köpknappen och betalningspopupen den öppnar tar båda dina färger, typsnitt och form. Du ställer in några CSS-variabler; båda följer med tillsammans. Allt nedan är ett fungerande exempel du kan klicka på, med den exakta koden som producerade det precis bredvid.
Inget av det här är förinställda teman. Varje utseende byggs från den vanliga CSS som visas bredvid det. Kopiera vilket som helst som utgångspunkt och ändra vad du vill.
Det här är levande knappar med stand-in-leverantörer och en påhittad referenskod. Ingen betalning tas. Klicka på en knapp för att öppna dess popup, läs sedan koden som stylade den.
Ingen CSS, inga attribut. Knappen och dess popup delar ett neutralt koltrågrått direkt ur lådan. Det här är theme="dark", standarden, så att skriva ut det ändrar ingenting.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Lägg till theme="light" så blir både knappen och popupen en mjuk benvit. Ett attribut, ingen CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Var och en av dessa är bara den CSS som visas bredvid den, inget mer. Ta vilken som helst, klistra in den i ditt eget stilmall, och ändra värdena. Blanda dem hur du vill.
En indigo knapp med en matchande indigo popup, satt med en handfull CSS-variabler. Ändra vilket värde som helst för att färga om den.
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;
}Svart bakgrund, grön monospace-text, fyrkantiga hörn. Popupen följer samma utseende. Varje värde här är ditt att byta.
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;
}En varm rosa knapp med en mjuk rosa popup som matchar. Runda hörnen mer eller mindre genom att redigera en siffra.
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;
}En gradientknappyta, med popupen tonad för att matcha den. Måla knappytan hur du vill.
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;
}En tunn kontur, dämpad text och en ren vit popup. Skala ner det tills det är så enkelt du vill.
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;
}Exemplen ovan ligger på en tom bakgrund. Här är den på en sida i stället, instoppad i ett kort, med redigerbart belopp påslaget så att köparen väljer vad de ger. Klicka på den och prova.
Lämna en dricks. Den håller lamporna tända och inläggen kommande.
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;
}Lägg till editable-amount="true" så visar popupen ett beloppsfält köparen fyller i, för dricks, donationer eller betala-vad-du-vill. Lämna det avstängt, vilket är standard, så är beloppet amount du satt fast och inget fält dyker upp. Hur som helst förblir betalknapparna inaktiverade tills beloppet är ett positivt tal, så att en köpare inte kan gå till kassan för ingenting.
Varje yta du kan styla. Ställ in variablerna på knappen; nå resten med ::part().
Ställ in dessa på elementet coin-moebius-buy (eller någon av dess förfäder, eftersom anpassade egenskaper ärvs):
| Egenskap | Standard | Vad det styr |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Typsnittsfamilj för knappetiketten och varje textelement inuti väljarmodalen. |
--cm-color | #ededed (#1f1f1f med theme="light") | Textfärg för rutan och dess instruktioner. |
--cm-button-bg | #2b2b2b (#f5f5f5 med theme="light") | Knappens bakgrundsfärg. Matchar rutans yta som standard. |
--cm-button-color | #ededed (#1f1f1f med theme="light") | Knappens textfärg. |
--cm-button-radius | 6px | Knappens hörnradie. Använd 999px för en kapsel, 0 för fyrkantig. |
--cm-modal-bg | #2b2b2b (#f5f5f5 med theme="light") | Bakgrund för väljarrutan. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Bakgrundston bakom väljarmodalen. |
För allt utöver variablerna ovan, rikta in dig på komponentens namngivna delar från din sidas CSS. Knappen exponerar åtta:
| Del | Element |
|---|---|
button | Själva köpknappen. |
modal | Den helsidesstora överläggsbehållaren bakom väljaren. |
dialog | Den centrerade väljarmodalrutan. |
provider | Varje betalningsleverantörsalternativ inuti väljaren. |
provider-icon | Den lilla ikonen bredvid en leverantörs namn. |
provider-name | Texten med leverantörens namn. |
close | Knappen "Avbryt" längst ned i väljaren. |
instructions | Instruktionspanelen som visas för betala via post (postadressen + referenskoden). |
Rutan är mörk som standard. För en ljus ruta, lägg till theme="light" på elementet. Det är hela omkopplaren, och den följer inte besökarens enhetsinställning, så det du väljer är vad varje köpare ser. Vill du ha något specifikt? Ställ in någon av variablerna ovan ovanpå endera temat och dina värden vinner.
Några saker är avsiktligt hårdkodade i v1: hover-övergångarna på 120ms, modalens z-index och det mesta av mellanrum/utfyllnad inuti väljaren. Om ett varumärkesbehov landar på någon av dessa är lösningen samma ::part()-selektor med en !important-åsidosättning; den renare lösningen är att be oss lägga till en CSS-variabel för det. SDK:ts ärendehanterare är rätt ställe för det.
Välj vilka metoder som visas i popupen, byt namn på dem och sätt deras ordning för varje produkt från din instrumentpanel. En prenumeration kan hoppa över betalning via post medan en nedladdning behåller den.
Kopiera vilket exempel som helst in i ditt stilmall och börja ta emot betalningar. Gratis att börja, inget kort.