← Retour aux ressources
Web Component <holaolas-booking> : logique complète (DEV)
Vue d’ensemble
Le Web Component <holaolas-booking> est un Custom Element qui monte un widget React dans le Light DOM (pas d’iframe).
Parcours couvert : affichage de l’expérience → création de réservation → paiement Stripe → confirmation → redirection contrôlée.
Pas d’authentification côté client, aucune dépendance au site hôte.
Architecture (simplifiée)
Site externe → Script embed HolaOlas → <holaolas-booking …>
Web Component (loader) : lit les attributs HTML, charge le bundle React.
Widget React : formulaire de réservation, paiement Stripe, gestion des états.
API publique HolaOlas : endpoints embed / booking / payment.
Flux de réservation complet
1) Chargement initial : page chargée → Web Component initialisé → bundle React chargé (async) → chargement de l’expérience → widget prêt → événement booking:ready.
2) Soumission : formulaire rempli → validation client → création de réservation (API) → passage en mode paiement → événement booking:submitted.
Flux de paiement
Stripe Elements avec support complet 3D Secure.
Paiement direct : confirmation Stripe → booking:success → compte à rebours (5s) → redirection contrôlée.
Paiement avec 3D Secure : redirection Stripe → authentification bancaire → retour sur l’URL définie → emails via webhook (l’écran final est géré par Stripe).
Gestion des redirections
Avec return-url : confirmation dans le widget, compte à rebours 5s, redirection vers le site intégrateur (objectif : garder l’utilisateur).
Sans return-url : confirmation dans le widget, redirection automatique vers une page de succès HolaOlas (complète, imprimable).
Événements exposés
booking:ready — widget prêt
booking:submitted — réservation créée
booking:success — paiement réussi
booking:error — erreur détectée
Usage : analytics, tracking, intégration avec d’autres scripts, messages personnalisés.
Cas d’usage principaux
Site avec page de succès personnalisée : le site contrôle l’UX finale, HolaOlas gère réservation + paiement.
Site sans page de succès : HolaOlas fournit une page complète, zéro configuration côté site.
Paiement renforcé (3D Secure) : Stripe gère la redirection, webhook traite la confirmation, emails envoyés en arrière-plan.
Changements récents (janvier 2025)
Ajout d’une vraie page de confirmation dans le widget.
Redirection différée (5s) plutôt qu’immédiate.
Logique claire avec / sans return-url, meilleure gestion du scroll/UX.
Points clés à retenir
Le widget couvre 100 % du parcours transactionnel.
Redirection prévisible et maîtrisée, événements stables.
Stripe reste l’autorité de paiement ; le Web Component est autonome et portable.
Conclusion
Bloc transactionnel prêt production : intégrable partout, sans iframe, sécurisé, évolutif.