Köpknappen
Köpknappen är några rader HTML som du klistrar in på valfri sida. Inget ramverk, inget installationssteg på din sida. Knappen renderas vid första ritningen; leverantörsväljaren och betalningsleverantörernas SDK:er laddas vid behov första gången en köpare klickar. Det fungerar på varje webbplats eller ramverk som renderar HTML, inklusive de kodfria webbplatsbyggarna som låter dig klistra in HTML-inbäddningar.
Bekräftat fungerande med: Angular, Hugo, Jekyll, ren HTML, Webflow (Custom Code-inbäddning), Carrd (Embed-element), Framer (HTML-inbäddning), Squarespace (Code Block), WordPress (Custom HTML-block), Ghost, Notion-sidor (HTML-inbäddningswidgetar). Om din webbplats låter dig klistra in HTML på en sida fungerar köpknappen där.
Attributreferens
| Attribut | Krävs | Vad det accepterar | Anteckningar |
|---|---|---|---|
endpoint | Nej | URL-sträng | Utelämna nästan alltid detta. Knappen upptäcker sin API-bas automatiskt: https://api.coinmoebius.com i produktion, http://localhost:8787 på localhost. Ställ bara in det som en åsidosättning för en ovanlig uppsättning (t.ex. en självhostad proxy framför API:et). |
project-id | Ja | Sträng, med prefix proj_ | Från din projektsida i instrumentpanelen. Säker att exponera offentligt, det är en identifierare, inte en uppgift. |
product-id | Ja (i strikt läge) / Rekommenderas (i ad-hoc-läge) | Sträng, valfritt format du väljer | Din interna produktidentifierare. I strikt läge (standard) är detta hur workern slår upp priset från din katalog. I ad-hoc-läge skickas det fortfarande vidare till dina webhooks i metadata.productId så att du kan koppla transaktioner tillbaka till lager. Se avsnittet Strikt läge vs ad-hoc-läge nedan. |
amount | Endast i ad-hoc-läge | Decimaltal som sträng | Priset i större enheter (t.ex. dollar, inte cent). Måste vara positivt. Utelämna detta i strikt läge. Workern läser det kanoniska priset från din katalog och ignorerar valfritt värde i HTML:en. Krävs endast när projektet är i ad-hoc-läge och product-id inte finns i katalogen. |
currency | Endast i ad-hoc-läge | Trebokstavskod enligt ISO 4217 eller ditt eget enhetsnamn | USD, EUR, osv. för kort- / kryptovägar. Leverantören för betala via post accepterar valfri sträng (t.ex. GBK) eftersom det är handlaren som avvecklar transaktionen. Samma regel som amount: utelämna i strikt läge, krävs i ad-hoc-läge för produkter som inte finns i katalogen. |
label | Nej | Sträng | Knapptexten. Standard är Buy. Använd detta för att skilja knappar åt på samma sida. |
customer-ref | Nej | Sträng, valfritt format du väljer | En ogenomskinlig identifierare för köparen i ditt eget system, som ett inloggat användar-id. Knappen vidarebefordrar den till workern som metadata.customerRef, och workern märker transaktionen med den. Senare kan du fråga "vilken av mina användare betalade?" med ditt eget id, utan att vi håller någon faktisk kunddata. Utelämna för anonyma köp. |
theme | Nej | dark eller light | Väljer det inbyggda färgschemat för knappen och rutan tillsammans. Standard är dark. Ställ in theme="light" för det ljusa schemat. Dina CSS-variabler åsidosätter vilketdera som helst. Se stilguiden. |
editable-amount | Nej | true eller false | När det är true visar rutan ett beloppsfält som köparen fyller i (dricks, donationer, betala-vad-du-vill). Standard är false, där amount du ställer in är fast och inget fält visas. Betalningsknapparna förblir inaktiverade tills beloppet är ett positivt tal. |
Flera knappar på en sida
Skriptet registrerar knappen en gång, sedan kan valfritt antal instanser renderas på en sida. Varje instans är oberoende. Exemplet nedan använder strikt läge (standard): ingen amount eller currency i HTML:en, eftersom workern slår upp priset från varje produkt i din katalog.
<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>Om ditt projekt är i ad-hoc-läge (donationswidgetar, dricksburkar) inkluderar varje knapp också amount och currency. Se Strikt läge vs ad-hoc-läge för hela bilden.
Anpassa knappen
Köpknappen renderas inuti en Shadow DOM, vilket innebär att ingen av din sidas befintliga CSS når in i den. Det är avsiktligt: det håller knappen likadan på varje webbplats och hindrar en ströregel * { box-sizing: ... } från att förstöra väljarmodalen. Du formar den genom två ytor från din egen stilmall: CSS-anpassade egenskaper för färger, typsnitt och form, och ::part()-selektorer för allt annat. Ingen JavaScript inblandad.
Varje variabel och del är dokumenterad i stilguiden, med levande exempel som du kan klicka på och kopiera:
Öppna den interaktiva stilguiden →
URL:erna för lyckat och avbrutet
När du ansluter Stripe eller NOWPayments i instrumentpanelens Leverantörer-flik ställer du in två URL:er:
- Lyckad-URL, dit köparen landar efter en lyckad betalning. Stripe och NOWPayments lägger till en frågeparameter (
?session_id=...för Stripe,?NP_id=...för NOWPayments) så att din lyckad-sida kan identifiera vilken transaktion som slutfördes. De flesta statiska webbplatser visar bara ett generiskt "Tack, din betalning behandlas"-meddelande och förlitar sig på instrumentpanelen som sanningskälla. - Avbruten-URL, dit köparen landar om de backar ur före betalning. Ofta densamma som din kundkorgssida.
Båda URL:erna konfigureras per leverantör i instrumentpanelen, elementet behöver inte känna till dem.