De buy button en de betaalpopup die hij opent nemen allebei uw kleuren, lettertypen en vorm over. U stelt een paar CSS-variabelen in; beide volgen samen. Alles hieronder is een werkend voorbeeld dat u kunt aanklikken, met de exacte code die het produceerde er pal naast.
Geen van deze zijn voorgedefinieerde thema's. Elke look is gebouwd uit de gewone CSS die ernaast staat. Kopieer er een als startpunt en verander wat u maar wilt.
Dit zijn live knoppen met plaatsvervangende providers en een nep-referentiecode. Er wordt geen betaling aangenomen. Klik op een knop om de popup te openen, en lees daarna de code die hem opmaakte.
Geen CSS, geen attributen. De knop en zijn popup delen standaard één neutraal antraciet. Dit is theme="dark", de standaard, dus het uitschrijven verandert niets.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Voeg theme="light" toe en zowel de knop als de popup worden zacht gebroken wit. Eén attribuut, geen CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Elk hiervan is gewoon de CSS die ernaast staat, niets meer. Neem er een, plak hem in uw eigen stylesheet en verander de waarden. Combineer ze zoals u wilt.
Een indigo knop met een bijpassende indigo popup, ingesteld met een handvol CSS-variabelen. Verander een waarde om hem te herkleuren.
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;
}Zwarte achtergrond, groene monospace-tekst, vierkante hoeken. De popup volgt dezelfde look. Elke waarde hier kunt u verwisselen.
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;
}Een warme roze knop met een bijpassende zachte roze popup. Rond de hoeken meer of minder af door één getal te bewerken.
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;
}Een knopvlak met verloop, met de popup in dezelfde tint. Schilder het knopvlak zoals u wilt.
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;
}Een dunne omlijning, gedempte tekst en een schone witte popup. Strip het terug tot het zo eenvoudig is als u wilt.
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;
}De voorbeelden hierboven staan op een lege achtergrond. Hier staat hij in plaats daarvan op een pagina, weggestopt in een kaart, met bewerkbaar bedrag ingeschakeld zodat de koper kiest wat hij geeft. Klik erop en probeer het.
Laat een fooi achter. Het houdt het licht aan en de berichten op gang.
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;
}Voeg editable-amount="true" toe en de popup toont een bedragveld dat de koper invult, voor fooien, donaties of betaal-wat-u-wilt. Laat het weg, wat de standaard is, en het amount dat u instelt is vast en er verschijnt geen veld. Hoe dan ook blijven de betaalknoppen uitgeschakeld totdat het bedrag een positief getal is, zodat een koper niet voor niets kan afrekenen.
Elk oppervlak dat u kunt opmaken. Stel de variabelen op de knop in; bereik de rest met ::part().
Stel deze in op het coin-moebius-buy-element (of een van zijn voorouders, aangezien custom properties overerven):
| Eigenschap | Standaard | Wat het bestuurt |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Lettertypefamilie voor het knoplabel en elk tekstelement in de keuzehulp-modal. |
--cm-color | #ededed (#1f1f1f met theme="light") | Tekstkleur voor de popup en zijn instructies. |
--cm-button-bg | #2b2b2b (#f5f5f5 met theme="light") | Achtergrondkleur van de knop. Komt standaard overeen met het popup-oppervlak. |
--cm-button-color | #ededed (#1f1f1f met theme="light") | Tekstkleur van de knop. |
--cm-button-radius | 6px | Hoekradius van de knop. Gebruik 999px voor een pil, 0 voor vierkant. |
--cm-modal-bg | #2b2b2b (#f5f5f5 met theme="light") | Achtergrond van de keuzehulp-popup. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Achtergrondtint achter de keuzehulp-modal. |
Voor alles buiten de bovenstaande variabelen richt u zich op de benoemde parts van de component vanuit uw pagina-CSS. De knop stelt er acht bloot:
| Part | Element |
|---|---|
button | De buy button zelf. |
modal | De full-viewport overlay-container achter de keuzehulp. |
dialog | Het gecentreerde keuzehulp-modalvak. |
provider | Elke betaalprovider-optie in de keuzehulp. |
provider-icon | Het kleine pictogram naast de naam van een provider. |
provider-name | De providernaam-tekst. |
close | De "Annuleren"-knop onderaan de keuzehulp. |
instructions | Het instructiepaneel getoond voor betaling per post (het postadres + de referentiecode). |
De popup is standaard donker. Voor een lichte popup voegt u theme="light" toe aan het element. Dat is de hele schakelaar, en hij volgt de apparaatinstelling van de bezoeker niet, dus wat u kiest is wat elke koper ziet. Iets specifieks willen? Stel een van de bovenstaande variabelen in bovenop een van beide thema's en uw waarden winnen.
Een paar dingen zijn in v1 bewust hardgecodeerd: de hover-overgangen van 120ms, de z-index van de modal, en de meeste spacing/padding in de keuzehulp. Als een merkbehoefte op een van deze landt, is de tijdelijke oplossing dezelfde ::part()-selector met een !important-override; de schonere oplossing is ons te vragen er een CSS-variabele voor toe te voegen. De SDK-issue-tracker is daar de juiste plek voor.
Kies welke methoden in de popup verschijnen, hernoem ze, en stel hun volgorde in voor elk product vanuit uw dashboard. Een abonnement kan betaling per post overslaan terwijl een download het behoudt.
Kopieer een voorbeeld in uw stylesheet en begin betalingen aan te nemen. Gratis om te beginnen, geen kaart.