SmartPay — Botón de Pago

SmartPay es el botón de pago de ApoloPay que permite a las empresas aceptar pagos con criptomonedas en sus sitios web y aplicaciones. Los desarrolladores pueden integrarlo con solo unas pocas líneas de código usando nuestro SDK, disponible para múltiples frameworks de frontend.

Cómo Funciona

El flujo de pago involucra tres actores: tu frontend, tu backend y la API de ApoloPay.

┌──────────────┐     ┌───────────────┐     ┌─────────────────┐
│ Tu Tienda    │     │ Tu Tienda     │     │ API de ApoloPay │
│ (Frontend)   │     │ (Backend)     │     │ (Gateway)       │
└──────┬───────┘     └──────┬────────┘     └────────┬────────┘
       │                    │                       │
       │  1. Usuario hace   │                       │
       │     clic en        │                       │
       │     "Pagar"        │                       │
       │ ──────────────►    │                       │
       │                    │  2. POST /preorder    │
       │                    │     (monto, secreto)  │
       │                    │ ─────────────────────►│
       │                    │                       │
       │                    │  3. Devuelve processId│
       │                    │ ◄─────────────────────│
       │                    │                       │
       │  4. Renderiza      │                       │
       │     botón con      │                       │
       │     processId      │                       │
       │ ◄───────────────── │                       │
       │                    │                       │
       │  5. Cliente        │                       │
       │     completa el    │                       │
       │     pago           │──────────────────────►│
       │                    │                       │
       │                    │  6. Webhook notifica  │
       │                    │     pago completado   │
       │                    │ ◄─────────────────────│
       └────────────────────┴───────────────────────┘

Paso a Paso

1. El cliente inicia una compra en tu tienda
2. Tu backend llama a la API de ApoloPay (POST https://pb-api.apolopay.app/payment-button/process/preorder) con el monto del pago y tu llave secreta — esto devuelve un processId único
3. Tu frontend renderiza el componente del botón SmartPay, pasando la publicKey y el processId como propiedades (props)
4. El cliente interactúa con el botón, selecciona su criptomoneda y red preferidas, y completa el pago
5. ApoloPay notifica a tu backend a través de un webhook cuando el pago es confirmado

Requisitos Previos

Antes de integrar SmartPay, necesitas:

1. ✅ Una cuenta de ApoloPay con verificación de Nivel 2 — Crear Cuenta →
2. ✅ Un botón de pago configurado en el panel de ApoloPay — Crear Botón →
3. ✅ El SDK de SmartPay instalado en tu proyecto — Elige tu framework →

SDKs Disponibles

Paquete	Framework	Instalación
@apolopay-sdk/ui	Vanilla JS / Cualquiera	npm i @apolopay-sdk/ui
@apolopay-sdk/react	React	npm i @apolopay-sdk/react
@apolopay-sdk/vue	Vue 3	npm i @apolopay-sdk/vue
@apolopay-sdk/svelte	Svelte	npm i @apolopay-sdk/svelte
@apolopay-sdk/angular	Angular	npm i @apolopay-sdk/angular
@apolopay-sdk/astro	Astro	npm i @apolopay-sdk/astro

Todos los paquetes están disponibles en npmjs.com.