Web Component <holaolas-booking>: full logic (DEV)
Overview
The <holaolas-booking> Web Component is a Custom Element that mounts a React widget in the light DOM (no iframe).
Flow covered: experience display → booking creation → Stripe payment → confirmation → controlled redirect.
No client-side authentication, no dependency on the host site.
Architecture (simplified)
External site → HolaOlas embed script → <holaolas-booking …>
Web Component (loader): reads HTML attributes, loads the React bundle.
React widget: booking form, Stripe payment, state management.
HolaOlas public API: embed / booking / payment endpoints.
Full booking flow
1) Initial load: page loaded → Web Component initialized → React bundle loaded (async) → experience fetched → widget ready → event booking:ready.
2) Submission: form filled → client validation → booking creation (API) → payment mode → event booking:submitted.
Payment flow
Stripe Elements with full 3D Secure support.
Direct payment: Stripe confirmation → booking:success → 5s countdown → controlled redirect.
3D Secure: Stripe redirects → bank authentication → return to the provided URL → emails via webhook (final screen handled by Stripe).
Redirect handling
With return-url: confirmation inside the widget, 5s countdown, redirect to the integrator site (keeps the user on the host).
Without return-url: confirmation in the widget, automatic redirect to a HolaOlas success page (complete, printable).
Exposed events
booking:ready — widget ready
booking:submitted — booking created
booking:success — payment succeeded
booking:error — error detected
Use cases: analytics, tracking, integration with other scripts, custom messaging.
Main use cases
Site with custom success page: site controls final UX, HolaOlas handles booking + payment.
Site without success page: HolaOlas provides a full success page, zero setup on the host.
Strong customer authentication (3D Secure): Stripe manages redirect, webhook confirms payment, emails sent in the background.
Recent changes (January 2025)
Added a real confirmation page inside the widget.
Deferred redirect (5s) instead of immediate.
Clear logic with/without return-url, improved scroll/UX handling.
Key takeaways
Widget covers 100% of the transactional journey.
Predictable, controlled redirect; stable events.
Stripe stays the payment authority; the Web Component is autonomous and portable.
Conclusion
Production-ready transactional block: embeddable anywhere, no iframe, secure, scalable.