El botón de compra
El botón de compra son unas líneas de HTML que pegas en cualquier página. Sin framework, sin paso de instalación de tu parte. El botón se renderiza en el primer pintado; el selector de proveedor y los SDKs de proveedores de pago se cargan bajo demanda la primera vez que un comprador hace clic. Funciona en cualquier sitio o framework que renderice HTML, incluyendo los constructores de sitios sin código que te permiten pegar bloques HTML.
Confirmado funcionando con: Angular, Hugo, Jekyll, HTML plano, Webflow (bloque de código personalizado), Carrd (elemento Embed), Framer (embed HTML), Squarespace (Bloque de código), WordPress (bloque HTML personalizado), Ghost, sitios Notion (widgets de embed HTML). Si tu sitio te deja pegar HTML en una página, el botón de compra funciona ahí.
Referencia de atributos
| Atributo | Requerido | Qué acepta | Notas |
|---|---|---|---|
endpoint | No | Cadena de URL | Casi siempre omítelo. El botón detecta su base de API automáticamente: https://api.coinmoebius.com en producción, http://localhost:8787 en localhost. Solo configúralo como override para una configuración inusual (ej., un proxy autoalojado frente a la API). |
project-id | Sí | Cadena, con prefijo proj_ | Desde la página de tu proyecto en el panel. Es seguro exponerlo públicamente, es un identificador, no una credencial. |
product-id | Sí (en modo estricto) / Recomendado (en modo ad-hoc) | Cadena, cualquier formato que elijas | Tu identificador interno de producto. En modo estricto (el predeterminado), así es como el worker busca el precio en tu catálogo. En modo ad-hoc, aún se pasa a tus webhooks en metadata.productId para que puedas mapear transacciones a tu inventario. Consulta la sección Modo estricto vs modo ad-hoc abajo. |
amount | Solo en modo ad-hoc | Número decimal como cadena | El precio en unidades mayores (ej., dólares, no centavos). Debe ser positivo. Omítelo en modo estricto. El worker lee el precio canónico de tu catálogo e ignora cualquier valor en el HTML. Requerido solo cuando el proyecto está en modo ad-hoc y el product-id no está en el catálogo. |
currency | Solo en modo ad-hoc | Código ISO 4217 de tres letras o nombre de tu propia unidad | USD, EUR, etc. para tarjetas / rieles cripto. El proveedor de pago por correo acepta cualquier cadena (ej., GBK) porque el comerciante es quien liquida la transacción. Misma regla que amount: omitir en modo estricto, requerido en modo ad-hoc para productos que no están en el catálogo. |
label | No | Cadena | El texto del botón. Por defecto es Buy. Úsalo para distinguir botones en la misma página. |
customer-ref | No | Cadena, cualquier formato que elijas | Un identificador opaco para el comprador en tu propio sistema, como un id de usuario autenticado. El botón lo envía al worker como metadata.customerRef, y el worker etiqueta la transacción con él. Después puedes preguntar "cuál de mis usuarios pagó?" usando tu propio id, sin que nosotros guardemos datos del cliente. Omítelo para compras anónimas. |
theme | No | dark o light | Elige el esquema de color integrado para el botón y la ventana juntos. Por defecto es dark. Usa theme="light" para el esquema claro. Tus variables CSS anulan cualquiera de los dos. Ver la guía de personalización. |
editable-amount | No | true o false | Cuando es true, la ventana muestra un campo de cantidad que el comprador rellena (propinas, donaciones, paga-lo-que-quieras). Por defecto es false, donde la amount que fijes queda fija y no aparece ningún campo. Los botones de pago quedan deshabilitados hasta que la cantidad sea un número positivo. |
Múltiples botones en una página
El script registra el botón una vez, luego cualquier cantidad de instancias puede renderizarse en una página. Cada instancia es independiente. El ejemplo de abajo usa modo estricto (el predeterminado): sin amount ni currency en el HTML, porque el worker busca el precio de cada producto en tu catálogo.
<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 tu proyecto está en modo ad-hoc (widgets de donación, botes de propinas), cada botón también incluye amount y currency. Consulta Modo estricto vs modo ad-hoc para el panorama completo.
Personalizar el botón
El botón de compra se renderiza dentro de un Shadow DOM, lo que significa que nada del CSS existente de tu página llega hasta él. Eso es intencional: mantiene el botón con la misma apariencia en cada sitio, y evita que una regla suelta * { box-sizing: ... } rompa el modal del selector. Lo personalizas a través de dos superficies desde tu propia hoja de estilos: propiedades personalizadas de CSS para colores, fuentes y forma, y selectores ::part() para todo lo demás. Sin JavaScript.
Cada variable y parte está documentada en la guía de personalización, con ejemplos en vivo que puedes hacer clic y copiar:
Abre la guía interactiva de personalización →
Las URLs de éxito y cancelación
Cuando conectas Stripe o NOWPayments en la pestaña de Proveedores del panel, configuras dos URLs:
- URL de éxito, donde aterriza el comprador después de un pago exitoso. Stripe y NOWPayments agregan un parámetro de consulta (
?session_id=...para Stripe,?NP_id=...para NOWPayments) para que tu página de éxito pueda identificar qué transacción se completó. La mayoría de los sitios estáticos solo muestran un mensaje genérico de "Gracias, tu pago se está procesando" y confían en el panel como fuente de verdad. - URL de cancelación, donde aterriza el comprador si se retira antes de pagar. Frecuentemente es la misma que tu página de carrito.
Ambas URLs se configuran por proveedor en el panel, el elemento no necesita saber de ellas.