Modes de paiement

Le paiement s’ouvre dans l’un des deux modes.

Volet est un panneau intégré affiché à l’intérieur de votre page. Sur ordinateur, il glisse depuis la droite, avec une largeur maximale de pane.width ; sur mobile, il glisse depuis le bas. Le visiteur reste sur votre site et le panneau se ferme lorsqu’il appuie sur Échap ou clique sur la zone assombrie.

Fenêtre pop-up est une fenêtre de navigateur distincte, centrée sur l’écran du visiteur. Le client surveille la fermeture de la fenêtre afin de pouvoir supprimer l’arrière-plan.

Le paiement intégré nécessite une origine approuvée

Le mode volet affiche le paiement Entase dans une iframe sur votre domaine ; il n’est donc autorisé que pour les domaines que vous avez explicitement autorisés. Ajoutez chaque domaine qui ouvre le paiement aux Origines approuvées dans Paramètres → Intégrations – voir Intégrations et personnalisation du paiement.

La présence ou non du préfixe www. est importante. Si vous ne savez pas quelle forme votre site utilise, ajoutez les deux.

Si votre domaine ne figure pas dans la liste, le paiement fonctionne tout de même – il s’ouvre simplement dans une fenêtre pop-up.

Comment 'auto' est déterminé

Avec la valeur par défaut checkoutMode: 'auto', le client décide dans cet ordre :

1. Pas de HTTPS → fenêtre pop-up. Le paiement intégré n’est jamais utilisé sur une page non sécurisée.
2. localhost ou 127.0.0.1 → volet, avec un avertissement enregistré dans la console. Il s’agit d’une facilité de développement qui vous permet de créer l’intégration avec la mise en page intégrée ; cela n’indique en rien si votre domaine de production est autorisé.
3. Sinon → le client demande à Entase si cette origine peut utiliser le paiement intégré, en envoyant pk pour identifier le compte. Si la réponse inclut le volet, le mode devient volet.

Jusqu’à l’arrivée de cette réponse, le mode est popup. C’est le comportement qui risque le plus de vous surprendre : la vérification est asynchrone, donc un appel à book() déclenché immédiatement au chargement de la page – avant que le visiteur ait eu l’occasion de cliquer sur quoi que ce soit – peut tout de même ouvrir une fenêtre pop-up sur un domaine pourtant parfaitement configuré. En pratique, un véritable clic intervient toujours bien après la fin de la vérification. Si vous ouvrez le paiement automatiquement, forcez le mode au lieu de vous fier à la détection.

Forcer un mode

Définissez explicitement checkoutMode pour ignorer entièrement la détection :

const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY', checkoutMode: 'popup' });

Ou remplacez-le pour une seule réservation :

entase.book('EVENT_ID', { checkoutMode: 'popup' });

Forcer 'pane' sur un domaine qui n’est pas une origine approuvée n’accorde pas l’autorisation – le panneau s’ouvre, mais le paiement qu’il contient ne peut pas communiquer avec votre page. Utilisez 'popup' comme choix délibéré et laissez 'auto' en place lorsque vous souhaitez un paiement intégré partout où il est autorisé.

Une valeur non reconnue est ignorée et traitée comme 'auto'.

Lire et modifier le mode au moment de l’exécution

entase.getCheckoutMode();        // 'pane' or 'popup' — never 'auto'
entase.setCheckoutMode('popup'); // applies to every later book() call

getCheckoutMode() renvoie le mode déterminé ; il indique donc ce qui se produira réellement. Redéfinir le mode sur 'auto' relance la détection.

Bloqueurs de fenêtres pop-up

Les navigateurs n’autorisent window.open() que lors d’une interaction de l’utilisateur. Appelez book() directement dans un gestionnaire de clic – pas après un await, un fetch ou un setTimeout, car l’interaction a alors expiré et la fenêtre pop-up est bloquée.

// Blocked: the gesture is gone by the time book() runs.
button.addEventListener('click', async () => {
  const event = await fetch('/api/current-event').then(r => r.json());
  entase.book(event.id);
});

// Fine: resolve the id first, open on the click.
button.addEventListener('click', () => entase.book(button.dataset.eventId));

Cela concerne uniquement le mode fenêtre pop-up. Le mode volet crée un élément dans la page et n’y est pas soumis.