> ## 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 > Integra el proceso de pago de Komerza directamente en tu sitio web con nuestro ligero Embed SDK Komerza Embed SDK en acción Komerza Embed SDK en acción ## Descripción general El Komerza Embed SDK te permite integrar de forma transparente nuestra experiencia de pago directamente en tu sitio web. En lugar de redirigir a los clientes a una página de pago separada, el embed crea una superposición modal que mantiene a los usuarios en tu sitio mientras proporciona un flujo de pago seguro y optimizado. Ve el Embed SDK en acción con nuestra demo interactiva También integra nuestro script de análisis para recuperar análisis de visitantes en tu sitio personalizado para obtener información completa sobre el recorrido del cliente. ## Características La superposición modal mantiene a los clientes en tu sitio durante el pago {" "} Paquete JavaScript mínimo sin dependencias externas {" "} Temas claro, oscuro y automático para combinar con el diseño de tu sitio Soporte completo de política de seguridad de contenido con integración de nonce ## Inicio rápido Agrega el siguiente script al `` de tu sitio web o antes de la etiqueta de cierre ``: ```html theme={null} ``` ### Método 1: Atributos de datos (Recomendado para casos simples) La forma más fácil de agregar botones de pago a tu sitio. Solo agrega atributos de datos a cualquier botón o elemento: ```html theme={null} ``` #### Referencia de atributos de datos | Atributo | Requerido | Descripción | Ejemplo | | ------------------------ | --------- | --------------------------------------------------------------- | --------------------------------------------- | | `data-kmrza-product-id` | ✅ Sí | El ID del producto de Komerza | `"0f6294be-25d6-4ced-96df-7d500608c54d"` | | `data-kmrza-variant-id` | ✅ Sí | El ID de la variante de Komerza | `"96f846e5-5f22-46a2-97b3-a1c88f685577"` | | `data-kmrza-quantity` | ❌ No | Cantidad a comprar (predeterminado: 1) | `"2"` | | `data-kmrza-theme` | ❌ No | Modo de tema: `light`, `dark` o `auto` (predeterminado: `auto`) | `"dark"` | | `data-kmrza-return-url` | ❌ No | URL personalizada de redirección tras el pago | `"https://example.com/gracias"` | | `data-kmrza-email` | ❌ No | Prerrellenar la dirección de correo del cliente | `"cliente@example.com"` | | `data-kmrza-coupon-code` | ❌ No | Prerrellenar y aplicar automáticamente un código de cupón | `"SAVE20"` | | `data-kmrza-metadata` | ❌ No | Cadena JSON de metadatos clave-valor personalizados | `"{"campaign":"summer"}"` | ### Método 2: API de JavaScript (Para casos de uso avanzados) Para mayor control, usa la API de JavaScript para abrir el pago programáticamente: ```html theme={null} ``` #### Múltiples artículos Puedes agregar varios productos al pago a la vez: ```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", }); ``` ## Guía de implementación completa ### Configuración HTML Aquí hay un ejemplo completo de página HTML: ```html theme={null} Mi Tienda

Producto increíble

Precio: 29,99 €

``` ### Integración 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('Falta ID de producto o variante'); return; } try { KomerzaEmbed.open({ items: [{ productId, variantId, quantity }], theme: this.getTheme() }); } catch (error) { console.error('No se pudo abrir el pago:', 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 (

Producto increíble

Precio: 29,99 €

); }; export default ProductPage; ``` ## Referencia de API ### `Komerza.init(options?)` Inicializa el embed y vincula automáticamente todos los elementos con atributos `data-kmrza-*`. ```javascript theme={null} Komerza.init({ nonce: "TU_NONCE_CSP", // Opcional: para política de seguridad de contenido }); ``` ### `Komerza.open(options)` Abre la modal de pago programáticamente. ```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()` Cierra la modal de pago programáticamente. ```javascript theme={null} Komerza.close(); ``` ### Integración 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 ( <>