Przycisk kupna i otwierane przez niego okno płatności przyjmują Twoje kolory, czcionki i kształt. Ustawiasz kilka zmiennych CSS; oba zmieniają się razem. Wszystko poniżej to działający przykład, który możesz kliknąć, a tuż obok dokładny kod, który go stworzył.
Żaden z nich nie jest gotowym motywem. Każdy wygląd zbudowano z prostego CSS pokazanego obok. Skopiuj dowolny jako punkt wyjścia i zmień, co tylko chcesz.
To są działające przyciski z zastępczymi dostawcami i fikcyjnym kodem referencyjnym. Żadna płatność nie jest pobierana. Kliknij przycisk, by otworzyć jego okno, a potem przeczytaj kod, który je wystylizował.
Bez CSS, bez atrybutów. Przycisk i jego okno współdzielą jedną neutralną grafitową barwę od razu po wyjęciu z pudełka. To jest theme="dark", wartość domyślna, więc jej wypisanie niczego nie zmienia.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Dodaj theme="light", a zarówno przycisk, jak i okno przyjmą łagodny odcień złamanej bieli. Jeden atrybut, bez CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Każdy z nich to po prostu CSS pokazany obok, nic więcej. Weź dowolny, wklej go do własnego arkusza stylów i zmień wartości. Łącz je, jak chcesz.
Indygowy przycisk z dopasowanym indygowym oknem, ustawiony garścią zmiennych CSS. Zmień dowolną wartość, by zmienić kolory.
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;
}Czarne tło, zielony tekst o stałej szerokości znaku, kanciaste rogi. Okno podąża za tym samym wyglądem. Każdą wartość tutaj możesz wymienić.
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;
}Ciepły różowy przycisk z dopasowanym delikatnym różowym oknem. Zaokrąglij rogi bardziej lub mniej, edytując jedną liczbę.
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;
}Gradientowa powierzchnia przycisku, z oknem podbarwionym, by pasowało. Pomaluj powierzchnię przycisku, jak chcesz.
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;
}Cienki kontur, stonowany tekst i czyste białe okno. Ogranicz go, aż będzie tak prosty, jak chcesz.
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;
}Powyższe przykłady stoją na pustym tle. Tutaj jest za to na stronie, wpasowany w kartę, z włączoną edytowalną kwotą, więc kupujący wybiera, ile dać. Kliknij i wypróbuj.
Zostaw napiwek. Dzięki niemu światło się świeci, a wpisy powstają.
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;
}Dodaj editable-amount="true", a okno pokaże pole kwoty, które kupujący wypełnia, do napiwków, darowizn lub płać ile chcesz. Pozostaw to wyłączone, co jest ustawieniem domyślnym, a ustawiona przez Ciebie amount jest stała i żadne pole się nie pojawia. Tak czy inaczej przyciski płatności pozostają nieaktywne, dopóki kwota nie będzie liczbą dodatnią, więc kupujący nie może sfinalizować zakupu za nic.
Każda powierzchnia, którą możesz stylizować. Ustaw zmienne na przycisku; do reszty dotrzesz przez ::part().
Ustaw je na elemencie coin-moebius-buy (lub na dowolnym z jego przodków, ponieważ właściwości niestandardowe są dziedziczone):
| Właściwość | Domyślnie | Czym steruje |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Rodzina czcionek dla etykiety przycisku i każdego elementu tekstowego wewnątrz okna selektora. |
--cm-color | #ededed (#1f1f1f przy theme="light") | Kolor tekstu okna i jego instrukcji. |
--cm-button-bg | #2b2b2b (#f5f5f5 przy theme="light") | Kolor tła przycisku. Domyślnie pasuje do powierzchni okna. |
--cm-button-color | #ededed (#1f1f1f przy theme="light") | Kolor tekstu przycisku. |
--cm-button-radius | 6px | Promień zaokrąglenia rogów przycisku. Użyj 999px dla pigułki, 0 dla kwadratu. |
--cm-modal-bg | #2b2b2b (#f5f5f5 przy theme="light") | Tło okna selektora. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Odcień tła za oknem selektora. |
Dla wszystkiego poza powyższymi zmiennymi kieruj się do nazwanych partów komponentu ze swojego CSS strony. Przycisk udostępnia osiem:
| Part | Element |
|---|---|
button | Sam przycisk kupna. |
modal | Kontener nakładki na pełen widok za selektorem. |
dialog | Wyśrodkowane okno selektora. |
provider | Każda opcja dostawcy płatności wewnątrz selektora. |
provider-icon | Mała ikona obok nazwy dostawcy. |
provider-name | Tekst nazwy dostawcy. |
close | Przycisk "Cancel" na dole selektora. |
instructions | Panel instrukcji pokazywany przy płatności pocztą (adres pocztowy + kod referencyjny). |
Okno jest domyślnie ciemne. Dla jasnego okna dodaj do elementu theme="light". To cały przełącznik i nie podąża za ustawieniem urządzenia odwiedzającego, więc to, co wybierzesz, widzi każdy kupujący. Chcesz czegoś konkretnego? Ustaw dowolną z powyższych zmiennych na wierzchu któregokolwiek motywu, a Twoje wartości wygrywają.
Kilka rzeczy jest w v1 celowo zakodowanych na sztywno: przejścia 120ms przy najechaniu, z-index okna oraz większość odstępów/wypełnienia wewnątrz selektora. Jeśli potrzeba związana z marką trafi na jedną z nich, obejściem jest ten sam selektor ::part() z nadpisaniem !important; czystszą poprawką jest poproszenie nas o dodanie dla niej zmiennej CSS. System zgłoszeń SDK to właściwe miejsce na to.
Wybierz, które metody pokazują się w oknie, zmień ich nazwy i ustaw ich kolejność dla każdego produktu w panelu. Subskrypcja może pominąć płatność pocztą, podczas gdy plik do pobrania ją zachowa.
Skopiuj dowolny przykład do swojego arkusza stylów i zacznij przyjmować płatności. Darmowy start, bez karty.