> ## 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. # Embed SDK > Integriere Komerza-Checkout direkt in deine Website mit unserem leichtgewichtigen Embed SDK Komerza Embed SDK in Aktion Komerza Embed SDK in Aktion ## Übersicht Das Komerza Embed SDK ermöglicht es dir, unsere Checkout-Erfahrung nahtlos direkt in deine Website zu integrieren. Anstatt Kunden auf eine separate Checkout-Seite weiterzuleiten, erstellt das Embed eine modale Überlagerung, die Nutzer auf deiner Website behält und gleichzeitig einen sicheren, optimierten Zahlungsablauf bietet. Sieh das Embed SDK in Aktion mit unserer interaktiven Demo Integriere auch unser Analytics-Skript, um Besucheranalysen auf deiner benutzerdefinierten Website für vollständige Einblicke in die Customer Journey zurückzubringen. ## Funktionen Modale Überlagerung hält Kunden während des Checkouts auf deiner Website {" "} Minimales JavaScript-Bundle ohne externe Abhängigkeiten {" "} Helle, dunkle und automatische Themes passend zum Design deiner Website Vollständige Content Security Policy-Unterstützung mit Nonce-Integration ## Schnellstart Füge das folgende Skript in das `` deiner Website oder vor dem schließenden ``-Tag ein: ```html theme={null} ``` ### Methode 1: Datenattribute (Empfohlen für einfache Anwendungsfälle) Die einfachste Möglichkeit, Checkout-Buttons zu deiner Website hinzuzufügen. Füge einfach Datenattribute zu einem beliebigen Button oder Element hinzu: ```html theme={null} ``` #### Datenattribute-Referenz | Attribut | Erforderlich | Beschreibung | Beispiel | | ------------------------ | ------------ | ------------------------------------------------------------ | --------------------------------------------- | | `data-kmrza-product-id` | ✅ Ja | Die Produkt-ID aus Komerza | `"0f6294be-25d6-4ced-96df-7d500608c54d"` | | `data-kmrza-variant-id` | ✅ Ja | Die Varianten-ID aus Komerza | `"96f846e5-5f22-46a2-97b3-a1c88f685577"` | | `data-kmrza-quantity` | ❌ Nein | Zu kaufende Menge (Standard: 1) | `"2"` | | `data-kmrza-theme` | ❌ Nein | Theme-Modus: `light`, `dark` oder `auto` (Standard: `auto`) | `"dark"` | | `data-kmrza-return-url` | ❌ Nein | Benutzerdefinierte URL zur Weiterleitung nach der Zahlung | `"https://example.com/danke"` | | `data-kmrza-email` | ❌ Nein | E-Mail-Adresse des Kunden vorausfüllen | `"kunde@example.com"` | | `data-kmrza-coupon-code` | ❌ Nein | Couponcode vorausfüllen und automatisch anwenden | `"SAVE20"` | | `data-kmrza-metadata` | ❌ Nein | JSON-String mit benutzerdefinierten Schlüssel-Wert-Metadaten | `"{"campaign":"summer"}"` | ### Methode 2: JavaScript-API (Für fortgeschrittene Anwendungsfälle) Für mehr Kontrolle nutze die JavaScript-API, um den Checkout programmgesteuert zu öffnen: ```html theme={null} ``` #### Mehrere Artikel Du kannst mehrere Produkte gleichzeitig zum Checkout hinzufügen: ```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", }); ``` ## Vollständiger Implementierungsleitfaden ### HTML-Setup Hier ist ein vollständiges HTML-Seitenbeispiel: ```html theme={null} Mein Shop

Tolles Produkt

Preis: 29,99 €

``` ### JavaScript-Integration ```javascript theme={null} document.addEventListener('DOMContentLoaded', function() { KomerzaEmbed.init(); document.getElementById('buy-now').addEventListener('click', function() { KomerzaEmbed.open({ items: [ { productId: 'prod_123', variantId: 'var_456', quantity: 1 } ] }); }); }); ``` ```javascript theme={null} class CheckoutManager { constructor() { this.isInitialized = false; this.init(); } init() { KomerzaEmbed.init({ nonce: this.getCSPNonce() }); this.isInitialized = true; this.bindEvents(); } bindEvents() { document.querySelectorAll('[data-buy-button]').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); this.handlePurchase(button); }); }); 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('Produkt- oder Varianten-ID fehlt'); return; } try { KomerzaEmbed.open({ items: [{ productId, variantId, quantity }], theme: this.getTheme() }); } catch (error) { console.error('Checkout konnte nicht geöffnet werden:', error); this.fallbackCheckout(productId, variantId, quantity); } } getTheme() { return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } getCSPNonce() { return document.querySelector('script[nonce]')?.getAttribute('nonce') ?? null; } fallbackCheckout(productId, variantId, quantity) { window.location.href = `https://checkout.komerza.com/product/${productId}/${variantId}?qty=${quantity}`; } } document.addEventListener('DOMContentLoaded', () => 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) return; window.KomerzaEmbed.open({ items: [{ productId: 'prod_123', variantId: 'var_456', quantity: 1 }], theme: 'auto' }); }; return (

Tolles Produkt

Preis: 29,99 €

); }; export default ProductPage; ``` ## API-Referenz ### `Komerza.init(options?)` Initialisiert das Embed und verknüpft automatisch alle Elemente mit `data-kmrza-*`-Attributen. ```javascript theme={null} Komerza.init({ nonce: "DEIN_CSP_NONCE", // Optional: für Content Security Policy }); ``` **Hinweis:** Dies wird automatisch aufgerufen, wenn die JS-API (`Komerza.open()`) verwendet wird, muss aber explizit aufgerufen werden, wenn Datenattribute verwendet werden. ### `Komerza.open(options)` Öffnet die Checkout-Modal programmgesteuert. ```javascript theme={null} Komerza.open({ items: [{ productId: string, variantId: string, quantity?: number }], theme?: 'light' | 'dark' | 'auto', affiliateCode?: string, returnUrl?: string, email?: string, couponCode?: string, metadata?: Record }); ``` ### `Komerza.close()` Schließt die Checkout-Modal programmgesteuert. ```javascript theme={null} Komerza.close(); ``` ### Next.js-Integration ```jsx theme={null} // components/CheckoutButton.jsx "use client"; 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 ( <>