> ## 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 > Zintegruj płatności Komerza bezpośrednio na swojej stronie internetowej z naszym lekkim Embed SDK Komerza Embed SDK w akcji Komerza Embed SDK w akcji ## Przegląd Komerza Embed SDK umożliwia płynną integrację naszego procesu płatności bezpośrednio na Twojej stronie internetowej. Zamiast przekierowywać klientów na osobną stronę płatności, osadzenie tworzy modalne nakładki, które utrzymują użytkowników na Twojej stronie, zapewniając jednocześnie bezpieczny, zoptymalizowany przepływ płatności. Zobacz Embed SDK w akcji z naszą interaktywną demonstracją Zintegruj również nasz skrypt analityczny, aby przywrócić analizy odwiedzających na swojej niestandardowej stronie dla pełnego wglądu w podróż klienta. ## Funkcje Modalna nakładka utrzymuje klientów na Twojej stronie podczas płatności {" "} Minimalny pakiet JavaScript bez zewnętrznych zależności {" "} Jasne, ciemne i automatyczne motywy dopasowane do projektu Twojej strony Pełne wsparcie polityki bezpieczeństwa treści z integracją nonce ## Szybki start Dodaj następujący skrypt do sekcji `` swojej strony lub przed zamykającym tagiem ``: ```html theme={null} ``` ### Metoda 1: Atrybuty danych (zalecana dla prostych przypadków użycia) Najłatwiejszy sposób dodawania przycisków płatności do Twojej strony. Wystarczy dodać atrybuty danych do dowolnego przycisku lub elementu: ```html theme={null} ``` #### Referencja atrybutów danych | Atrybut | Wymagany | Opis | Przykład | | ------------------------ | -------- | ----------------------------------------------------------- | --------------------------------------------- | | `data-kmrza-product-id` | ✅ Tak | ID produktu z Komerza | `"0f6294be-25d6-4ced-96df-7d500608c54d"` | | `data-kmrza-variant-id` | ✅ Tak | ID wariantu z Komerza | `"96f846e5-5f22-46a2-97b3-a1c88f685577"` | | `data-kmrza-quantity` | ❌ Nie | Ilość do zakupu (domyślnie: 1) | `"2"` | | `data-kmrza-theme` | ❌ Nie | Tryb motywu: `light`, `dark` lub `auto` (domyślnie: `auto`) | `"dark"` | | `data-kmrza-return-url` | ❌ Nie | Niestandardowy URL do przekierowania po płatności | `"https://example.com/dziekujemy"` | | `data-kmrza-email` | ❌ Nie | Wstępnie wypełnij adres e-mail klienta | `"klient@example.com"` | | `data-kmrza-coupon-code` | ❌ Nie | Wstępnie wypełnij i automatycznie zastosuj kod kuponu | `"SAVE20"` | | `data-kmrza-metadata` | ❌ Nie | Ciąg JSON niestandardowych metadanych klucz-wartość | `"{"campaign":"summer"}"` | ### Metoda 2: API JavaScript (dla zaawansowanych przypadków użycia) Dla większej kontroli użyj API JavaScript, aby programowo otworzyć płatność: ```html theme={null} ``` #### Wiele artykułów Możesz dodać wiele produktów do płatności jednocześnie: ```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", }); ``` ## Kompletny przewodnik po implementacji ### Konfiguracja HTML Oto kompletny przykład strony HTML: ```html theme={null} Mój Sklep

Niesamowity produkt

Cena: 29,99 zł

``` ### Integracja JavaScript ```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, variantId } = button.dataset; const quantity = parseInt(button.dataset.quantity) || 1; if (!productId || !variantId) { console.error('Brak ID produktu lub wariantu'); return; } try { KomerzaEmbed.open({ items: [{ productId, variantId, quantity }], theme: this.getTheme() }); } catch (error) { console.error('Nie udało się otworzyć płatności:', error); window.location.href = `https://checkout.komerza.com/product/${productId}/${variantId}?qty=${quantity}`; } } getTheme() { return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } getCSPNonce() { return document.querySelector('script[nonce]')?.getAttribute('nonce') ?? null; } } 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 (

Niesamowity produkt

Cena: 29,99 zł

); }; export default ProductPage; ``` ## Referencja API ### `Komerza.init(options?)` Inicjalizuje osadzenie i automatycznie wiąże wszystkie elementy z atrybutami `data-kmrza-*`. ```javascript theme={null} Komerza.init({ nonce: "TWÓJ_NONCE_CSP", // Opcjonalnie: dla polityki bezpieczeństwa treści }); ``` ### `Komerza.open(options)` Otwiera modalną płatność programowo. ```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()` Zamyka modalną płatność programowo. ```javascript theme={null} Komerza.close(); ``` ### Integracja Next.js ```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 ( <>