Web Component <holaolas-booking>: lógica completa (DEV)

El Web Component <holaolas-booking> es un Custom Element que monta un widget React en el Light DOM (sin iframe).

Flujo cubierto: mostrar la experiencia → crear la reserva → pago Stripe → confirmación → redirección controlada.

Sin autenticación del lado cliente, sin dependencia del sitio anfitrión.

Sitio externo → script embed HolaOlas → <holaolas-booking …>

Web Component (loader): lee atributos HTML, carga el bundle React.

Widget React: formulario de reserva, pago Stripe, gestión de estados.

API pública de HolaOlas: endpoints de embed / reserva / pago.

1) Carga inicial: página cargada → Web Component inicializado → bundle React cargado (async) → experiencia recuperada → widget listo → evento booking:ready.

2) Envío: formulario completado → validación cliente → creación de reserva (API) → modo pago → evento booking:submitted.

Stripe Elements con soporte completo 3D Secure.

Pago directo: confirmación Stripe → booking:success → cuenta regresiva de 5s → redirección controlada.

3D Secure: Stripe redirige → autenticación bancaria → regreso a la URL definida → emails vía webhook (Stripe controla la pantalla final).

Con return-url: confirmación en el widget, cuenta regresiva 5s, redirección al sitio integrador (objetivo: mantener al usuario).

Sin return-url: confirmación en el widget, redirección automática a una página de éxito HolaOlas (completa, imprimible).

booking:ready — widget listo

booking:submitted — reserva creada

booking:success — pago exitoso

booking:error — error detectado

Uso: analítica, tracking, integración con otros scripts, mensajes personalizados.

Sitio con página de éxito personalizada: el sitio controla la UX final, HolaOlas gestiona reserva + pago.

Sitio sin página de éxito: HolaOlas provee una página completa, cero configuración en el host.

Autenticación reforzada (3D Secure): Stripe maneja la redirección, el webhook confirma el pago, emails en segundo plano.

Se añadió una verdadera página de confirmación en el widget.

Redirección diferida (5s) en lugar de inmediata.

Lógica clara con/sin return-url, mejor manejo de scroll/UX.

El widget cubre el 100 % del recorrido transaccional.

Redirección predecible y controlada; eventos estables.

Stripe sigue siendo la autoridad de pago; el Web Component es autónomo y portable.

Bloque transaccional listo para producción: integrable en cualquier sitio, sin iframe, seguro y escalable.