# Agrega un botón de pago cripto a tu sitio web | Cosmos Pay URL: https://payments.cosmospay.lat/learn/crypto-payment-button?lang=es > Agrega un botón de pago o un checkout embebido a cualquier sitio con una etiqueta script, sin clave de API en la página: atributos, eventos, CSP y pruebas. ## Cómo agregar un botón de pago cripto o un checkout a tu sitio web Para cobrar en stablecoins en tu propio sitio web, carga una vez el script de inserción de Cosmos Pay y agrega un elemento cosmos-pay-button o cosmos-pay-checkout con el id de un enlace de pago. El botón abre el checkout alojado en una ventana emergente, y el checkout embebido dibuja el pago dentro de tu página. La página no necesita ninguna clave de API, y tu servidor confirma el pago con un webhook firmado. Actualizado el 2 de noviembre de 2026 · Por Cosmos Pay ### Botón o checkout embebido - El botón de pago (cosmos-pay-button) abre el checkout alojado en una ventana emergente centrada sobre tu página. Si el navegador bloquea la ventana emergente, la misma pestaña va al checkout. - El checkout embebido (cosmos-pay-checkout) dibuja el pago dentro de tu página, con un ancho de hasta 420 píxeles: el monto, el código QR, un botón que abre la wallet de quien paga y el estado en vivo. - Ambos funcionan con enlaces de pago en Stellar, Solana y Monad, en inglés, español, portugués, francés, alemán, hindi y chino. ### De dónde sale el enlace Cada elemento muestra un enlace de pago, indicado por su id en el atributo link. Crea el enlace en el dashboard, o desde tu servidor con la API de pagos o el SDK de TypeScript cuando tu cliente finaliza la compra, y pon su id en la página. La página lee el enlace sin una clave de API, así que tu clave secreta se queda en tu servidor. Muestra un checkout embebido por pago: un enlace se paga una sola vez. - [API de enlaces de pago](https://dev.cosmospay.lat/docs/api/payment-links/) - [Cómo aceptar pagos en USDC online](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=es) ### Atributos y estilos - link: el id del enlace de pago. Obligatorio. - lang: el idioma, como es o es-AR. Por defecto, el idioma del navegador de quien paga o, si no, inglés. - theme: light (el valor por defecto), dark o auto, que sigue la configuración del sistema de quien paga. - demo: muestra un ejemplo que no se puede pagar y no envía ninguna solicitud, para demostraciones. - El texto dentro del botón reemplaza su etiqueta, y ::part(button) y ::part(card) permiten que tu CSS cambie el estilo de los elementos. ### Agrega un botón de pago, paso a paso 1. **Carga el script**: Agrega una etiqueta script a tu página, una sola vez: https://payments.cosmospay.lat/embed/cosmos-pay.js, con el atributo defer. 2. **Obtén un enlace de pago**: Crea un enlace en el dashboard, o desde tu servidor cuando tu cliente finaliza la compra, y guarda su id. 3. **Agrega el elemento**: Escribe un elemento cosmos-pay-button o cosmos-pay-checkout con link definido como ese id y, si quieres, lang o theme. 4. **Permítelo en tu CSP**: Si tu sitio envía una Content Security Policy, permite script-src https://payments.cosmospay.lat, connect-src https://api.cosmospay.lat e img-src data:. 5. **Pruébalo**: Usa un enlace creado en Sandbox: el checkout embebido indica que funciona en una red de pruebas. El atributo demo muestra un ejemplo sin ningún enlace. 6. **Confírmalo en tu servidor**: Agrega un endpoint de webhook y entrega el pedido cuando llegue PAYMENT_INTENT_SUCCEEDED. - [Insertar un pago (documentación)](https://dev.cosmospay.lat/docs/embed/) - [Webhooks](https://dev.cosmospay.lat/docs/sdk/server/webhooks/) ### Eventos y confirmación del pago Ambos elementos disparan los eventos cosmospay:status y cosmospay:paid en tu página, con el id y el estado del enlace. Úsalos para actualizar lo que ve quien paga, no para entregar el pedido: un evento en la página se puede falsificar. Entrega el pedido cuando tu servidor reciba PAYMENT_INTENT_SUCCEEDED, el webhook firmado que Cosmos Pay envía cuando la red confirma el pago. Si tu página envía una Cross-Origin-Opener-Policy con valor same-origin, o si se bloquea la ventana emergente, el botón no envía eventos. - [Cómo confirmar un pago en tu servidor](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=es) ### Preguntas y respuestas. Pagos por red: [Pagos en Stellar](https://payments.cosmospay.lat/stellar?lang=es), [Pagos en Solana](https://payments.cosmospay.lat/solana?lang=es), [Pagos en Monad](https://payments.cosmospay.lat/monad?lang=es) #### ¿La página necesita mi clave de API? No. Los elementos leen el enlace de pago sin una clave. Crea los enlaces en tu servidor, donde se queda la clave. #### ¿El checkout embebido es un iframe? No. Se dibuja dentro de tu página en su propio shadow DOM, así que no hace falta ninguna regla frame-src. El checkout alojado en sí no se puede mostrar dentro de un frame. #### ¿Un botón puede recibir muchos pagos? No. Un enlace se paga una sola vez, así que dale a cada pago su propio enlace, por ejemplo creándolo en tu servidor cuando el cliente finaliza la compra. #### ¿Funciona en cualquier sitio web? Sí, en cualquier página que pueda cargar un script, siempre que su Content Security Policy permita el script, la API y las imágenes data:. ### Más guías [Ver todas las guías](https://payments.cosmospay.lat/learn?lang=es) #### [Cómo aceptar pagos en USDC online](https://payments.cosmospay.lat/learn/accept-usdc-payments?lang=es) Cobra en USDC con un enlace de pago, el checkout alojado o la API, y pruébalo antes en una red de pruebas. #### [Cómo confirmar un pago en stablecoins en tu servidor](https://payments.cosmospay.lat/learn/confirm-stablecoin-payments?lang=es) Entrega los pedidos a partir de un webhook firmado, no de la página de tu cliente: verifícalo, responde rápido y omite los duplicados. #### [Cómo aceptar donaciones en cripto con monto abierto](https://payments.cosmospay.lat/learn/crypto-donations?lang=es) Deja que cada donante elija el monto: enlaces de monto abierto en Stellar y Solana, creados para cada donante y confirmados por webhook. ### Empieza a aceptar stablecoins. Crea una cuenta gratis, genera una clave de prueba y envía hoy tu primer enlace de pago. [Crear un enlace de pago](https://dev.cosmospay.lat/login?next=%2Fdashboard%3Fview%3Dpayments) #### Escríbenos Dudas sobre planes, integración o pagos protegidos: cuéntanos y te respondemos por email. [organization@cosmospay.lat](mailto:organization@cosmospay.lat)