Le bouton d'achat et la fenêtre de paiement qu'il ouvre adoptent tous deux vos couleurs, vos polices et votre forme. Vous définissez quelques variables CSS ; les deux suivent ensemble. Tout ce qui suit est un exemple fonctionnel sur lequel vous pouvez cliquer, avec le code exact qui l'a produit juste à côté.
Aucun de ces exemples n'est un thème prédéfini. Chaque apparence est construite à partir du CSS simple affiché à côté. Copiez-en un comme point de départ et changez ce que vous voulez.
Ce sont de vrais boutons avec des fournisseurs fictifs et un faux code de référence. Aucun paiement n'est prélevé. Cliquez sur un bouton pour ouvrir sa fenêtre, puis lisez le code qui l'a stylisé.
Aucun CSS, aucun attribut. Le bouton et sa fenêtre partagent un anthracite neutre par défaut. C'est theme="dark", la valeur par défaut, donc l'écrire explicitement ne change rien.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Ajoutez theme="light" et le bouton comme la fenêtre passent à un blanc cassé doux. Un attribut, aucun CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Chacun de ces exemples n'est que le CSS affiché à côté, rien de plus. Prenez-en un, collez-le dans votre propre feuille de style et changez les valeurs. Mélangez-les comme bon vous semble.
Un bouton indigo avec une fenêtre indigo assortie, défini avec une poignée de variables CSS. Changez n'importe quelle valeur pour le recolorer.
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;
}Fond noir, texte vert à chasse fixe, coins carrés. La fenêtre suit la même apparence. Chaque valeur ici est à vous d'échanger.
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;
}Un bouton rose chaud avec une fenêtre rose doux assortie. Arrondissez les coins plus ou moins en modifiant un seul nombre.
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;
}Une face de bouton en dégradé, avec la fenêtre teintée pour l'accorder. Peignez la face du bouton comme vous voulez.
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;
}Un fin contour, un texte discret et une fenêtre blanche épurée. Dépouillez-le jusqu'à ce qu'il soit aussi sobre que vous le souhaitez.
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;
}Les exemples ci-dessus reposent sur un fond vide. Le voici plutôt sur une page, niché dans une carte, avec le montant modifiable activé pour que l'acheteur choisisse ce qu'il donne. Cliquez et essayez.
Laissez un pourboire. Ça garde les lumières allumées et les publications qui arrivent.
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;
}Ajoutez editable-amount="true" et la fenêtre affiche un champ de montant que l'acheteur remplit, pour les pourboires, les dons ou le prix libre. Laissez-le désactivé, ce qui est la valeur par défaut, et le amount que vous fixez est figé et aucun champ n'apparaît. Dans les deux cas, les boutons de paiement restent désactivés tant que le montant n'est pas un nombre positif, pour qu'un acheteur ne puisse pas régler pour rien.
Chaque surface que vous pouvez styliser. Définissez les variables sur le bouton ; atteignez le reste avec ::part().
Définissez-les sur l'élément coin-moebius-buy (ou sur n'importe lequel de ses ancêtres, puisque les propriétés personnalisées sont héritées) :
| Propriété | Par défaut | Ce qu'elle contrôle |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Famille de police pour le libellé du bouton et chaque élément de texte à l'intérieur de la fenêtre du sélecteur. |
--cm-color | #ededed (#1f1f1f avec theme="light") | Couleur de texte pour la fenêtre et ses instructions. |
--cm-button-bg | #2b2b2b (#f5f5f5 avec theme="light") | Couleur de fond du bouton. Correspond à la surface de la fenêtre par défaut. |
--cm-button-color | #ededed (#1f1f1f avec theme="light") | Couleur de texte du bouton. |
--cm-button-radius | 6px | Rayon des coins du bouton. Utilisez 999px pour une pilule, 0 pour carré. |
--cm-modal-bg | #2b2b2b (#f5f5f5 avec theme="light") | Fond de la fenêtre du sélecteur. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Teinte de l'arrière-plan derrière la fenêtre du sélecteur. |
Pour tout ce qui dépasse les variables ci-dessus, ciblez les parties nommées du composant depuis le CSS de votre page. Le bouton en expose huit :
| Part | Élément |
|---|---|
button | Le bouton d'achat lui-même. |
modal | Le conteneur de superposition plein écran derrière le sélecteur. |
dialog | La boîte centrée de la fenêtre du sélecteur. |
provider | Chaque option de fournisseur de paiement à l'intérieur du sélecteur. |
provider-icon | La petite icône à côté du nom d'un fournisseur. |
provider-name | Le texte du nom du fournisseur. |
close | Le bouton « Annuler » en bas du sélecteur. |
instructions | Le panneau d'instructions affiché pour le paiement par courrier (l'adresse postale + le code de référence). |
La fenêtre est sombre par défaut. Pour une fenêtre claire, ajoutez theme="light" à l'élément. C'est tout l'interrupteur, et il ne suit pas le réglage de l'appareil du visiteur, donc ce que vous choisissez est ce que chaque acheteur voit. Vous voulez quelque chose de précis ? Définissez n'importe laquelle des variables ci-dessus par-dessus l'un ou l'autre thème et vos valeurs l'emportent.
Quelques éléments sont volontairement codés en dur en v1 : les transitions de survol de 120ms, le z-index de la fenêtre, et la plupart des espacements/marges internes du sélecteur. Si un besoin de marque tombe sur l'un de ceux-ci, le contournement est le même sélecteur ::part() avec une surcharge !important ; le correctif plus propre est de nous demander d'ajouter une variable CSS pour cela. Le suivi des issues du SDK est le bon endroit pour ça.
Choisissez quels modes apparaissent dans la fenêtre, renommez-les et définissez leur ordre pour chaque produit depuis votre tableau de bord. Un abonnement peut omettre le paiement par courrier alors qu'un téléchargement le conserve.
Copiez n'importe quel exemple dans votre feuille de style et commencez à encaisser. Gratuit pour démarrer, sans carte.