Resumen — Full vs Lite
Qué SDK usar por plataforma y cómo se reparte el alcance PCI cuando la tarjeta se tokeniza en el cliente.
Los SDKs de Tonder ofrecen herramientas de procesamiento de pagos y una experiencia de checkout fluida para tus clientes. Simplifican la integración con documentación clara y añaden medidas de seguridad robustas para los datos sensibles.
Elige tu tipo de SDK
Tonder ofrece dos variantes según tus necesidades de integración:
Full SDK (Inline)
- UI de pago prediseñada — lista para usar.
- Validación de formulario integrada (tarjeta, expiración, CVV).
- Manejo automático de 3DS.
- Compatible con PCI — los datos sensibles nunca tocan tus servidores.
- Ideal para: lanzamientos rápidos, equipos con recursos de frontend limitados.
Lite SDK
- Construye tu propia UI de pago desde cero.
- Control total del diseño — encaja en cualquier sistema de diseño.
- Gestión de tarjetas: guardar, recuperar y eliminar métodos de pago.
- Tokenización segura — sin datos sensibles en tus servidores.
- Ideal para: UI personalizada, flujos complejos, sistemas de diseño existentes.
Plataformas soportadas
El SDK Web se renovó. Para web, un solo paquete —
@tonder.io/web-sdk (npm o CDN) — cubre ambos
enfoques: el formulario completo por defecto (estilo Full) y campos seguros individuales en tu
propia UI (estilo Lite). La distinción Full/Lite sigue aplicando a los SDKs móviles. Consulta
SDK Web. ¿Vienes del SDK anterior o de API Direct? Sigue la
guía de migración del SDK legacy o la de
API Direct.
| Plataforma | Full SDK | Lite SDK | Notas / Requisitos |
|---|---|---|---|
| Web (JavaScript / TypeScript) | ✅ | ✅ | @tonder.io/web-sdk · npm o CDN · un solo paquete cubre ambos enfoques |
| Flutter | ✅ | ✅ | iOS y Android · requiere configuración de Skyflow Maven |
| Ionic | ✅ | ✅ | Móvil híbrido · requiere el script tag de Skyflow |
| React Native | ✅ | ✅ | RN 0.70+ · React 16.8+ · iOS y Android |
Flujo de integración (SDKs móviles)
En web, el flujo es createTonder() → init() → create('card_fields') → mount() → pay() —
consulta el inicio rápido del SDK Web. En los
SDKs móviles el flujo es:
POST /api/secure-token/ con tu llave secreta. El secureToken resultante es válido por
1 hora.
Instancia new TonderSdk.InlineCheckout({...}).
Llama a configureCheckout({ email, secureToken }).
Llama a injectCheckout() para montar el formulario en tu página.
Llama a payment(checkoutData) cuando el usuario hace clic.
Webhooks
Todos los SDKs usan la llave pública. Los SDKs móviles reciben webhooks en formato
Long; el Lite SDK 2.0 (SDK Web) usa el formato Short —campos de nivel superior, con
client_reference y event_type como payment_Success—, el mismo que API Direct. Consulta el
catálogo de eventos.
En los webhooks Long de los SDKs móviles no hay orderReference de nivel superior. Usa
metadata.order_id o metadata.external_id para conciliar.
Siguientes pasos
SDK Web
El nuevo @tonder.io/web-sdk: campos seguros, tarjetas guardadas y APMs.
SDK Móvil
Flutter, Ionic y React Native.
Referencia SDK
Métodos, parámetros y opciones por plataforma.
Modelo de webhooks
El formato Long en detalle.
Plugin Tonder Web SDK (IA)
Integra el Web SDK con Claude Code, Claude Desktop o Codex usando recetas y docs versionadas.
Portal de demos de SDK
Demos interactivas del nuevo SDK Web (tarjeta, tarjetas guardadas, APMs, SafetyPay) + demos legacy.