De buy button
De buy button is een paar regels HTML die u op elke pagina plakt. Geen framework, geen installatiestap aan uw kant. De knop wordt bij de eerste paint weergegeven; de providerkeuzehulp en de SDK's van de betaalproviders laden op aanvraag de eerste keer dat een koper klikt. Hij werkt in elke site of elk framework dat HTML weergeeft, inclusief de no-code-sitebouwers die u HTML-embeds laten plakken.
Bevestigd werkend met: Angular, Hugo, Jekyll, kale HTML, Webflow (Custom Code-embed), Carrd (Embed-element), Framer (HTML-embed), Squarespace (Code Block), WordPress (Custom HTML-blok), Ghost, Notion-sites (HTML-embed-widgets). Als uw site u HTML op een pagina laat plakken, werkt de buy button daar.
Attribuutreferentie
| Attribuut | Vereist | Wat het accepteert | Opmerkingen |
|---|---|---|---|
endpoint | Nee | URL-string | Laat dit bijna altijd weg. De knop detecteert zijn API-basis automatisch: https://api.coinmoebius.com in productie, http://localhost:8787 op localhost. Stel het alleen in als override voor een ongebruikelijke opzet (bijv. een zelf gehoste proxy vóór de API). |
project-id | Ja | String, met voorvoegsel proj_ | Van uw projectpagina in het dashboard. Veilig om publiek bloot te stellen, het is een identificatie, geen inloggegeven. |
product-id | Ja (in strikte modus) / Aanbevolen (in ad-hocmodus) | String, elk formaat dat u kiest | Uw interne productidentificatie. In strikte modus (de standaard) is dit hoe de worker de prijs uit uw catalogus opzoekt. In ad-hocmodus wordt het nog steeds doorgegeven aan uw webhooks in metadata.productId zodat u transacties terug kunt koppelen aan voorraad. Zie de sectie Strikte modus vs ad-hocmodus hieronder. |
amount | Alleen in ad-hocmodus | Decimaal getal als string | De prijs in hoofdeenheden (bijv. dollars, niet centen). Moet positief zijn. Laat dit weg in strikte modus. De worker leest de canonieke prijs uit uw catalogus en negeert elke waarde in de HTML. Alleen vereist wanneer het project in ad-hocmodus staat en het product-id niet in de catalogus staat. |
currency | Alleen in ad-hocmodus | Drieletterige ISO 4217-code of uw eigen eenheidsnaam | USD, EUR, enz. voor kaart-/cryptorails. De betaling-per-post-provider accepteert elke string (bijv. GBK) omdat de verkoper degene is die de transactie afwikkelt. Zelfde regel als amount: weglaten in strikte modus, vereist in ad-hocmodus voor producten die niet in de catalogus staan. |
label | Nee | String | De knoptekst. Standaard Buy. Gebruik dit om knoppen op dezelfde pagina te onderscheiden. |
customer-ref | Nee | String, elk formaat dat u kiest | Een ondoorzichtige identificatie voor de koper in uw eigen systeem, zoals een ingelogd gebruikers-id. De knop stuurt het door naar de worker als metadata.customerRef, en de worker markeert de transactie ermee. Later kunt u vragen "welke van mijn gebruikers betaalde?" met uw eigen id, zonder dat wij enige echte klantgegevens bewaren. Weglaten voor anonieme checkouts. |
theme | Nee | dark of light | Kiest het ingebouwde kleurenschema voor de knop en popup samen. Standaard dark. Stel theme="light" in voor het lichte schema. Uw CSS-variabelen overschrijven beide. Zie de opmaakgids. |
editable-amount | Nee | true of false | Wanneer true, toont de popup een bedragveld dat de koper invult (fooien, donaties, betaal-wat-u-wilt). Standaard false, waarbij het amount dat u instelt vast is en er geen veld verschijnt. De betaalknoppen blijven uitgeschakeld totdat het bedrag een positief getal is. |
Meerdere knoppen op één pagina
Het script registreert de knop één keer, en daarna kan een willekeurig aantal instanties op een pagina worden weergegeven. Elke instantie is onafhankelijk. Het onderstaande voorbeeld gebruikt strikte modus (de standaard): geen amount of currency in de HTML, omdat de worker de prijs van elk product uit uw catalogus opzoekt.
<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>Als uw project in ad-hocmodus staat (donatiewidgets, fooienpotten), bevat elke knop ook amount en currency. Zie Strikte modus vs ad-hocmodus voor het volledige plaatje.
De knop thematiseren
De buy button wordt weergegeven binnen een Shadow DOM, wat betekent dat geen van de bestaande CSS van uw pagina erin reikt. Dat is bewust: het houdt de knop er op elke site hetzelfde uitzien, en belet een verdwaalde * { box-sizing: ... }-regel om de keuzehulp-modal te breken. U maakt het op via twee oppervlakken vanuit uw eigen stylesheet: CSS custom properties voor kleuren, lettertypen en vorm, en ::part()-selectors voor al het andere. Geen JavaScript betrokken.
Elke variabele en part is gedocumenteerd in de opmaakgids, met live voorbeelden die u kunt aanklikken en kopiëren:
Open de interactieve opmaakgids →
De success- en cancel-URL's
Wanneer u Stripe of NOWPayments verbindt op het tabblad Providers van het dashboard, stelt u twee URL's in:
- Success-URL, waar de koper belandt na een succesvolle betaling. Stripe en NOWPayments voegen een query-parameter toe (
?session_id=...voor Stripe,?NP_id=...voor NOWPayments) zodat uw succespagina kan identificeren welke transactie voltooide. De meeste statische sites tonen gewoon een generiek bericht "Bedankt, uw betaling wordt verwerkt" en vertrouwen op het dashboard als bron van waarheid. - Cancel-URL, waar de koper belandt als hij afhaakt voor het betalen. Vaak hetzelfde als uw winkelwagenpagina.
Beide URL's worden per provider geconfigureerd in het dashboard, het element hoeft er niets van te weten.