Il pulsante di acquisto e la finestra di pagamento che apre prendono entrambi i tuoi colori, font e forma. Imposti poche variabili CSS; si adeguano insieme. Tutto qui sotto è un esempio funzionante cliccabile, con il codice esatto che lo ha prodotto proprio accanto.
Nessuno di questi è un tema preimpostato. Ogni aspetto è costruito dal CSS semplice mostrato accanto. Copia uno qualsiasi come punto di partenza e cambia ciò che vuoi.
Questi sono pulsanti dal vivo con provider fittizi e un codice di riferimento finto. Nessun pagamento viene effettuato. Clicca un pulsante per aprire la sua finestra, poi leggi il codice che lo ha personalizzato.
Nessun CSS, nessun attributo. Il pulsante e la sua finestra condividono un grigio antracite neutro di base. Questo è theme="dark", il predefinito, quindi scriverlo non cambia nulla.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Aggiungi theme="light" e sia il pulsante sia la finestra diventano di un bianco sporco delicato. Un attributo, niente CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Ognuno di questi è solo il CSS mostrato accanto, niente di più. Prendine uno qualsiasi, incollalo nel tuo foglio di stile e cambia i valori. Mescolali come vuoi.
Un pulsante indaco con una finestra indaco abbinata, impostato con una manciata di variabili CSS. Cambia qualsiasi valore per ricolorarlo.
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;
}Sfondo nero, testo monospace verde, angoli squadrati. La finestra segue lo stesso aspetto. Ogni valore qui è tuo da cambiare.
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 pulsante rosa caldo con una finestra rosa tenue abbinata. Arrotonda gli angoli di più o di meno modificando un numero.
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;
}Una faccia del pulsante a gradiente, con la finestra tinteggiata in tono. Dipingi la faccia del pulsante come preferisci.
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 contorno sottile, testo attenuato e una finestra bianca pulita. Riducilo all'osso finché è semplice quanto vuoi.
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;
}Gli esempi sopra stanno su uno sfondo vuoto. Qui invece è su una pagina, inserito in una card, con l'importo modificabile attivo così il cliente sceglie quanto donare. Cliccalo e prova.
Lascia una mancia. Tiene le luci accese e i contenuti in arrivo.
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;
}Aggiungi editable-amount="true" e la finestra mostra un campo importo che il cliente compila, per mance, donazioni o paga-quanto-vuoi. Lascialo disattivato, che è il predefinito, e l'amount che imposti è fisso e non appare alcun campo. In entrambi i casi i pulsanti di pagamento restano disabilitati finché l'importo non è un numero positivo, così un cliente non può completare l'acquisto per niente.
Ogni superficie che puoi personalizzare. Imposta le variabili sul pulsante; raggiungi il resto con ::part().
Imposta queste sull'elemento coin-moebius-buy (o su uno qualsiasi dei suoi antenati, dato che le proprietà personalizzate vengono ereditate):
| Proprietà | Predefinito | Cosa controlla |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Famiglia di font per l'etichetta del pulsante e ogni elemento di testo dentro il modale del selettore. |
--cm-color | #ededed (#1f1f1f con theme="light") | Colore del testo per la finestra e le sue istruzioni. |
--cm-button-bg | #2b2b2b (#f5f5f5 con theme="light") | Colore di sfondo del pulsante. Per impostazione predefinita corrisponde alla superficie della finestra. |
--cm-button-color | #ededed (#1f1f1f con theme="light") | Colore del testo del pulsante. |
--cm-button-radius | 6px | Raggio degli angoli del pulsante. Usa 999px per una pillola, 0 per squadrato. |
--cm-modal-bg | #2b2b2b (#f5f5f5 con theme="light") | Sfondo della finestra del selettore. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Tinta dello sfondo dietro il modale del selettore. |
Per qualsiasi cosa oltre alle variabili sopra, mira alle parti nominate del componente dal CSS della tua pagina. Il pulsante ne espone otto:
| Parte | Elemento |
|---|---|
button | Il pulsante di acquisto in sé. |
modal | Il contenitore overlay a tutto viewport dietro il selettore. |
dialog | Il box modale centrato del selettore. |
provider | Ogni opzione di provider di pagamento dentro il selettore. |
provider-icon | La piccola icona accanto al nome di un provider. |
provider-name | Il testo del nome del provider. |
close | Il pulsante "Annulla" in fondo al selettore. |
instructions | Il pannello di istruzioni mostrato per il pagamento per posta (l'indirizzo postale + codice di riferimento). |
La finestra è scura per impostazione predefinita. Per una finestra chiara, aggiungi theme="light" all'elemento. È tutto qui, e non segue l'impostazione del dispositivo del visitatore, quindi ciò che scegli è ciò che ogni cliente vede. Vuoi qualcosa di specifico? Imposta una qualsiasi delle variabili sopra su uno dei due temi e vincono i tuoi valori.
Alcune cose sono intenzionalmente fissate nella v1: le transizioni hover da 120ms, lo z-index del modale e la maggior parte di spaziatura/padding dentro il selettore. Se un'esigenza di brand ricade su una di queste, la soluzione provvisoria è lo stesso selettore ::part() con un override !important; la correzione più pulita è chiederci di aggiungere una variabile CSS per essa. Il tracker delle issue dell'SDK è il posto giusto per questo.
Scegli quali metodi appaiono nella finestra, rinominali e imposta il loro ordine per ogni prodotto dalla tua dashboard. Un abbonamento può saltare il pagamento per posta mentre un download lo mantiene.
Copia un esempio nel tuo foglio di stile e inizia a incassare. Gratis per iniziare, senza carta.