Τρόποι λειτουργίας checkout

Το checkout ανοίγει με έναν από δύο τρόπους λειτουργίας.

Το Πάνελ είναι ένα ενσωματωμένο πλαίσιο που αποδίδεται μέσα στη σελίδα σας. Σε υπολογιστή ολισθαίνει από τα δεξιά, με μέγιστο πλάτος pane.width· σε κινητό ολισθαίνει προς τα πάνω από το κάτω μέρος. Ο επισκέπτης παραμένει στον ιστότοπό σας και το πάνελ κλείνει όταν πατήσει Escape ή κάνει κλικ στη σκοτεινιασμένη περιοχή.

Το Αναδυόμενο παράθυρο είναι ένα ξεχωριστό παράθυρο του προγράμματος περιήγησης, κεντραρισμένο στην οθόνη του επισκέπτη. Ο client παρακολουθεί αν το παράθυρο κλείσει, ώστε να μπορεί να αφαιρέσει το φόντο.

Το ενσωματωμένο checkout απαιτεί έμπιστη προέλευση

Η λειτουργία πάνελ αποδίδει το checkout του Entase σε iframe στον τομέα σας, επομένως επιτρέπεται μόνο για τομείς που έχετε εξουσιοδοτήσει ρητά. Προσθέστε κάθε τομέα που ανοίγει το checkout στις Έμπιστες προελεύσεις στις Ρυθμίσεις → Ενσωματώσεις – δείτε Ενσωματώσεις και προσαρμογή checkout.

Έχει σημασία αν περιλαμβάνεται το πρόθεμα www.. Αν δεν είστε βέβαιοι ποια μορφή εξυπηρετεί ο ιστότοπός σας, προσθέστε και τις δύο.

Αν ο τομέας σας δεν βρίσκεται στη λίστα, το checkout εξακολουθεί να λειτουργεί – απλώς ανοίγει ως αναδυόμενο παράθυρο.

Πώς επιλύεται το 'auto'

Με την προεπιλεγμένη ρύθμιση checkoutMode: 'auto', ο client αποφασίζει με αυτή τη σειρά:

1. Όχι HTTPS → αναδυόμενο παράθυρο. Το ενσωματωμένο checkout δεν χρησιμοποιείται ποτέ σε μη ασφαλή σελίδα.
2. localhost ή 127.0.0.1 → πάνελ, με μια προειδοποίηση καταγεγραμμένη στην κονσόλα. Αυτή είναι μια διευκόλυνση για την ανάπτυξη, ώστε να μπορείτε να αναπτύσσετε με βάση την ενσωματωμένη διάταξη· δεν υποδηλώνει αν επιτρέπεται ο τομέας παραγωγής σας.
3. Διαφορετικά → ο client ρωτά το Entase αν αυτή η προέλευση μπορεί να χρησιμοποιήσει ενσωματωμένο checkout, στέλνοντας το pk για την αναγνώριση του λογαριασμού. Αν η απάντηση περιλαμβάνει το pane, η λειτουργία γίνεται pane.

Μέχρι να φτάσει αυτή η απάντηση, η λειτουργία είναι popup. Αυτή είναι η συμπεριφορά που είναι πιθανότερο να σας εκπλήξει: ο έλεγχος είναι ασύγχρονος, επομένως μια κλήση book() που εκτελείται αμέσως κατά τη φόρτωση της σελίδας – πριν ο επισκέπτης προλάβει να κάνει κλικ σε οτιδήποτε – μπορεί να ανοίξει αναδυόμενο παράθυρο ακόμη και σε έναν άψογα ρυθμισμένο τομέα. Στην πράξη, ένα πραγματικό κλικ γίνεται πάντα πολύ μετά την ολοκλήρωση του ελέγχου. Αν ανοίγετε το checkout αυτόματα, επιβάλετε τη λειτουργία αντί να βασίζεστε στην ανίχνευση.

Επιβολή μιας λειτουργίας

Ορίστε ρητά το checkoutMode για να παραλείψετε εντελώς την ανίχνευση:

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

Ή παρακάμψτε το για μία μόνο κράτηση:

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

Η επιβολή του 'pane' σε έναν τομέα που δεν είναι έμπιστη προέλευση δεν παραχωρεί άδεια – το πάνελ ανοίγει, αλλά το checkout μέσα σε αυτό δεν μπορεί να επικοινωνήσει με τη σελίδα σας. Χρησιμοποιήστε το 'popup' ως συνειδητή επιλογή και αφήστε το 'auto' στη θέση του όταν θέλετε ενσωματωμένο checkout όπου αυτό επιτρέπεται.

Μια μη αναγνωρισμένη τιμή αγνοείται και αντιμετωπίζεται ως 'auto'.

Ανάγνωση και αλλαγή της λειτουργίας κατά τον χρόνο εκτέλεσης

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

Το getCheckoutMode() επιστρέφει την επιλυμένη λειτουργία, επομένως αναφέρει τι θα συμβεί στην πραγματικότητα. Η επαναφορά της λειτουργίας σε 'auto' εκτελεί ξανά την ανίχνευση.

Αποκλειστές αναδυόμενων παραθύρων

Τα προγράμματα περιήγησης επιτρέπουν το window.open() μόνο κατά τη διάρκεια μιας ενέργειας χρήστη. Καλέστε το book() απευθείας μέσα σε έναν χειριστή κλικ – όχι μετά από await, fetch ή setTimeout, οπότε η ενέργεια θα έχει λήξει και το αναδυόμενο παράθυρο θα αποκλειστεί.

// 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));

Αυτό επηρεάζει μόνο τη λειτουργία αναδυόμενου παραθύρου. Η λειτουργία πάνελ δημιουργεί ένα στοιχείο στη σελίδα και δεν υπόκειται σε αυτό.