El botón de compra y la ventana de pago que abre toman tus colores, fuentes y forma. Tú configuras unas variables CSS y ambos las siguen juntos. Todo lo de abajo es un ejemplo funcional en el que puedes hacer clic, con el código exacto que lo produjo justo al lado.
Ninguno de estos es un tema prefijado. Cada apariencia se construye con el CSS sencillo que aparece a su lado. Copia cualquiera como punto de partida y cambia lo que quieras.
Estos son botones reales con proveedores de muestra y un código de referencia ficticio. No se cobra ningún pago. Haz clic en un botón para abrir su ventana, luego lee el código que lo diseñó.
Sin CSS, sin atributos. El botón y su ventana comparten un mismo carbón neutro de fábrica. Esto es theme="dark", el predeterminado, así que escribirlo no cambia nada.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="ebook"
amount="29"
currency="USD">
Buy now
</coin-moebius-buy>Agrega theme="light" y tanto el botón como la ventana pasan a un blanco roto suave. Un atributo, sin CSS.
<coin-moebius-buy
project-id="proj_xxxx"
product-id="membership"
amount="99"
currency="USD"
theme="light">
Get access
</coin-moebius-buy>Cada uno de estos es solo el CSS que aparece a su lado, nada más. Toma cualquiera, pégalo en tu propia hoja de estilos y cambia los valores. Combínalos como quieras.
Un botón índigo con una ventana índigo a juego, definidos con unas pocas variables CSS. Cambia cualquier valor para recolorearlo.
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;
}Fondo negro, texto verde monoespaciado, esquinas cuadradas. La ventana sigue la misma apariencia. Cada valor aquí es tuyo para cambiar.
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 botón rosa cálido con una ventana rosa suave a juego. Redondea más o menos las esquinas editando un número.
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 cara de botón con degradado, con la ventana tintada para combinar. Pinta la cara del botón como quieras.
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 delgado, texto apagado y una ventana blanca y limpia. Réstale hasta dejarlo tan sencillo como quieras.
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;
}Los ejemplos de arriba están sobre un fondo en blanco. Aquí está en una página, dentro de una tarjeta, con la cantidad editable activada para que el comprador elija cuánto dar. Haz clic y pruébalo.
Deja una propina. Ayuda a mantener el sitio y las publicaciones.
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;
}Agrega editable-amount="true" y la ventana muestra un campo de cantidad que el comprador rellena, para propinas, donaciones o paga-lo-que-quieras. Déjalo desactivado, que es el valor predeterminado, y la amount que tú fijes queda fija y no aparece ningún campo. En ambos casos los botones de pago quedan deshabilitados hasta que la cantidad sea un número positivo, así que un comprador no puede pagar por nada.
Cada superficie que puedes personalizar. Configura las variables en el botón; alcanza el resto con ::part().
Configúralas en el elemento coin-moebius-buy (o en cualquiera de sus ancestros, ya que las propiedades personalizadas se heredan):
| Propiedad | Predeterminado | Qué controla |
|---|---|---|
--cm-font | system-ui, -apple-system, BlinkMacSystemFont, sans-serif | Familia tipográfica para la etiqueta del botón y cada elemento de texto dentro del modal del selector. |
--cm-color | #ededed (#1f1f1f con theme="light") | Color de texto de la ventana y sus instrucciones. |
--cm-button-bg | #2b2b2b (#f5f5f5 con theme="light") | Color de fondo del botón. Por defecto combina con la superficie de la ventana. |
--cm-button-color | #ededed (#1f1f1f con theme="light") | Color del texto del botón. |
--cm-button-radius | 6px | Radio de esquina del botón. Usa 999px para pastilla, 0 para cuadrado. |
--cm-modal-bg | #2b2b2b (#f5f5f5 con theme="light") | Fondo de la ventana del selector. |
--cm-modal-overlay | rgba(0, 0, 0, 0.45) | Tinte del fondo detrás del modal del selector. |
Para cualquier cosa más allá de las variables anteriores, apunta a las partes nombradas del componente desde el CSS de tu página. El botón expone ocho:
| Parte | Elemento |
|---|---|
button | El botón de compra en sí. |
modal | El contenedor de superposición de vista completa detrás del selector. |
dialog | La caja modal centrada del selector. |
provider | Cada opción de proveedor de pago dentro del selector. |
provider-icon | El icono pequeño junto al nombre de un proveedor. |
provider-name | El texto del nombre del proveedor. |
close | El botón "Cancelar" en la parte inferior del selector. |
instructions | El panel de instrucciones mostrado para pago por correo (la dirección postal + código de referencia). |
La ventana es oscura por defecto. Para una ventana clara, agrega theme="light" al elemento. Ese es todo el cambio, y no sigue la configuración del dispositivo del visitante, así que lo que elijas es lo que ve cada comprador. ¿Quieres algo específico? Configura cualquiera de las variables de arriba sobre cualquier tema y tus valores ganan.
Algunas cosas están intencionalmente fijas en v1: las transiciones de hover de 120ms, el z-index del modal, y la mayoría del espaciado/padding dentro del selector. Si una necesidad de marca cae en alguno de estos, la solución es el mismo selector ::part() con un override !important; la solución más limpia es pedirnos que agreguemos una variable CSS para eso. El issue tracker del SDK es el lugar correcto para eso.
Elige qué métodos aparecen en la ventana, cámbiales el nombre y define su orden para cada producto desde tu panel. Una suscripción puede omitir el pago por correo mientras que una descarga lo mantiene.