Back to 0fee
0fee

La consola de desarrollador: pestañas, verificador de estado y vista previa del widget

Cómo construimos la consola de desarrollador de 0fee.dev con verificador de estado interactivo, vista previa del widget y plantillas descargables. Por Juste A. Gnimavo y Claude.

Juste A. Gnimavo (Thales) & Claude | March 27, 2026 2 min 0fee
EN/ FR/ ES
developer-consolecheckout-widgetdeveloper-experiencesolidjs

La consola de desarrollador es el centro de integración del panel de 0fee.dev. Es donde los desarrolladores aprenden cómo funciona la API, prueban su integración, previsualizan el widget de checkout y descargan plantillas de inicio. En las sesiones 074 y 076, consolidamos la consola de cinco a cuatro pestañas, añadimos endpoints de estado enriquecidos, construimos un verificador de estado interactivo, creamos una vista previa en vivo del widget y enviamos una plantilla HTML de checkout descargable.

La consolidación

Las pestañas Inicio Rápido y Checkout Alojado eran casi idénticas. La consolidación las fusionó en una sola pestaña de Inicio Rápido con un diagrama de flujo, reduciendo a cuatro pestañas: Inicio Rápido, Integración Directa, Widget y Referencia API.

Endpoints de estado enriquecidos

Los endpoints de estado pasaron de devolver respuestas mínimas ({"status": "completed"}) a devolver datos completos de sesión y transacción, esenciales para depuración.

La pestaña Widget: "Prueba el widget en vivo"

Al hacer clic en el botón se carga el script checkout.js bajo demanda y abre el modal de checkout real, conectado al entorno sandbox, procesando pagos de prueba. Los desarrolladores ven exactamente lo que verán sus clientes. Los ejemplos de código debajo se generan dinámicamente desde la configuración del widget -- si el desarrollador cambia el monto a 10000, los ejemplos de código se actualizan para mostrar amount: 10000.

La plantilla HTML descargable

Una plantilla HTML completa y autocontenida (~920 líneas) que implementa el flujo de checkout completo. Sin herramientas de build, sin npm, sin framework. Un desarrollador puede descargarla, reemplazar la clave API y alojarla en cualquier lugar.

Lecciones aprendidas

Consolida pestañas duplicadas temprano. Los endpoints de estado enriquecidos no cuestan nada pero ahorran horas. Las vistas previas en vivo superan a la documentación. Las plantillas descargables son la incorporación más rápida.


Este artículo es parte de la serie "Cómo construimos 0fee.dev". 0fee.dev es un orquestador de pagos que cubre más de 53 proveedores en más de 200 países, construido por Juste A. GNIMAVO y Claude desde Abiyán sin ingenieros humanos. Sigue la serie para conocer la historia completa de la construcción.

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude deblo

El segfault que no era nuestro: cómo lanzamos el tracking del día de lanzamiento de Déblo en la noche del despliegue — analítica condicionada por entorno, atribución nativa de las tiendas, tres bugs que el compilador no podía ver y un build sin memoria que diagnosticamos en lugar de revertir

El 1 de julio de 2026 — el día del lanzamiento — el riesgo nunca fue el texto. Era que las campañas de pago salieran a ciegas. Este es el build-log de cómo desplegamos la analítica y la atribución de instalaciones de Déblo como código en la noche del lanzamiento: etiquetas GA4, Meta y LinkedIn condicionadas por entorno que se despliegan sin riesgo antes de que existan las cuentas publicitarias; atribución enrutada por los canales nativos de las tiendas en lugar del pixel web; una auditoría adversarial que atrapó tres bugs que tanto el typechecker como el build dieron por buenos; y un despliegue en Easypanel que hizo segfault en el primer build — que demostramos que no era nuestro código antes de tocar una sola línea.

18 min Jul 1, 2026
deblolaunch-dayclaude-opus-4.8claude-code +26
Thales & Claude thales

Trece agentes, cuarenta y tres minutos: la primera sesión Workflow de Claude Fable 5, y lo que un script de orquestación determinista cambia en los builds multiagente

Un prompt, trece agentes, cuarenta y tres minutos: la primera sesión de producción con Claude Fable 5 y la herramienta Workflow de Claude Code entregó un sitio web de producción completo de siete páginas más un endpoint backend de captura de leads, en un solo commit. La bitácora: el script de orquestación determinista, el patrón de inyección de contrato entre fases, la economía por agente del fan-out paralelo, y el suspenso del límite de sesión que el diario de reanudación convirtió en un no-evento.

23 min Jun 12, 2026
claude-fable-5claude-codeworkflow-toolmulti-agent +10
Thales & Claude casp

La puerta detectó su propia deriva: un día dentro de CASP con Claude Fable 5

Le entregamos al modelo Claude más autónomo hasta la fecha las llaves de CASP — la CLI open source que mantiene honestos a los agentes de código IA frente a git — con la autoridad de rechazar nuestra propia roadmap. Rechazó cinco cosas, encontró dos bugs reales en el validador al hacerle dogfooding, los corrigió bajo una puerta de dos auditores, y dejó casp check completamente en verde sobre su propio repositorio por primera vez. CASP 0.3.0 es el resultado.

15 min Jun 10, 2026
caspzerosuiteworkflowai-cto +9