> ## Documentation Index > Fetch the complete documentation index at: https://docs.komerza.com/llms.txt > Use this file to discover all available pages before exploring further. # SDK d'intégration > Intégrez le paiement Komerza directement dans votre site web avec notre SDK d'intégration léger SDK d'intégration Komerza en action SDK d'intégration Komerza en action ## Aperçu Le SDK d'intégration Komerza vous permet d'intégrer de manière transparente notre expérience de paiement directement dans votre site web. Au lieu de rediriger les clients vers une page de paiement séparée, l'intégration crée une superposition modale qui garde les utilisateurs sur votre site tout en offrant un flux de paiement sécurisé et optimisé. Voir le SDK d'intégration en action avec notre démo interactive Intégrez également notre script d'analyse pour récupérer les analyses de visiteurs sur votre site personnalisé pour des informations complètes sur le parcours client. ## Fonctionnalités La superposition modale garde les clients sur votre site pendant le paiement {" "} Bundle JavaScript minimal sans dépendances externes {" "} Thèmes clair, sombre et automatique pour correspondre au design de votre site Support complet de la politique de sécurité du contenu avec intégration de nonce ## Démarrage rapide Ajoutez le script suivant dans le `` de votre site web ou avant la balise fermante `` : ```html theme={null} ``` ### Méthode 1 : Attributs de données (recommandé pour les cas simples) La façon la plus facile d'ajouter des boutons de paiement à votre site. Ajoutez simplement des attributs de données à n'importe quel bouton ou élément : ```html theme={null} ``` #### Référence des attributs de données | Attribut | Requis | Description | Exemple | | ------------------------ | ------ | ----------------------------------------------------------- | --------------------------------------------- | | `data-kmrza-product-id` | ✅ Oui | L'ID du produit Komerza | `"0f6294be-25d6-4ced-96df-7d500608c54d"` | | `data-kmrza-variant-id` | ✅ Oui | L'ID de la variante Komerza | `"96f846e5-5f22-46a2-97b3-a1c88f685577"` | | `data-kmrza-quantity` | ❌ Non | Quantité à acheter (défaut : 1) | `"2"` | | `data-kmrza-theme` | ❌ Non | Mode thème : `light`, `dark` ou `auto` (défaut : `auto`) | `"dark"` | | `data-kmrza-return-url` | ❌ Non | URL personnalisée vers laquelle rediriger après le paiement | `"https://example.com/merci"` | | `data-kmrza-email` | ❌ Non | Préremplir l'adresse e-mail du client | `"client@example.com"` | | `data-kmrza-coupon-code` | ❌ Non | Préremplir et appliquer automatiquement un code de coupon | `"SAVE20"` | | `data-kmrza-metadata` | ❌ Non | Chaîne JSON de métadonnées clé-valeur personnalisées | `"{"campaign":"summer"}"` | ### Méthode 2 : API JavaScript (pour les cas d'utilisation avancés) Pour plus de contrôle, utilisez l'API JavaScript pour ouvrir le paiement par programmation : ```html theme={null} ``` #### Articles multiples Vous pouvez ajouter plusieurs produits au paiement à la fois : ```javascript theme={null} Komerza.open({ items: [ { productId: "0f6294be-25d6-4ced-96df-7d500608c54d", variantId: "96f846e5-5f22-46a2-97b3-a1c88f685577", quantity: 2, }, { productId: "54d6adb4-c160-4f73-b9c0-6c16970fff41", variantId: "37e70705-c603-4ab2-8a2e-d16e80288c8c", quantity: 1, }, ], theme: "light", }); ``` ## Guide d'implémentation complet ### Configuration HTML Voici un exemple de page HTML complète : ```html theme={null} Ma Boutique

Produit incroyable

Prix : 29,99 €

``` ### Intégration JavaScript ```javascript theme={null} // Initialiser au chargement de la page document.addEventListener('DOMContentLoaded', function() { KomerzaEmbed.init(); // Lier à votre bouton d'achat document.getElementById('buy-now').addEventListener('click', function() { KomerzaEmbed.open({ items: [ { productId: 'prod_123', variantId: 'var_456', quantity: 1 } ] }); }); }); ``` ```javascript theme={null} // Intégration avancée avec gestion des erreurs et plusieurs produits class CheckoutManager { constructor() { this.isInitialized = false; this.init(); } init() { // Initialiser avec nonce CSP KomerzaEmbed.init({ nonce: this.getCSPNonce() }); this.isInitialized = true; this.bindEvents(); } bindEvents() { // Lier à tous les boutons d'achat document.querySelectorAll('[data-buy-button]').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); this.handlePurchase(button); }); }); // Optionnel : Lier aux événements de fermeture document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { KomerzaEmbed.close(); } }); } handlePurchase(button) { const productId = button.dataset.productId; const variantId = button.dataset.variantId; const quantity = parseInt(button.dataset.quantity) || 1; if (!productId || !variantId) { console.error('ID produit ou variante manquant'); return; } try { KomerzaEmbed.open({ items: [{ productId, variantId, quantity }], theme: this.getTheme() }); } catch (error) { console.error('Échec de l\'ouverture du paiement :', error); // Retour à l'URL de paiement directe this.fallbackCheckout(productId, variantId, quantity); } } getTheme() { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark'; } return 'light'; } getCSPNonce() { const script = document.querySelector('script[nonce]'); return script ? script.getAttribute('nonce') : null; } fallbackCheckout(productId, variantId, quantity) { const checkoutUrl = `https://checkout.komerza.com/product/${productId}/${variantId}?qty=${quantity}`; window.location.href = checkoutUrl; } } document.addEventListener('DOMContentLoaded', function() { new CheckoutManager(); }); ``` ```jsx theme={null} import React, { useEffect, useState } from 'react'; const ProductPage: React.FC = () => { const [isEmbedReady, setIsEmbedReady] = useState(false); useEffect(() => { const script = document.createElement('script'); script.src = 'https://checkout.komerza.com/embed/embed.iife.js'; script.onload = () => { window.KomerzaEmbed.init(); setIsEmbedReady(true); }; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); const handleBuyClick = () => { if (!isEmbedReady) { console.warn('SDK d\'intégration pas encore prêt'); return; } window.KomerzaEmbed.open({ items: [ { productId: 'prod_123', variantId: 'var_456', quantity: 1 } ], theme: 'auto' }); }; return (

Produit incroyable

Prix : 29,99 €

); }; export default ProductPage; ``` ## Référence API ### `Komerza.init(options?)` Initialise l'intégration et lie automatiquement tous les éléments avec des attributs `data-kmrza-*`. ```javascript theme={null} Komerza.init({ nonce: "VOTRE_NONCE_CSP", // Optionnel : pour la politique de sécurité du contenu }); ``` **Options :** * `nonce` (optionnel) : Nonce CSP pour les styles et scripts injectés **Remarque :** Ceci est appelé automatiquement lors de l'utilisation de l'API JS (`Komerza.open()`), mais doit être appelé explicitement si vous utilisez des attributs de données. ### `Komerza.open(options)` Ouvre la modale de paiement par programmation. ```javascript theme={null} Komerza.open({ items: [ { productId: string, // Requis variantId: string, // Requis quantity?: number // Optionnel, défaut : 1 } ], theme?: 'light' | 'dark' | 'auto', // Optionnel, défaut : 'auto' affiliateCode?: string, // Optionnel, remplacer le code de suivi d'affiliation returnUrl?: string, // Optionnel, URL de retour personnalisée après paiement email?: string, // Optionnel, préremplir l'e-mail client couponCode?: string, // Optionnel, préremplir et appliquer un code coupon metadata?: Record // Optionnel, métadonnées personnalisées de commande }); ``` ### `Komerza.close()` Ferme la modale de paiement par programmation. ```javascript theme={null} Komerza.close(); ``` ### Bouton de base ```html theme={null} ``` ### Thème sombre avec quantité personnalisée ```html theme={null} ``` ### Intégration Next.js ```jsx theme={null} // components/CheckoutButton.jsx "use client"; import { useEffect } from "react"; import Script from "next/script"; export default function CheckoutButton({ productId, variantId, quantity = 1 }) { const handleClick = () => { if (window.Komerza) { window.Komerza.open({ items: [{ productId, variantId, quantity }], }); } }; return ( <>