Przycisk kupna
Przycisk kupna to kilka linijek HTML, które wklejasz na dowolnej stronie. Bez frameworka, bez kroku instalacji po Twojej stronie. Przycisk renderuje się przy pierwszym malowaniu; selektor dostawców i SDK dostawców płatności wczytują się na żądanie, gdy kupujący kliknie po raz pierwszy. Działa na każdej stronie lub w każdym frameworku, który renderuje HTML, w tym w kreatorach stron bez kodu, które pozwalają wklejać osadzony HTML.
Potwierdzone działanie z: Angular, Hugo, Jekyll, czysty HTML, Webflow (embed Custom Code), Carrd (element Embed), Framer (embed HTML), Squarespace (Code Block), WordPress (blok Custom HTML), Ghost, witryny Notion (widżety osadzonego HTML). Jeśli Twoja witryna pozwala wkleić HTML na stronie, przycisk kupna tam działa.
Opis atrybutów
| Atrybut | Wymagany | Co przyjmuje | Uwagi |
|---|---|---|---|
endpoint | Nie | Ciąg URL | Niemal zawsze go pomijaj. Przycisk automatycznie wykrywa bazę API: https://api.coinmoebius.com w produkcji, http://localhost:8787 na localhost. Ustaw go jako nadpisanie tylko dla nietypowej konfiguracji (np. samodzielnie hostowanego proxy przed API). |
project-id | Tak | Ciąg z prefiksem proj_ | Ze strony Twojego projektu w panelu. Bezpieczny do publicznego ujawnienia, to identyfikator, a nie poświadczenie. |
product-id | Tak (w trybie ścisłym) / Zalecany (w trybie ad-hoc) | Ciąg w dowolnym wybranym formacie | Twój wewnętrzny identyfikator produktu. W trybie ścisłym (domyślnym) to dzięki niemu worker odczytuje cenę z Twojego katalogu. W trybie ad-hoc nadal jest przekazywany do Twoich webhooków w metadata.productId, byś mógł powiązać transakcje z zapasami. Zobacz sekcję Tryb ścisły a tryb ad-hoc poniżej. |
amount | Tylko w trybie ad-hoc | Liczba dziesiętna jako ciąg | Cena w jednostkach głównych (np. dolary, a nie centy). Musi być dodatnia. Pomiń to w trybie ścisłym. Worker odczytuje cenę kanoniczną z Twojego katalogu i ignoruje jakąkolwiek wartość w HTML. Wymagana tylko wtedy, gdy projekt jest w trybie ad-hoc, a product-id nie ma w katalogu. |
currency | Tylko w trybie ad-hoc | Trzyliterowy kod ISO 4217 lub Twoja własna nazwa jednostki | USD, EUR itd. dla metod kartowych / krypto. Dostawca płatności pocztą przyjmuje dowolny ciąg (np. GBK), bo to sprzedawca rozlicza transakcję. Ta sama zasada co przy amount: pomiń w trybie ścisłym, wymagana w trybie ad-hoc dla produktów spoza katalogu. |
label | Nie | Ciąg | Tekst przycisku. Domyślnie Buy. Użyj tego, by odróżnić przyciski na tej samej stronie. |
customer-ref | Nie | Ciąg w dowolnym wybranym formacie | Nieprzejrzysty identyfikator kupującego w Twoim własnym systemie, na przykład id zalogowanego użytkownika. Przycisk przekazuje go do workera jako metadata.customerRef, a worker oznacza nim transakcję. Później możesz zapytać "który z moich użytkowników zapłacił?" za pomocą własnego id, a my nie trzymamy żadnych rzeczywistych danych klienta. Pomiń dla anonimowych checkoutów. |
theme | Nie | dark lub light | Wybiera wbudowany schemat kolorów dla przycisku i okna razem. Domyślnie dark. Ustaw theme="light" dla schematu jasnego. Twoje zmienne CSS nadpisują dowolny z nich. Zobacz przewodnik stylizacji. |
editable-amount | Nie | true lub false | Gdy true, okno pokazuje pole kwoty, które kupujący wypełnia (napiwki, darowizny, płać ile chcesz). Domyślnie false, gdzie ustawiona przez Ciebie amount jest stała i żadne pole się nie pojawia. Przyciski płatności pozostają nieaktywne, dopóki kwota nie będzie liczbą dodatnią. |
Wiele przycisków na jednej stronie
Skrypt rejestruje przycisk raz, a następnie dowolna liczba instancji może renderować się na stronie. Każda instancja jest niezależna. Przykład poniżej używa trybu ścisłego (domyślnego): bez amount ani currency w HTML, bo worker odczytuje cenę z każdego produktu w Twoim katalogu.
<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>Jeśli Twój projekt jest w trybie ad-hoc (widżety darowizn, słoiki na napiwki), każdy przycisk zawiera też amount i currency. Zobacz Tryb ścisły a tryb ad-hoc, by poznać pełny obraz.
Stylizacja przycisku
Przycisk kupna renderuje się wewnątrz Shadow DOM, co oznacza, że żaden z istniejących styli CSS Twojej strony do niego nie sięga. Jest to celowe: utrzymuje ten sam wygląd przycisku na każdej witrynie i powstrzymuje błądzącą regułę * { box-sizing: ... } przed zepsuciem okna selektora. Stylizujesz go przez dwie powierzchnie z własnego arkusza stylów: niestandardowe właściwości CSS dla kolorów, czcionek i kształtu oraz selektory ::part() dla całej reszty. Żadnego JavaScriptu.
Każda zmienna i każdy part są udokumentowane w przewodniku stylizacji, z przykładami na żywo, które możesz kliknąć i skopiować:
Otwórz interaktywny przewodnik stylizacji →
Adresy URL potwierdzenia i anulowania
Gdy podłączasz Stripe lub NOWPayments w zakładce Providers w panelu, ustawiasz dwa adresy URL:
- Success URL, gdzie trafia kupujący po udanej płatności. Stripe i NOWPayments dołączają parametr zapytania (
?session_id=...dla Stripe,?NP_id=...dla NOWPayments), by Twoja strona potwierdzenia mogła rozpoznać, która transakcja się zakończyła. Większość stron statycznych po prostu pokazuje ogólny komunikat "Dziękujemy, Twoja płatność jest przetwarzana" i polega na panelu jako źródle prawdy. - Cancel URL, gdzie trafia kupujący, jeśli wycofa się przed zapłatą. Często ten sam co Twoja strona koszyka.
Oba adresy URL konfiguruje się na dostawcę w panelu, element nie musi o nich wiedzieć.