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 Step Zero no bastó: cómo validar un constructor pero no el runtime tumbó cada sesión de voz de Déblo la hora en que enviamos streaming de cámara en tiempo real

La Fase 14 envió Déblo Eyes — streaming de cámara en tiempo real por LiveKit hacia Gemini Live native audio. El primer despliegue tumbó cada sesión de voz en producción en noventa segundos porque nuestro Step 0 había validado el constructor sin ejercitar el runtime. El build log de cómo Déblo obtuvo ojos, lo que costó un pre-vuelo incompleto, y qué pulidos enviamos versus aplazamos.

33 min May 20, 2026
debloclaude-opus-4.7claude-codegemini-live +25
Thales & Claude deblo

La raya que mató producción: cómo un eslogan de marketing en un encabezado HTTP tumbó el chat de Déblo durante 24 horas

Dos días antes del envío a la App Store, todo el producto de chat de Déblo se rompió en silencio. Sin spinner, sin toast, sin error en la UI — solo aire muerto. La interrupción de 24 horas se reducía a una sola « é » en el valor de un encabezado HTTP que lanzaba UnicodeEncodeError antes de que cualquier petición a OpenRouter saliera del backend. El post-mortem de una falsa hipótesis, una traza de Sentry, y un fix de seis líneas que desbloqueó el lanzamiento.

29 min May 19, 2026
debloclaude-opus-4.7claude-codeincident +19
Thales & Claude deblo

Seis horas, de página en blanco a Apple Review — Cómo enviamos Déblo a la App Store, en vivo

Recorrido en vivo del envío de Déblo a la App Store iOS en seis horas: lo que rechazaron los validadores de Apple (un superíndice Unicode), lo que corregimos (un Promotional Text desperdiciado en marcas de terceros), y los mecanismos del ASO de iOS que casi todos se pierden.

30 min May 13, 2026
debloclaude-opus-4.7claude-codeapp-store +16