Le bouton d'achat
Le bouton d'achat est quelques lignes de HTML que vous collez sur n'importe quelle page. Aucun framework, aucune étape d'installation de votre côté. Le bouton s'affiche au premier rendu ; le sélecteur de fournisseurs et les SDK des fournisseurs de paiement se chargent à la demande la première fois qu'un acheteur clique. Il fonctionne sur tout site ou framework qui rend du HTML, y compris les créateurs de sites no-code qui vous laissent coller des embeds HTML.
Confirmé fonctionnel avec : Angular, Hugo, Jekyll, HTML brut, Webflow (embed Custom Code), Carrd (élément Embed), Framer (embed HTML), Squarespace (Code Block), WordPress (bloc Custom HTML), Ghost, sites Notion (widgets d'embed HTML). Si votre site vous laisse coller du HTML sur une page, le bouton d'achat y fonctionne.
Référence des attributs
| Attribut | Requis | Ce qu'il accepte | Notes |
|---|---|---|---|
endpoint | Non | Chaîne URL | Omettez-le presque toujours. Le bouton détecte automatiquement sa base d'API : https://api.coinmoebius.com en production, http://localhost:8787 sur localhost. Ne le définissez qu'en surcharge pour une configuration inhabituelle (par ex. un proxy auto-hébergé devant l'API). |
project-id | Oui | Chaîne, préfixée proj_ | Depuis votre page de projet dans le tableau de bord. Sans danger à exposer publiquement, c'est un identifiant, pas une donnée secrète. |
product-id | Oui (en mode strict) / Recommandé (en mode ad-hoc) | Chaîne, le format que vous voulez | Votre identifiant de produit interne. En mode strict (la valeur par défaut), c'est ainsi que le worker recherche le prix dans votre catalogue. En mode ad-hoc, il est toujours transmis à vos webhooks dans metadata.productId pour que vous puissiez relier les transactions à votre inventaire. Voir la section Mode strict vs mode ad-hoc ci-dessous. |
amount | Uniquement en mode ad-hoc | Nombre décimal en chaîne | Le prix en unités principales (par ex. dollars, pas cents). Doit être positif. Omettez-le en mode strict. Le worker lit le prix canonique dans votre catalogue et ignore toute valeur dans le HTML. Requis uniquement quand le projet est en mode ad-hoc et que le product-id n'est pas dans le catalogue. |
currency | Uniquement en mode ad-hoc | Code ISO 4217 à trois lettres ou votre propre nom d'unité | USD, EUR, etc. pour les rails de cartes / crypto. Le fournisseur de paiement par courrier accepte n'importe quelle chaîne (par ex. GBK) parce que c'est le commerçant qui règle la transaction. Même règle que amount : omettez en mode strict, requis en mode ad-hoc pour les produits absents du catalogue. |
label | Non | Chaîne | Le texte du bouton. Par défaut Buy. Servez-vous-en pour distinguer les boutons sur la même page. |
customer-ref | Non | Chaîne, le format que vous voulez | Un identifiant opaque pour l'acheteur dans votre propre système, comme un identifiant d'utilisateur connecté. Le bouton le transmet au worker en tant que metadata.customerRef, et le worker étiquette la transaction avec. Plus tard, vous pouvez demander « lequel de mes utilisateurs a payé ? » avec votre propre identifiant, sans que nous détenions la moindre donnée client réelle. Omettez-le pour les paiements anonymes. |
theme | Non | dark ou light | Choisit le jeu de couleurs intégré pour le bouton et la fenêtre ensemble. Par défaut dark. Définissez theme="light" pour le jeu clair. Vos variables CSS surchargent l'un ou l'autre. Voir le guide de style. |
editable-amount | Non | true ou false | Quand true, la fenêtre affiche un champ de montant que l'acheteur remplit (pourboires, dons, prix libre). Par défaut false, où le amount que vous fixez est figé et aucun champ n'apparaît. Les boutons de paiement restent désactivés tant que le montant n'est pas un nombre positif. |
Plusieurs boutons sur une page
Le script enregistre le bouton une fois, puis n'importe quel nombre d'instances peut s'afficher sur une page. Chaque instance est indépendante. L'exemple ci-dessous utilise le mode strict (la valeur par défaut) : aucun amount ni currency dans le HTML, parce que le worker recherche le prix de chaque produit dans votre catalogue.
<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>Si votre projet est en mode ad-hoc (widgets de don, cagnottes), chaque bouton inclut aussi amount et currency. Voir Mode strict vs mode ad-hoc pour le tableau complet.
Personnaliser le bouton
Le bouton d'achat s'affiche dans un Shadow DOM, ce qui signifie qu'aucun des CSS existants de votre page n'atteint son intérieur. C'est volontaire : cela garde le bouton identique sur chaque site, et empêche une règle * { box-sizing: ... } égarée de casser la fenêtre du sélecteur. Vous le stylisez via deux surfaces depuis votre propre feuille de style : les propriétés CSS personnalisées pour les couleurs, les polices et la forme, et les sélecteurs ::part() pour tout le reste. Aucun JavaScript impliqué.
Chaque variable et chaque part est documentée sur le guide de style, avec des exemples en direct sur lesquels cliquer et à copier :
Ouvrir le guide de style interactif →
Les URL de réussite et d'annulation
Quand vous connectez Stripe ou NOWPayments dans l'onglet Fournisseurs du tableau de bord, vous définissez deux URL :
- URL de réussite, où l'acheteur atterrit après un paiement réussi. Stripe et NOWPayments ajoutent un paramètre de requête (
?session_id=...pour Stripe,?NP_id=...pour NOWPayments) pour que votre page de réussite puisse identifier quelle transaction s'est finalisée. La plupart des sites statiques affichent juste un message générique « Merci, votre paiement est en cours de traitement » et s'appuient sur le tableau de bord comme source de vérité. - URL d'annulation, où l'acheteur atterrit s'il renonce avant de payer. Souvent la même que votre page de panier.
Les deux URL sont configurées par fournisseur dans le tableau de bord, l'élément n'a pas besoin de les connaître.