Chaque option est facultative. Les valeurs ci-dessous sont les valeurs par défaut appliquées par le client lorsque vous n’en indiquez pas une.
const entase = new Entase({
pk: null,
locale: 'auto',
checkoutMode: 'auto',
collectConsent: true,
backdrop: true,
backdropColor: '#000000',
tprm: {},
pane: { width: 800, height: '100%' },
popup: { width: 800, height: 1000 }
});Options
| Nom | Type | Valeur par défaut | Description |
|---|---|---|---|
pk | chaîne | null | Votre clé publiable. Le client l’envoie lorsqu’il vérifie si votre domaine est autorisé à utiliser le paiement intégré. Sans elle, chaque paiement s’ouvre dans une fenêtre pop-up. |
locale | chaîne | 'auto' | Langue du paiement. 'auto' lit l’attribut lang de votre élément <html>. |
checkoutMode | chaîne | 'auto' | 'auto', 'pane' ou 'popup'. Consultez Modes de paiement. Une valeur non reconnue revient à 'auto'. |
collectConsent | booléen | true | Indique si le paiement demande au visiteur d’accepter la notice relative aux conditions. Une fois acceptée, la réponse est mémorisée dans un cookie et cette étape est ignorée. |
backdrop | booléen | true | Indique s’il faut assombrir la page derrière le paiement. false désactive également le verrouillage du défilement de la page. |
backdropColor | chaîne | '#000000' | Couleur de la zone assombrie, sous forme de valeur de couleur CSS. |
tprm | objet | {} | Paramètres de suivi ajoutés à l’URL de paiement en tant que paramètres de requête. Consultez Suivi et consentement. |
pane | objet | { width: 800, height: '100%' } | Taille du panneau intégré. Ignorée en mode fenêtre pop-up. |
popup | objet | { width: 800, height: 1000 } | Taille de la fenêtre pop-up, en pixels. Ignorée en mode panneau. |
Dimensionnement du panneau et de la fenêtre pop-up
pane.width accepte un nombre (en pixels) ou toute longueur CSS – '720px', '50%', '40vw' ou une expression calc(). Un simple nombre est interprété comme des pixels.
Le panneau est limité à cette largeur sur ordinateur et occupe toute la largeur sur mobile, où pane.height s’applique à la place. Le basculement entre les deux a lieu lorsque la fenêtre d’affichage est plus étroite que la largeur configurée ; lorsque la largeur est indiquée dans une unité relative, le basculement a lieu à 800 px.
popup.width et popup.height acceptent uniquement des nombres en pixels, et la fenêtre est centrée sur l’écran du visiteur. Si l’écran n’est pas assez haut pour la hauteur demandée, la fenêtre est réduite pour s’adapter.
Arrière-plan
L’arrière-plan est davantage assombri derrière une fenêtre pop-up que derrière un panneau, car une fenêtre pop-up nécessite que la page sous-jacente paraisse inactive. Définissez backdrop: false pour supprimer entièrement l’assombrissement – cela laisse également la page défilable derrière le paiement.
backdropColor est appliqué tel quel ; il peut donc s’agir de n’importe quelle couleur CSS valide. Utilisez-le pour l’adapter à un site sombre ou aux couleurs de votre marque, plutôt que pour masquer l’arrière-plan ; pour cela, backdrop: false est l’option appropriée.
Remplacements pour chaque réservation
checkoutMode, collectConsent, backdrop, backdropColor, pane et popup peuvent tous être remplacés pour une seule réservation en les transmettant à book(). La valeur au niveau de l’instance reste inchangée pour les appels suivants :
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
// This one booking opens wider, with no dimming.
entase.book('EVENT_ID', {
pane: { width: '60vw' },
backdrop: false
});pk et tprm ne sont pas des options par réservation – pk identifie le compte pour l’ensemble de la page, et les paramètres de suivi sont modifiés avec setTracking() lorsqu’ils doivent être différents.