Ventrata propose une solution de checkout simplifiée qui permet aux clients
d'ajouter des produits sélectionnés à un panier virtuel et de suivre une série d'étapes pour finaliser l'achat.
La solution de checkout de Ventrata prend en charge deux modes :
Pop-up - s'ouvre dans une fenêtre modale au-dessus de votre site
Embedded (Intégré) - affiche le checkout directement sur la page
Pop-up | Embedded (Intégré) |
| 
|
Structure de configuration
Le checkout de Ventrata propose un flux de personnalisation sophistiqué. Vous disposez d'une configuration globale (à l'échelle de la clé API) stockée dans le cloud, qui sert de modèle pour tous les futurs checkouts. Ce modèle inclut des paramètres tels que les couleurs, la configuration Google Analytics, et plus encore, permettant une intégration facile sans ajustements supplémentaires. Vous pouvez gérer ces configurations via le tableau de bord Ventrata ou via des demandes de support spécifiques au client.
La structure de configuration suit une hiérarchie en couches, où les paramètres peuvent être remplacés par des configurations plus spécifiques. L'ordre est le suivant :
Cloud > Balise <script>> Elément spécifique dans la page (bouton, ancre)
Couche | Description |
| le modèle de configuration de l'apiKey au niveau de la clé API pour tous les futurs checkouts |
| La balise |
| Des éléments individuels de la page, tels que des boutons ou des ancres, peuvent déclencher le checkout sous forme de pop-up et charger des configurations comme la langue, la devise et les options ; ces paramètres sont spécifiés dans l'attribut
📗 ASTUCE
|
📘 EXEMPLE
Imaginez que votre configuration cloud spécifie une couleur de bouton de #AE8173. Si une page contient la balise <script> avec une couleur de bouton de #820857, les pop-ups de checkout sur cette page adopteront la couleur #820857 au lieu de la valeur par défaut du cloud.
Supposons maintenant qu'il y ait trois boutons pop-up sur cette page, tous configurés avec #820857. Si vous souhaitez personnaliser uniquement le troisième bouton avec une couleur unique, telle que #6FD316, vous pouvez spécifier cette couleur dans l'attribut data-config pour ce bouton.
Par conséquent :
Les deux premiers boutons conserveront la couleur
#820857de la balise<script>.Le troisième bouton affichera
#6FD316.Si vous supprimez le paramètre de couleur de la balise
<script>, les deux premiers boutons reviendront à la couleur du cloud#AE8173, tandis que le troisième bouton restera inchangé.
Intégrer le checkout de Ventrata
Voici les étapes de base pour intégrer le checkout de Ventrata, qui fonctionne par défaut en mode pop-up. Bien que la plupart des paramètres s'appliquent aux modes pop-up et intégré, si vous choisissez d'implémenter le mode intégré, veuillez suivre les étapes pour intégrer le checkout en mode intégré.
Localiser la clé API
📒 REMARQUE
Chaque couche du flux de configuration est optionnelle à l'exception de l'apiKey. Une clé API est requise dans au moins un élément de la page. Si vous ne savez pas où la trouver, consultez la section Localiser la clé API pour le Web Checkout et le portail Gérer ma réservation (MMB).
Ajouter la balise <script>
Pour intégrer le checkout de Ventrata, ajoutez le code de la balise <script> ci-dessous aux pages HTML de votre site web.
Production
Le script chargera la configuration de votre compte spécifique avec la passerelle de production, donc tous les paiements et commandes seront enregistrés comme s'ils étaient effectués par des clients.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live" }'></script>
Test
Le script chargera la configuration de votre compte spécifique dans un environnement de test.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script>Attribut | Description |
| Remplacez |
|
📗 ASTUCE Si l'attribut "env" n'est pas spécifié dans la balise
|
Qu'est-ce qu'un attribut data-config
L'attribut data-config dans la balise <script> ou l’élément (comme un bouton) est utilisé pour transmettre les paramètres de configuration au script de checkout de Ventrata. Il permet de définir le comportement du checkout, la clé API (c’est-à-dire quel checkout utiliser) et l’environnement dans lequel il doit fonctionner.
Décomposition de l'attribut data-config
Décomposition de l'attribut data-config
Voici un exemple de script de checkout :
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script>
<button ventrata-checkout data-config='{"productID": "<SPECIFIC_PRODUCT_ID"}'>
Cliquez ici
</button>
Le script (
ventrata-checkout.min.js) charge la fonctionnalité de checkout de Ventrata.L'attribut
data-configfournit la configuration nécessaire.L'élément bouton (
<button ventrata-checkout>) sert de déclencheur pour le processus de checkout.
📒 REMARQUE
L’élément (un bouton dans l’exemple ci-dessus), qui déclenche ou affiche le paiement, possède son propre data-config. Utilisez ce data-config pour définir quels produits seront affichés dans la fenêtre du checkout. S’il n’y a pas d’ID de produit, la liste complète des produits du checkout sera affichée.
Lorsqu’un utilisateur clique sur le bouton,
le script de checkout Ventrata lit le
data-config.Il utilise la clé API pour récupérer les produits disponibles.
Il lance le processus de paiement dans l’environnement spécifié (
testdans ce cas).
Filtrer les produits
Le volume et la complexité des produits peuvent avoir un impact significatif sur les performances du processus de paiement. Vous pouvez utiliser des paramètres spécifiques pour filtrer les produits qui apparaissent dans le widget de paiement.
Pour ce faire, ajoutez l'objet "products" après votre "apiKey" à la balise <script>. Ensuite, spécifiez l'attribut utilisé pour filtrer la liste des produits du checkout.
📗 ASTUCE
Apprenez à implémenter des filtres de liste de produits en combinaison avec la fonctionnalité CalendarFirst ici.
Afficher le checkout lors du clic sur un élément ou du déclenchement d'un événement
Vous pouvez configurer le checkout pour qu'il s'affiche de deux manières :
Configuration statique
Mode Pop-up : Utilisez l'attribut
ventrata-checkoutsur l'élément HTML.
Embedded Mode (Mode intégré) : Utilisez l'attribut
ventrata-embedded-widgetsur le HTML.
Configuration dynamique
Utilisez la fonction JavaScript globale appelée
Ventrata.
📗 ASTUCE
Pour plus d'informations, consultez cet article.
Paramètres de configuration pris en charge
Les paramètres de configuration sont des paramètres qui définissent le fonctionnement et le comportement du processus de checkout.
📗 ASTUCE
En savoir plus dans notre liste de paramètres de configuration pris en charge.
Liste des fonctionnalités du checkout
Ventrata offre des fonctionnalités spécifiques conçues pour faciliter le processus d'achat et améliorer l'expérience utilisateur.
📗 ASTUCE
En savoir plus dans notre liste des fonctionnalités du checkout.
Liste des fonctionnalités des cartes-cadeaux
Les cartes-cadeaux ont généralement une valeur stockée qui peut être dépensée sur plusieurs transactions jusqu'à épuisement du solde, par exemple pour une expérience et/ou un article de boutique.
Configurez les propriétés de base de vos cartes-cadeaux et profitez des fonctionnalités qui vous permettent d'offrir des cartes échangeables contre n'importe quel produit ou liées à un produit pré-sélectionné spécifique.
📗 ASTUCE
En savoir plus dans notre article sur les cartes-cadeaux.
Liste des fonctionnalités du sélecteur d'options
La fonctionnalité Sélecteur d'options, ainsi que ses sous-fonctionnalités, vous permet de personnaliser la présentation des options de produit et des langues des commentaires de visite. Avec divers réglages, vous pouvez créer une mise en page très personnalisée.
📗 ASTUCE
En savoir plus dans notre article sur la fonctionnalité sélecteur d'options.
Thèmes de couleur
Le checkout de Ventrata propose deux modes de couleur de base : LIGHT (clair) et DARK (sombre). Vous pouvez personnaliser ces modes en utilisant l'attribut data-config dans votre checkout.
De plus, des éléments spécifiques de votre web checkout peuvent être configurés en tant qu'objet JavaScript pour une personnalisation supplémentaire.
📗 ASTUCE
En savoir plus dans notre article sur les thèmes de couleur.
Multi-Booking (Réservation multiple)
La réservation multiple est un flux d'application qui permet à vos utilisateurs d'ajouter plusieurs produits au panier. Cela vous permet d'avoir un flux de panier entièrement géré via notre application ou simplement de fournir une action de modification pour les réservations déjà créées dans la commande.
📗 ASTUCE
Pour une description complète de ce flux, veuillez consulter Multi-Booking (Réservation multiple).
Manage My Booking (Check-in Portal)
L'attribut Check-In, également connu sous le nom de Manage My Booking (MMB), est un portail qui permet aux clients de reprogrammer, annuler ou mettre à jour leurs réservations, ainsi que d'échanger des bons de revendeurs.
📗 ASTUCE
Si vous souhaitez implémenter une page d'enregistrement (gérer ma réservation) sur votre site web, veuillez consulter Comment implémenter et utiliser le nouveau portail Gérer ma réservation (MMB).
Événements personnalisés
Intégrez la solution de checkout de Ventrata aux applications externes en utilisant des événements personnalisés.
📗 ASTUCE
Pour une liste complète des événements personnalisés, veuillez consulter cet article.