La mise en œuvre du mode embarqué requiert certaines conditions spécifiques.
Pour activer correctement le mode embarqué, vous devez disposer d’un élément HTML sur votre page qui servira de conteneur au widget.

Cet élément HTML doit comporter l’attribut ventrata-embedded-widget afin d’activer la fonctionnalité.

Intégrer le checkout de Ventrata

Pour activer le mode embarqué, vous devez ajouter les balises <script> et <aside> à votre page.

La balise <script> charge la configuration du processus de paiement.
La balise <aside> définit l’emplacement du widget et permet d’indiquer le productId afin d’ouvrir le widget pour un produit spécifique.

Ajouter `<script>` balise

Pour intégrer le checkout de Ventrata, ajoutez le <script> balise 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 avaient été 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", "embedded": true }'> 
</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", "embedded": true }'> 
</script>

Attribut	Description
`apiKey`	remplacez `<YOUR_API_TOKEN>` par la clé API située dans votre checkout En savoir plus
`"env"`	`"live"` - tous les paiements et commandes seront enregistrés comme s'ils avaient été effectués par des clients `"test"` - tous les paiements et commandes seront enregistrés comme des tests et ne seront pas inclus dans votre comptabilité 📗 ASTUCE Si l'attribut "env" n'est pas spécifié dans la `<script>` balise, le checkout restera par défaut en mode test.
`"embedded"`	Permet l'utilisation du mode intégré. La page nécessite la présence d'un élément HTML avec l'attribut `ventrata-embedded-widget` attribut. En savoir plus

Spécifiez l’emplacement et la taille du widget

Pour intégrer le checkout en mode intégré, incluez quelques lignes de code supplémentaires à l’endroit où le widget sera affiché.

Ajoutez le code ci-dessous <aside> balise au HTML d’une page où le widget intégré apparaîtra.
Utilisez l’attribut class pour spécifier la width et height.
Incluez les ventrata-embedded-widget et data-config attributs dans la <aside> balise.
À l’intérieur de l’attribut data-config ajoutez "embedded": true.
Spécifiez l’ID du produit en utilisant "productID" : "<product_ID>".

<aside 
     class="h-[50rem] w-[31.25rem]"
     ventrata-embedded-widget
     data-config='{"productID":"5789d12f-029c-42f3-80af-8223379d1816" 
}' 
> 
</aside>

📒 REMARQUE

Veuillez noter que les valeurs de hauteur et de largeur utilisées dans class="h-[50rem] w-[31.25rem]" peuvent ne pas être adaptés à votre page web. Veuillez remplacer ces valeurs par celles qui conviennent à votre page.

📗 ASTUCE

Vous pouvez utiliser le widget en mode intégré et pop-up simultanément. Pour plus de détails, consultez notre article FAQ.

Intégrer Checkout en mode intégré (Embedded)

Intégrer le checkout de Ventrata

Ajouter <script> balise

Production

Test

Spécifiez l’emplacement et la taille du widget

Ajouter `<script>` balise