Lista de verificación de integración
Siga esta lista de verificación completa para configurar su cuenta de Zonos Dashboard e integrar Zonos Checkout en su sitio o plataforma personalizada.
Crear una cuenta de Zonos
Para comenzar, contacte a nuestro equipo de ventas para crear una cuenta y firmar un acuerdo. Una vez firmado el acuerdo, recibirá dos microdepósitos en su cuenta que deben verificarse.
Envíe por correo electrónico estos montos de microdepósito a accounting@zonos.com con el ID de tienda de Dashboard (con copia a su representante de ventas).
Una vez verificados, sus datos bancarios se mostrarán en Dashboard -> Settings -> Billing.
Configurar ajustes de Dashboard y Checkout
Después de crear su cuenta de Zonos, deberá configurar los ajustes en Dashboard para garantizar que Checkout funcione correctamente con su tienda. Esta sección cubre todas las configuraciones esenciales de Dashboard.
Configurar pagos
Conecte una cuenta bancaria para recibir pagos oportunos de Checkout. Los pagos se procesan diariamente con un retraso de 2 días desde el cobro del pago. Para hacerlo, siga estos pasos:
- Navegue a Dashboard -> Settings -> Checkout settings .
- Haga clic en Add bank account
- Será dirigido a un portal de Stripe para completar la configuración y proporcionar la siguiente información:
- Información de la cuenta bancaria.
- EIN de la empresa.
- Número de Seguro Social de un propietario con el 25 % de la empresa. Para más detalles sobre por qué esto es obligatorio, consulte la documentación de Stripe.
Nota: Si necesita actualizar su calendario de pagos, contacte a support@zonos.com
Configurar dominios permitidos
El script de Zonos JS requiere una lista de dominios permitidos por motivos de seguridad. Esto evita que sitios no autorizados carguen el script y garantiza que solo se ejecute en sus dominios aprobados. Sin esta configuración, el script devolverá errores de permiso.
Para configurarlo:
- Navegue a Dashboard -> Settings -> Checkout settings
- En URLs, agregue su dominio completo y cualquier subdominio donde se usará Checkout. Por ejemplo, si su dominio es
example.com, debe agregarexample.comytest.example.com.
Personalizar ajustes de marca
Configure sus ajustes de marca en Dashboard para que coincidan con el aspecto de su tienda.
Para hacerlo, siga estos pasos:
- Navegue a Dashboard -> Settings -> Checkout settings -> Branding
- Configure los siguientes ajustes:
- Logo.
- Color de marca y de acento.
- Tema, estilo y fuente.
Para más información sobre los ajustes de marca, consulte nuestra documentación.
Conectar un transportista de envío
Para cotizar el envío en el checkout, deberá conectar un transportista de envío a su cuenta de Zonos. Esto le permitirá habilitar niveles de servicio de envío específicos en el checkout.
Para conectar un transportista de envío, siga estos pasos:
- Navegue a Dashboard -> Settings -> Shipping -> Rates
- Haga clic en Add carrier
- Siga las instrucciones de configuración del transportista.
Para más detalles sobre la conexión de cuentas de transportistas, consulte nuestra documentación.
Configurar zonas de envío
Las zonas de envío le permiten configurar qué transportistas y niveles de servicio están disponibles para diferentes regiones del mundo.
Para configurar zonas de envío, siga estos pasos:
- Navegue a Dashboard -> Settings -> Shipping -> Locations
- Haga clic en New zone
- Ingrese un nombre de zona y seleccione los países a los que desea enviar.
- Seleccione el transportista y el nivel de servicio que desea ofrecer.
Para más detalles sobre zonas de envío, consulte nuestra documentación.
Configurar un país de origen y código HS de respaldo
El país de origen y el código HS se utilizan para calcular aranceles e impuestos con precisión.
Si no proporciona un país de origen o código HS específico, usaremos los valores de respaldo configurados en Dashboard.
Para configurar su país de origen y código HS de respaldo:
- Navegue a Dashboard -> Settings -> Shipping -> Catalog.
- Para el país de origen, seleccione el país donde se fabrica la mayoría de sus productos.
- Para el código HS, ingrese el código HS de su producto más común. Si no tiene un código HS, navegue a Classify en Dashboard e ingrese el nombre y la descripción de su producto para generar un código HS preciso.
Instalar el fragmento de Zonos JS
El fragmento de Zonos JS es una integración de JavaScript del lado del cliente que habilita la funcionalidad de checkout global en su sitio. Sirve como puente entre su plataforma de comercio electrónico y los servicios de Zonos, gestionando:
- Experiencia de Checkout: Renderiza la interfaz de checkout y procesa los pagos.
- Servicios de ubicación: Detecta la ubicación del visitante y gestiona la conversión de moneda.
- Integración del carrito: Se conecta con su carrito y sistema de pedidos existentes.
- Seguridad: Valida dominios y autentica solicitudes de API.
El fragmento se carga de forma asincrónica para evitar cualquier impacto en el rendimiento de su sitio. Se inicializa con las credenciales de API de su tienda y gestiona todas las interacciones del lado del cliente de forma segura. La implementación está diseñada para ser no intrusiva, requiriendo cambios mínimos en su flujo de checkout existente.
A continuación se muestra un ejemplo completo que incluye la carga del script, la inicialización y el manejo de eventos como referencia al integrar Checkout.
(async function () { const timestamp = new Date().getTime(); const zonosScript = document.querySelector( `script[src*="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js"]`, ); if (!zonosScript) { const script = document.createElement('script'); script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`; script.addEventListener('load', () => { ..({ : { : () => { { : , }; }, : , }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();Nota: Reemplace los valores de marcador de posición (storeId, zonosApiKey, selectores, etc.) con sus valores reales de Zonos Dashboard.
Gestionar la caché del navegador
Recomendamos agregar una marca de tiempo u otro identificador único a la URL para garantizar que el script no sea almacenado en caché por el navegador. Esto garantizará que siempre se cargue la versión más reciente del script. Esto se muestra en la línea 10 del ejemplo completo.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Autenticar el fragmento de Zonos JS
Una vez que haya cargado el script de Zonos JS, debe autenticarlo pasando una clave de API pública de Zonos y un ID de tienda a la función Zonos.init. La clave de API pública utilizada para autenticar Checkout está diseñada para ser publicable, lo que significa que puede usarse de forma segura en código frontend sin exponer información sensible.
Para encontrar su ID de tienda y clave de API, navegue a Dashboard -> Settings -> Integrations. Asegúrese de no usar una Secret API key, ya que no está diseñada para usarse en código frontend. Esto se muestra en las líneas 29 y 30 del ejemplo completo.
Zonos.init({ // ... other fields zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard) storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard) // ... other fields});Actualizar su Content Security Policy (CSP)
Si su sitio establece una Content Security Policy, agregue los dominios a continuación a las directivas CSP correspondientes. Esta política se aplica tanto a Checkout como a Hello: el fragmento de Zonos carga scripts, hojas de estilo, fuentes, imágenes y realiza solicitudes de red, por lo que bloquear cualquiera de estos recursos interrumpirá el flujo de Checkout o la visualización de Hello. La lista de style-src también se aplica a style-src-elem.
Nota: Omita este paso si su sitio no envía un encabezado CSP. Solo los comerciantes que aplican una CSP personalizada en sus páginas necesitan actualizarla.
cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comzonos-store-assets.s3.amazonaws.comjs.stripe.coma.stripecdn.comb.stripecdn.comc.stripecdn.comcheckout.stripe.comf.stripecdn.comhcaptcha.comhooks.stripe.comm.stripe.comm.stripe.networkpay.stripe.compayments.stripe.comq.stripe.comr.stripe.comConfigurar Hello
Hello es obligatorio cuando se usa Checkout.
Hello es responsable de detectar la ubicación, el idioma y la moneda del visitante, y de mostrarle la información adecuada. Puede configurar todos los ajustes de Hello en Dashboard o en el script de Zonos JS. Si ya ha configurado Hello en Dashboard, el script cargará esos ajustes y los usará. Si especifica valores en la propiedad helloSettings de la función Zonos.init, el script usará esos valores en su lugar, como se muestra a continuación.
Configurar la conversión de moneda en Hello en el script JS
Hello usa selectores CSS para identificar elementos en su sitio que muestran información de moneda. Pase estos selectores a la propiedad helloSettings.currencyElementSelector de la función Zonos.init para que Hello pueda detectar y mostrar la moneda correcta del comprador internacional.
Puede usar cualquier selector CSS válido aquí, por ejemplo #price, .price para seleccionar varios elementos diferentes. Esto se muestra en las líneas 23 y 24 del ejemplo completo.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: '.price', // Replace with your actual selector }, // ... other fields});Abrir Hello automáticamente al cargar la página
De forma predeterminada, Hello solo se abrirá cuando el visitante haga clic en el botón de bandera. Si desea abrir Hello automáticamente cuando se carga la página, puede llamar a la función Zonos.openHelloDialog() una vez que se haya cargado el script de Zonos. Esto se muestra en las líneas 25 y 26 del ejemplo completo.
.({ : { : { .(); }, },});Configurar reglas de visualización de países en Dashboard
Controle qué países de compradores ven Hello y qué países aparecen en el menú desplegable del selector de países desde Dashboard. Navegue a Dashboard -> Settings -> Hello y busque la sección Country display rules.
Visibilidad del widget
Controle qué países de compradores ven el widget de Hello. Elija una de las reglas base y luego use las listas Always show y Never show para anular países específicos.
- All countries - Todos los países que Hello admite.
- Only shippable countries - Países a los que envía desde sus ajustes de envío.
- Always show - Países que siempre aparecen, incluso si la regla base los excluye.
- Never show - Países que nunca aparecen, incluso si la regla base los incluye.

Selector de países
Controle qué países aparecen en el menú desplegable del selector de países de Hello, usando las mismas reglas base más las anulaciones Always show y Never show.

Configurar Checkout
Checkout es responsable de permitir que el cliente ingrese su información de envío y facturación, calcule el landed cost, recaude el pago y complete el pedido.
Checkout compartirá datos contextuales con Hello, como la ubicación, el idioma y la moneda del visitante. Esto garantiza que la experiencia del cliente sea coherente en todo el proceso de compra.
Puede configurar todos los ajustes de Checkout tanto en Dashboard como en el script de Zonos JS. Si ya ha configurado Checkout en Dashboard, el script cargará esos ajustes y los usará. Si especifica valores en la propiedad checkoutSettings de la función Zonos.init, el script usará esos valores en su lugar.
Configurar el botón «realizar pedido» en el script JS
El script de Zonos JS reconocerá automáticamente a los compradores internacionales y los dirigirá al flujo de Checkout. Sin embargo, deberá configurar el botón «realizar pedido» en su plataforma para que abra Checkout al hacer clic. Esto se puede hacer pasando un selector CSS a la propiedad checkoutSettings.placeOrderButtonSelector de la función Zonos.init.
Si tiene varios botones que se pueden usar para realizar un pedido, asegúrese de pasar un selector para cada botón. Por ejemplo, #placeOrder, .place-order.
Esto se muestra en la línea 21 del ejemplo completo.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s) },});Crear detalles del carrito de forma segura en el servidor
Para mostrar los detalles del carrito al cliente, debe crear una función del lado del servidor que llame a la API de Zonos para crear un carrito y luego devolver ese ID de carrito a su frontend. Esto garantizará que los detalles del carrito no se expongan al cliente de una manera que pueda manipularse.
Su llamada a la API backend usará un token de credencial GraphQL secreto, que es diferente del token público que usa para autenticar el script de Zonos JS. Este token se puede recuperar en Dashboard -> Settings -> Integrations. El token secreto debe pasarse como encabezado en su llamada a la API.
La mutación cartCreate acepta una lista de artículos, que deben formatearse según el esquema de artículos del carrito.
// Create new cart from serversideasync function createCart() { /** * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate * */ const graphql = JSON.stringify({ query: `mutation cartCreate($input: CartCreateInput!){ cartCreate(input: $input) { id adjustments { amount currencyCode description productId sku type } items { id name amount currencyCode quantity sku description metadata { key value } } metadata { key value } }}`, variables: { /** * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput */ input: { /** * Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput */ adjustments: [ { amount: -10, currencyCode: 'USD', /** * Enum value: https://zonos.com/developer/types/CartAdjustmentType */ type: 'CART_TOTAL', }, ], /** * Cart item input: https://zonos.com/developer/types/ItemInput */ items: [ { name: 'Item 1', amount: 150.99, currencyCode: 'USD', description: 'Item 1 description', quantity: 2, }, ], /** * Cart metadata input: https://zonos.com/developer/types/CartMetadataInput */ metadata: [ { : , : , }, ], }, }, }); response = (, { : , : { : , : , }, : graphql, }); { data } = response.(); data..; }Sugerimos crear un endpoint de API en su servidor y luego llamar a ese endpoint desde su integración JS frontend, lo cual se detalla en el siguiente paso.
Pasar el ID del carrito a Checkout mediante el frontend
Una vez que haya creado un carrito en su servidor, debe pasar el ID del carrito al script de Zonos JS. Esto se puede hacer usando la devolución de llamada createCartId, que forma parte de la función Zonos.init. Checkout recuperará de forma segura los detalles del carrito de Zonos cuando se abra, evitando cualquier manipulación del carrito. Consulte el ejemplo de código a continuación.
El valor de createCartId no puede ser un valor estático; debe ser una función.
Zonos.init({ // ... other fields checkoutSettings: { // Replace with your actual selector(s) createCartId: async () => { const response = await fetch('https://api.merchant.com/api/get-cart', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const json = await response.json(); return json.id; // Only need to return the cart ID }, },});(Opcional) Mostrar un aviso debajo del total del pedido
Si necesita mostrar un mensaje breve y dinámico dentro de Checkout —por ejemplo, una divulgación regulatoria cuando un producto específico está en el carrito— puede devolver una matriz customMessage desde la devolución de llamada createCartId. Cada entrada de la matriz se renderiza en su propia línea de un único banner informativo directamente debajo de Order total.
La sintaxis de enlace Markdown —[link label] seguido de (https://example.com)— se renderiza como una etiqueta de anclaje, para que los compradores puedan hacer clic. Las URL https:// simples en el texto también se vinculan automáticamente. Todo lo demás se renderiza como texto sin formato, por lo que el HTML en las cadenas se escapa en lugar de ejecutarse.
Solo se muestra un banner por Checkout, sin importar cuántas líneas pase.
Zonos.init({ // ... other fields checkoutSettings: { createCartId: async () => { const response = await fetch( 'https://api.merchant.com/api/get-zonos-cart', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }, ); const json = await response.json(); return { cartId: json.id, // Each item is rendered on a new line of the same info banner. // Markdown links `[text](url)` become `<a>` tags. customMessage: [ 'Some items in your cart are subject to California regulations.', 'Please review the required notice [here](https://oag.ca.gov/prop65).', ], }; }, },});Nota: El texto del mensaje se renderiza como texto sin formato: las etiquetas HTML en las cadenas se escapan, por lo que solo se interpreta la sintaxis de enlace Markdown. Decida si incluir
customMessageen el servidor según el contenido del carrito para que el banner solo aparezca cuando sea relevante.
(Opcional) Activar Checkout de Zonos mediante programación
Si tiene lógica personalizada y necesita activar el checkout de Zonos mediante programación, puede usar la función Zonos.triggerCheckoutInternational() para abrir la ventana de checkout de Zonos después de que Zonos esté inicializado. Esto invocará la devolución de llamada createCartId definida en Zonos.init anteriormente y abrirá la ventana de checkout de Zonos.
// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")const domesticCountry = 'US';document.querySelector('.country-select').addEventListener('change', e => { const country = e.target.value; if (country !== domesticCountry) { Zonos.triggerCheckoutInternational(); }});(Opcional) Selector que siempre activa Checkout de Zonos
Si desea separar el proceso de checkout para compradores nacionales e internacionales, puede agregar un botón International checkout a su sitio. En lugar de activar manualmente Zonos Checkout con Zonos.triggerCheckoutInternational, puede configurar Zonos.init con el selector adecuado. El selector se deshabilitará hasta que Zonos esté inicializado; cuando se haga clic en el botón, activará automáticamente el checkout de Zonos. Esto invocará la devolución de llamada createCartId definida en Zonos.init y abrirá la ventana de checkout de Zonos.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout },});(Opcional) Seguir el embudo de checkout con GA4 o Facebook Pixel
Zonos Checkout puede reenviar el embudo completo de checkout a sus herramientas de análisis existentes. Para cada paso, Zonos emite:
- El evento original
zonos-checkout-...a GA4 (mediantegtag('event', ...)) y a Meta como evento personalizado (mediantefbq('trackCustom', ...)). - El evento estándar coincidente a Meta cuando existe uno —
InitiateCheckout,AddPaymentInfoyPurchase— para que la optimización y los informes de conversión integrados de Meta funcionen de inmediato.
La forma en que los eventos llegan a sus proveedores depende de cómo se renderiza Checkout en su sitio. Elija la ruta que coincida con su integración.
Integración nativa (Checkout se renderiza directamente en su sitio)
Cuando el elemento personalizado <zonos-checkout> se monta en su propia página (el valor predeterminado para la integración del script de Zonos JS descrita anteriormente), los window.gtag y window.fbq propios de la página ya están en el ámbito. Zonos los llama directamente: no se necesita relé ni transferencia de ID de píxel.
Configuración:
- Asegúrese de que su página ya tenga cargada la etiqueta base de GA4 y/o el código base de Meta Pixel (de la misma forma que rastrearía cualquier otra página de su sitio).
- Habilite los proveedores que desee en el panel de Zonos en Checkout settings → Tracking (Google Analytics, Facebook Pixel o ambos).
Eso es todo. Sin script de relé, sin customHTML, sin IDs adicionales que pasar: Zonos detecta gtag / fbq en la página y dispara eventos directamente.
Integración con iframe (Checkout iframe heredado en iglobalstores.com)
Cuando Checkout se aloja en un iframe en un origen diferente, no puede acceder directamente al gtag / fbq de su página. Zonos publica un pequeño script de relé — analyticsRelayOnInit.js — que escucha eventos postMessage del iframe de Checkout y los reenvía a los proveedores que tenga en su página. Un solo relé gestiona tanto GA4 como Facebook Pixel al mismo tiempo.
Configuración:
- Habilite los proveedores que desee en el panel de Zonos en Checkout settings → Tracking.
- Agregue la etiqueta base de GA4 y/o el código base de Meta Pixel al
<head>de la página que aloja el iframe de Checkout. - Agregue el script de relé después de las etiquetas de proveedor:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- Pase los ID correspondientes a través de su
customHTMLde Checkout para que el relé sepa contra qué propiedad/píxel disparar:
window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX'; window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';Para instrucciones paso a paso de iframe, la referencia completa de eventos (incluido el mapeo de carga útil de purchase / Purchase) y consejos de depuración, consulte:
Sincronizar seguimiento y estado de pedidos en Dashboard
Para sincronizar pedidos entre su sistema y Zonos Dashboard, implemente estas llamadas a la API y webhooks:
Mutaciones obligatorias
| Mutación↕ | Descripción↕ |
|---|---|
orderUpdateAccountOrderNumber | Sincroniza su número de cuenta nativo con Dashboard. Docs → |
orderAddTrackingNumber | Obligatoria solo si no imprime etiquetas en Dashboard. Garantiza que el seguimiento se muestre en Dashboard para que Zonos pueda garantizar sus cálculos de landed cost. Docs → |
Webhooks obligatorios
Probar su integración
Antes de poner en marcha su integración de Checkout, es importante probar exhaustivamente todos los aspectos de la integración para garantizar una experiencia fluida para el cliente. Esto incluye probar el flujo de checkout, el procesamiento de pagos, la creación de pedidos y la funcionalidad de webhooks.
Siga nuestra guía de pruebas para verificar que su integración funciona correctamente e identificar y corregir cualquier problema antes de lanzar a producción.
Preguntas frecuentes
A continuación se presentan algunas preguntas frecuentes sobre el proceso de integración.
¿Cómo maneja Zonos la confirmación del pedido?
Configure la experiencia posterior a la compra en Dashboard -> Settings -> Checkout settings en Success page type. Hay tres opciones disponibles:
- Show Zonos success page (predeterminado, recomendado) — Zonos muestra una página de agradecimiento integrada después de realizar el pedido. La página siempre se muestra, incluso si el pedido no se importa en su sistema, para que el comprador siempre reciba una confirmación.
- Redirect to a success page — Zonos espera en una breve pantalla de «Pedido completado» hasta que se crea el pedido, luego redirige a su URL de éxito configurada con
zOrderNumber(yorderIdpara carritos heredados) agregados como parámetros de consulta. - Close the checkout modal — Zonos cierra su modal una vez que se captura el pago. Si también configura una URL de éxito, Zonos redirige a esa URL inmediatamente después de que Stripe recauda el pago —sin esperar a que se cree el pedido— y agrega
zonosCheckoutSessionIdcomo parámetro de consulta. Use esta opción cuando desee la transferencia más rápida de vuelta a su propia página de éxito.
Buscar el pedido desde zonosCheckoutSessionId
Cuando usa Close the checkout modal con una URL de redirección, el pedido puede tardar unos segundos en asociarse a la sesión de checkout después de la redirección. Lea zonosCheckoutSessionId de la URL y consulte la consulta GraphQL checkoutSession desde su servidor usando su token de credencial secreto hasta que el pedido esté listo. Nunca llame a esto desde el navegador — el token de credencial secreto debe permanecer en el servidor.
query getCheckoutSession($id: String!)checkoutSession )orderidEnvíe la consulta a https://api.zonos.com/graphql con su token de credencial secreto de Dashboard -> Settings -> Integrations pasado como encabezado de solicitud credentialToken.
¿Puedo recibir una notificación cuando se crea un pedido?
Sí. Si desea recibir notificaciones cuando se crea un pedido, en Dashboard, en la sección Email de Checkout settings, puede ingresar la dirección de correo electrónico de los miembros del equipo que deben recibir notificación cuando se crea, envía o cancela un pedido.
Integración personalizada
Cree una integración de Checkout de extremo a extremo en su sitio personalizado.