Uso
Cómo pedirle una integración al agente y qué te va a preguntar antes de escribir código.
Con el plugin instalado, pídele la integración a tu agente — con el comando del skill o en lenguaje natural.
Invocar el plugin
Con el comando del skill (Claude):
/tonder-web-sdk-integrator Add embedded card payment to this checkout. Keep the existing amount input and deposit button.O en lenguaje natural:
Use the Tonder Web SDK plugin to add embedded card payments to this checkout. Keep the existing amount input and deposit button.Más ejemplos:
Use Tonder Web SDK to add saved-card payments to this React checkout.Use Tonder Web SDK to add card enrollment to this Angular account settings page.Use Tonder Web SDK to add payment methods and SafetyPay bank selection to this HTML checkout.Qué esperar
El plugin no edita a ciegas: primero inspecciona tu proyecto y luego te pregunta lo que no pueda inferir con certeza, una decisión a la vez:
| Decisión | Opciones |
|---|---|
| Framework | HTML/estático · React · Angular (si es ambiguo, te pide confirmar) |
| Página/componente objetivo | Dónde va el checkout, si hay varias candidatas |
| Flujo de pago | Pago con tarjeta · Enrolamiento · Tarjetas guardadas · Métodos de pago · Bancos SafetyPay |
| Modo de presentación | embedded (modal/iframe del SDK en tu página) · redirect (navega al paso alojado y vuelve al return_url) |
| Carga del SDK | cdn (script del navegador) · npm (paquete vía bundler) |
| UX | Configuración por defecto de Tonder · opciones personalizadas (estilos, callbacks, idempotency_key, metadata) |
Con las decisiones tomadas, implementa solo el flujo elegido, valida que tu código nunca capture datos de tarjeta en crudo, y cierra con los archivos cambiados, la validación ejecutada y notas de configuración.
Seguridad PCI. Las integraciones generadas nunca capturan PAN, CVV ni expiración en inputs del comercio — siempre los campos seguros que renderiza el SDK de Tonder.
El MCP tonder-docs
El plugin incluye un servidor MCP local que el agente usa como única fuente de documentación. Sirve snapshots versionados del README del Web SDK público.
Herramientas
| Herramienta | Qué devuelve |
|---|---|
get_integration_recipe | La receta de integración para el framework, flujo y modo de presentación elegidos |
get_sdk_api_reference | Firmas de métodos, payloads, configuración CDN/npm y personalización |
get_error_reference | Referencia de errores del SDK para manejo y explicación |
get_payment_status_reference | Referencia de estados de pago |
Prompts
| Prompt | Propósito |
|---|---|
integrate-web-sdk-card-payment | Guía la integración de pago con tarjeta |
integrate-web-sdk-saved-cards | Guía la integración de tarjetas guardadas |
Límites del MCP. tonder-docs no procesa pagos, no guarda credenciales y no accede a datos
de clientes del comercio — solo sirve documentación.
Después de la integración
El plugin te lo recuerda al cerrar, pero es tu checklist operativa:
- Configura tu llave API pública de Tonder (consulta Autenticación).
- Mantén estable el
idempotency_keypor intento de checkout para que los reintentos sean seguros. - Configura tus webhooks en el dashboard antes de despachar pedidos (consulta Webhooks).
- Actualiza los valores de entorno/CDN al pasar de sandbox a producción (consulta Entornos).