Quickstart
Ruta más corta de cero a primera transacción de prueba. Cinco pasos.
Crea tu Botón de Pago en Yappy Comercial
Activa el producto desde la web administrativa y genera tu merchantId + Clave Secreta. Ver flujo →
Embebe el Web Component
Inserta el script del CDN y el tag <btn-yappy> en tu página. Ver referencia →
Implementa el backend
Crea dos endpoints: uno que llame a validate/merchant + payment-wc, y uno GET que reciba el IPN. Ver API →
Valida el hash en cada IPN
Calcula HMAC-SHA256 sobre orderId + status + domain y compáralo con el hash recibido. Ver implementaciones →
Prueba en UAT y pasa a producción
Solicita acceso al entorno de pruebas, valida flujos, y migra los endpoints a las URLs de producción. Ver entorno →
¿Cómo funciona el flujo completo?
Desde que tu cliente hace clic en “Pagar” hasta que confirmas el pago, esto es lo que pasa detrás de escenas:
sequenceDiagram participant U as Usuario participant F as Tu Frontend participant B as Tu Backend participant Y as Yappy API participant A as Yappy App U->>F: Click en Pagar con Yappy F->>B: Solicitar crear orden B->>Y: POST /validate/merchant Y-->>B: Token (TTL 10 min) B->>Y: POST /payment-wc (token + monto + aliasYappy) Y-->>B: orderToken + orderId B-->>F: orderToken F->>U: Instrucciones de pago Note over U,A: Usuario abre su app Yappy y busca la orden (5 mins) U->>A: Confirma el pago A->>Y: Ejecuta transacción Y->>B: IPN GET ipnUrl — status=E, hash=***** B->>B: Valida hash HMAC-SHA256 B-->>Y: HTTP 200 B->>F: Pago confirmado F->>U: Gracias por tu compra
Tu backend nunca “espera” a que el pago se confirme. El usuario tiene 5 minutos para abrir su app Yappy y completar el pago. El IPN llega de forma asíncrona (segundos después), por eso es crítico validar el hash cuando se implementa el web component desde el CDN.