Checklista för integration
Följ denna omfattande checklista för att konfigurera ert Zonos Dashboard-konto och integrera Zonos Checkout i er anpassade webbplats eller plattform.
Skapa ett Zonos-konto
För att komma igång, kontakta vårt säljteam för att skapa ett konto och underteckna ett avtal. När avtalet är undertecknat får ni två mikroinsättningar på ert konto som behöver verifieras.
Skicka dessa mikroinsättningsbelopp via e-post till accounting@zonos.com tillsammans med ert Dashboard store ID (CC:a er säljrepresentant).
När verifieringen är klar visas era bankuppgifter i Dashboard -> Settings -> Billing.
Konfigurera Dashboard- och Checkout-inställningar
När ni har skapat ert Zonos-konto behöver ni konfigurera inställningar i Dashboard så att Checkout fungerar korrekt med er butik. Detta avsnitt täcker alla väsentliga Dashboard-konfigurationer.
Konfigurera utbetalningar
Anslut ett bankkonto för att ta emot utbetalningar från Checkout i tid. Utbetalningar behandlas dagligen med en fördröjning på 2 dagar från den inkasserade betalningen. Följ dessa steg:
- Navigera till Dashboard -> Settings -> Checkout settings .
- Klicka på Add bank account
- Ni tas till en Stripe-portal för att slutföra konfigurationen och ange följande information:
- Bankkontouppgifter.
- Företagets EIN.
- Personnummer för en ägare med minst 25 % ägarandel. Mer information om varför detta krävs finns i Stripes dokumentation.
Obs: Om ni behöver uppdatera ert utbetalningsschema, kontakta support@zonos.com
Konfigurera tillåtna domäner
Zonos JS-skriptet kräver en lista över tillåtna domäner av säkerhetsskäl. Detta förhindrar att obehöriga webbplatser laddar skriptet och säkerställer att det bara körs på era godkända domäner. Utan denna konfiguration returnerar skriptet behörighetsfel.
Så här ställer ni in detta:
- Navigera till Dashboard -> Settings -> Checkout settings
- Under URLs, lägg till er fullständiga domän och eventuella underdomäner där Checkout ska användas. Om er domän till exempel är
example.combör ni lägga tillexample.comochtest.example.com.
Anpassa varumärkesinställningar
Konfigurera era varumärkesinställningar i Dashboard så att de matchar er butiks utseende och känsla.
Följ dessa steg:
- Navigera till Dashboard -> Settings -> Checkout settings -> Branding
- Konfigurera följande inställningar:
- Logotyp.
- Varumärkes- och accentfärg.
- Tema, stil och teckensnitt.
Mer information om varumärkesinställningar finns i vår dokumentation.
Anslut en frakttransportör
För att kunna ge fraktofferter i kassan behöver ni ansluta en frakttransportör till ert Zonos-konto. Då kan ni aktivera specifika frakttjänstenivåer i kassan.
För att ansluta en frakttransportör, följ dessa steg:
- Navigera till Dashboard -> Settings -> Shipping -> Rates
- Klicka på Add carrier
- Följ instruktionerna för transportörskonfiguration.
Mer information om att ansluta transportörskonton finns i vår dokumentation.
Konfigurera fraktzoner
Fraktzoner låter er konfigurera vilka frakttransportörer och tjänstenivåer som är tillgängliga för olika regioner i världen.
För att konfigurera fraktzoner, följ dessa steg:
- Navigera till Dashboard -> Settings -> Shipping -> Locations
- Klicka på New zone
- Ange ett zonnamn och välj de länder ni vill skicka till.
- Välj den transportör och tjänstenivå ni vill erbjuda.
Mer information om fraktzoner finns i vår dokumentation.
Konfigurera ett reservursprungsland och en HS-kod
Ursprungsland och HS-kod används för att beräkna korrekta tullar och skatter.
Om ni inte anger ett specifikt ursprungsland eller en HS-kod använder vi reservvärdena som ställts in i Dashboard.
Så här ställer ni in ert reservursprungsland och er HS-kod:
- Navigera till Dashboard -> Settings -> Shipping -> Catalog.
- För ursprungsland, välj det land där majoriteten av era produkter tillverkas.
- För HS-kod, ange HS-koden för er vanligaste produkt. Om ni inte har en HS-kod, navigera till Classify i Dashboard och ange namn och beskrivning för er produkt för att generera en korrekt HS-kod.
Installera Zonos JS-snippetet
Zonos JS-snippetet är en klientbaserad JavaScript-integration som möjliggör global checkout-funktionalitet på er webbplats. Det fungerar som bron mellan er e-handelsplattform och Zonos-tjänster och hanterar:
- Checkout-upplevelse: Renderar checkout-gränssnittet och behandlar betalningar.
- Platstjänster: Identifierar besökarens plats och hanterar valutakonvertering.
- Varukorgsintegration: Ansluter till er befintliga varukorgs- och ordersystem.
- Säkerhet: Validerar domäner och autentiserar API-förfrågningar.
Snippetet laddas asynkront för att undvika påverkan på er webbplats prestanda. Det initieras med er butiks API-uppgifter och hanterar alla klientinteraktioner säkert. Implementeringen är utformad för att vara diskret och kräver minimala ändringar i ert befintliga checkout-flöde.
Nedan finns ett komplett exempel som inkluderar skriptladdning, initiering och händelsehantering att referera till när ni integrerar 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", () => { window.Zonos.init({ : { : () => { { : , }; }, : , }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();Obs: Ersätt platshållarvärdena (storeId, zonosApiKey, selektorer osv.) med era faktiska värden från ert Zonos Dashboard.
Hantera webbläsarens cache
Vi rekommenderar att ni lägger till en tidsstämpel eller annan unik identifierare i URL:en så att skriptet inte cachas av webbläsaren. Detta säkerställer att den senaste versionen av skriptet alltid laddas. Detta visas på rad 10 i det kompletta exemplet.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Autentisera Zonos JS-snippetet
När ni har laddat Zonos JS-skriptet behöver ni autentisera det genom att skicka en offentlig Zonos API-nyckel och ett store ID till funktionen Zonos.init. Den offentliga API-nyckeln som används för att autentisera Checkout är utformad för att vara publicerbar, vilket betyder att den säkert kan användas i frontend-kod utan att känslig information exponeras.
För att hitta ert store ID och er API-nyckel, navigera till Dashboard -> Settings -> Integrations. Se till att ni inte använder en Secret API key, eftersom den inte är avsedd att användas i frontend-kod. Detta visas på raderna 29 och 30 i det kompletta exemplet.
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});Uppdatera er Content Security Policy (CSP)
Om er webbplats anger en Content Security Policy, lägg till domänerna nedan i motsvarande CSP-direktiv. Denna policy gäller både Checkout och Hello — Zonos-snippetet laddar skript, stilmallar, typsnitt, bilder och gör nätverksförfrågningar, så om någon av dessa resurser blockeras bryts Checkout-flödet eller Hello-visningen. Listan style-src gäller även style-src-elem.
Obs: Hoppa över detta steg om er webbplats inte skickar en CSP-header. Endast handlare som tillämpar en anpassad CSP på sina sidor behöver uppdatera den.
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.comKonfigurera Hello
Hello krävs när ni använder Checkout.
Hello ansvarar för att identifiera besökarens plats, språk och valuta samt visa lämplig information för dem. Ni kan konfigurera alla Hello settings i Dashboard eller i Zonos JS-skriptet. Om ni redan har konfigurerat Hello i Dashboard laddar skriptet dessa inställningar och använder dem. Om ni anger några värden i egenskapen helloSettings i funktionen Zonos.init använder skriptet istället dessa värden som visas nedan.
Konfigurera valutakonvertering i Hello i JS-skriptet
Hello använder CSS-selektorer för att identifiera element på er webbplats som visar valutainformation. Skicka dessa selektorer till egenskapen helloSettings.currencyElementSelector i funktionen Zonos.init så att Hello kan identifiera och visa den korrekta valutan för den internationella shopparen.
Ni kan använda vilken giltig CSS-selektor som helst här, till exempel #price, .price för att välja flera olika element. Detta visas på raderna 23 och 24 i det kompletta exemplet.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: ".price", // Replace with your actual selector }, // ... other fields});Öppna Hello automatiskt vid sidladdning
Som standard öppnas Hello endast när besökaren klickar på flaggknappen. Om ni vill öppna Hello automatiskt när sidan laddas kan ni anropa funktionen Zonos.openHelloDialog() när Zonos-skriptet har laddats. Detta visas på raderna 25 och 26 i det kompletta exemplet.
Zonos.init({ // ... other fields : { : { .(); }, },});Konfigurera landvisningsregler i Dashboard
Styr vilka köparländer som ser Hello och vilka länder som visas i landväljardropdownen från Dashboard. Navigera till Dashboard -> Settings -> Hello och hitta avsnittet Country display rules.
Widget-synlighet
Styr vilka köparländer som ser Hello-widgeten. Välj en av basreglerna och använd sedan listorna Always show och Never show för att åsidosätta specifika länder.
- All countries - Alla länder som Hello stöder.
- Only shippable countries - Länder ni skickar till enligt era fraktinställningar.
- Always show - Länder som alltid visas, även om basregeln utesluter dem.
- Never show - Länder som aldrig visas, även om basregeln inkluderar dem.

Landväljare
Styr vilka länder som visas i Hello-landväljardropdownen, med samma basregler plus åsidosättningar för Always show och Never show.

Konfigurera Checkout
Checkout ansvarar för att låta kunden ange sina frakt- och faktureringsuppgifter, beräkna landed cost, inkassera betalning och slutföra beställningen.
Checkout delar kontextuell data med Hello, till exempel besökarens plats, språk och valuta. Detta säkerställer att kundens upplevelse är konsekvent genom hela shoppingprocessen.
Ni kan konfigurera alla Checkout-inställningar både i Dashboard och i Zonos JS-skriptet. Om ni redan har konfigurerat Checkout i Dashboard laddar skriptet dessa inställningar och använder dem. Om ni anger några värden i egenskapen checkoutSettings i funktionen Zonos.init använder skriptet istället dessa värden.
Konfigurera knappen 'place order' i JS-skriptet
Zonos JS-skriptet identifierar automatiskt internationella shoppare och dirigerar dem till Checkout-flödet. Ni behöver dock konfigurera knappen 'place order' på er plattform så att Checkout öppnas när den klickas. Detta görs genom att skicka en CSS-selektor till egenskapen checkoutSettings.placeOrderButtonSelector i funktionen Zonos.init.
Om ni har flera knappar som kan användas för att lägga en beställning, se till att skicka in en selektor för varje knapp. Till exempel #placeOrder, .place-order.
Detta visas på rad 21 i det kompletta exemplet.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: "#placeOrder", // Replace with your actual selector(s) },});Skapa varukorgsdetaljer säkert på serversidan
För att visa varukorgsdetaljerna för kunden behöver ni skapa en serversidefunktion som anropar Zonos API för att skapa en varukorg och sedan skicka tillbaka det varukorgs-ID:t till er frontend. Detta säkerställer att varukorgsdetaljer inte exponeras för kunden på ett sätt som kan manipuleras.
Ert backend-API-anrop använder en hemlig GraphQL-autentiseringstoken, som skiljer sig från den offentliga token ni använder för att autentisera Zonos JS-skriptet. Denna token kan hämtas i Dashboard -> Settings -> Integrations. Den hemliga token måste skickas som en header i ert API-anrop.
Mutationen cartCreate accepterar en lista med artiklar, som bör formateras enligt varukorgsartikelschemat.
// 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..; }Vi rekommenderar att ni skapar en API-endpoint på er serversida och sedan anropar den endpointen från er frontend JS-integration, vilket beskrivs i nästa steg.
Skicka varukorgs-ID till Checkout via frontend
När ni har skapat en varukorg på er serversida behöver ni skicka varukorgs-ID:t till Zonos JS-skriptet. Detta kan göras med callback-funktionen createCartId som är en del av funktionen Zonos.init. Checkout hämtar sedan säkert varukorgsdetaljerna från Zonos när den öppnas, vilket förhindrar manipulation av varukorgen. Se kodexemplet nedan.
Värdet för createCartId kan inte vara ett statiskt värde; det måste vara en funktion.
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 }, },});(Valfritt) Visa ett meddelande under Order total
Om ni behöver visa ett kort, dynamiskt meddelande i Checkout — till exempel en regulatorisk upplysning när en specifik produkt finns i varukorgen — kan ni returnera en customMessage-array från callback-funktionen createCartId. Varje post i arrayen renderas på en egen rad i ett enda informationsbanner direkt under Order total.
Markdown-länksyntax — [link label] följt av (https://example.com) — renderas som en ankartagg, så shoppare kan klicka vidare. Vanliga https://-URL:er i texten länkas också automatiskt. Allt annat renderas som vanlig text, så HTML i strängarna escapes snarare än att köras.
Endast ett banner visas per Checkout, oavsett hur många rader ni skickar in.
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).", ], }; }, },});Obs: Meddelandetexten renderas som vanlig text — HTML-taggar i strängarna escapes, så endast Markdown-länksyntaxen tolkas. Bestäm om ni ska inkludera
customMessagepå serversidan baserat på varukorgens innehåll så att bannern bara visas när den är relevant.
(Valfritt) Utlös Zonos checkout programmatiskt
Om ni har anpassad logik och behöver utlösa Zonos checkout programmatiskt kan ni använda funktionen Zonos.triggerCheckoutInternational() för att öppna Zonos checkout-fönstret efter att Zonos har initierats. Detta anropar callback-funktionen createCartId som definierats i Zonos.init ovan och öppnar Zonos checkout-fönstret.
// 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(); }});(Valfritt) Selektorn Always trigger Zonos checkout
Om ni vill separera checkout-processen för inhemska och internationella shoppare kan ni lägga till en International checkout-knapp på er webbplats. Istället för att manuellt utlösa Zonos Checkout med Zonos.triggerCheckoutInternational kan ni konfigurera Zonos.init med lämplig selektor. Selektorn är inaktiverad tills Zonos är initierat; när knappen klickas utlöses Zonos checkout automatiskt. Detta anropar callback-funktionen createCartId som definierats i Zonos.init och öppnar Zonos checkout-fönstret.
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 },});(Valfritt) Spåra checkout-flödet med GA4 eller Facebook Pixel
Zonos Checkout kan vidarebefordra hela checkout-flödet till era befintliga analysverktyg. För varje steg skickar Zonos:
- Det ursprungliga
zonos-checkout-...-eventet till GA4 (viagtag('event', ...)) och till Meta som ett anpassat event (viafbq('trackCustom', ...)). - Motsvarande standardevent till Meta när ett sådant finns —
InitiateCheckout,AddPaymentInfoochPurchase— så att Metas inbyggda optimering och konverteringsrapportering fungerar direkt.
Hur eventen når era leverantörer beror på hur Checkout renderas på er webbplats. Välj den väg som matchar er integration.
Nativ integration (Checkout renderas direkt på er webbplats)
När det anpassade elementet <zonos-checkout> är monterat på er egen sida (standard för Zonos JS-skriptintegrationen som beskrivs ovan) finns sidans egna window.gtag och window.fbq redan tillgängliga. Zonos anropar dem direkt — inget relä eller pixel-ID-överlämning krävs.
Konfiguration:
- Se till att er sida redan har GA4-bastaggen och/eller Meta Pixel-baskoden inladdad (på samma sätt som ni spårar vilken annan sida som helst på er webbplats).
- Aktivera de leverantörer ni vill använda i Zonos Dashboard under Checkout settings → Tracking (Google Analytics, Facebook Pixel, eller båda).
Det är allt. Inget reläskript, ingen customHTML, inga extra ID:n att skicka med — Zonos identifierar gtag/fbq på sidan och skickar events direkt.
Iframe-integration (äldre Checkout-iframe på iglobalstores.com)
När Checkout är värd i en iframe på en annan ursprungsdomän kan den inte nå sidans gtag/fbq direkt. Zonos publicerar ett litet reläskript — analyticsRelayOnInit.js — som lyssnar efter postMessage-events från Checkout-iframen och vidarebefordrar dem till de leverantörer ni har på er sida. Ett enda relä hanterar både GA4 och Facebook Pixel samtidigt.
Konfiguration:
- Aktivera de leverantörer ni vill använda i Zonos Dashboard under Checkout settings → Tracking.
- Lägg till GA4-bastaggen och/eller Meta Pixel-baskoden i
<head>på sidan som är värd för Checkout-iframen. - Lägg till reläskriptet efter leverantörstaggarna:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- Skicka med motsvarande ID:n via er Checkout-
customHTMLså att reläet vet vilken egenskap/pixel det ska matchas mot:
window.Zonos.googleAnalyticId = "G-XXXXXXXXXX"; window.Zonos.facebookPixelId = "YOUR_PIXEL_ID";För steg-för-steg-instruktioner för iframe, en fullständig referens över eventen (inklusive mappningen av purchase/Purchase-nyttolasten) och tips för felsökning, se:
Synkronisera orderspårning och status till Dashboard
Implementera följande API-anrop och webhooks för att synkronisera ordrar mellan ert system och Zonos Dashboard:
Obligatoriska mutationer
| Mutation↕ | Description↕ |
|---|---|
orderUpdateAccountOrderNumber | Synkroniserar ert interna kontonummer med Dashboard. Dokumentation → |
orderAddTrackingNumber | Krävs endast om ni inte skriver ut fraktsedlar i Dashboard. Säkerställer att spårningen visas i Dashboard så att Zonos kan garantera era landed cost-beräkningar. Dokumentation → |
Obligatoriska webhooks
| Webhook↕ | Description↕ |
|---|---|
ORDER_CREATED | Krävs för att skicka Checkout-ordrar till er interna plattform. Dokumentation → |
ORDER_STATUS_CHANGED | Håller ert system synkroniserat med Zonos när orderstatusar ändras (t.ex. levererad, avbruten). Dokumentation → |
Testa er integration
Innan ni går live med er Checkout-integration är det viktigt att noggrant testa alla delar av integrationen för att säkerställa en smidig kundupplevelse. Detta inkluderar att testa checkout-flödet, betalningshanteringen, orderskapandet och webhook-funktionaliteten.
Följ vår testguide för att verifiera att er integration fungerar korrekt och för att identifiera och åtgärda eventuella problem innan lansering i produktion.
Vanliga frågor
Nedan finns några vanliga frågor om integrationsprocessen.
Hur hanterar Zonos orderbekräftelse?
Konfigurera efterköpsupplevelsen i Dashboard -> Settings -> Checkout settings under Success page type. Tre alternativ finns tillgängliga:
- Show Zonos success page (standard, rekommenderas) — Zonos visar en inbyggd tacksida efter att beställningen har lagts. Sidan visas alltid, även om ordern misslyckas med att importeras till ert system, så att kunden alltid får en bekräftelse.
- Redirect to a success page — Zonos väntar på en kort "Order complete"-skärm tills ordern har skapats och omdirigerar sedan till er konfigurerade success-URL med
zOrderNumber(ochorderIdför äldre varukorgar) tillagt som frågeparametrar. - Close the checkout modal — Zonos stänger sin modal så snart betalningen har inkasserats. Om ni även har konfigurerat en success-URL omdirigerar Zonos till den URL:en omedelbart efter att Stripe har tagit emot betalningen — utan att vänta på att ordern skapas — och lägger till
zonosCheckoutSessionIdsom frågeparameter. Använd det här alternativet när ni vill ha snabbast möjliga överlämning tillbaka till er egen success-sida.
Slå upp ordern från zonosCheckoutSessionId
När ni använder Close the checkout modal med en omdirigerings-URL kan det ta några sekunder innan ordern kopplas till checkout-sessionen efter omdirigeringen. Läs zonosCheckoutSessionId från URL:en och fråga checkoutSession GraphQL-frågan från er server med er hemliga autentiseringstoken tills ordern är klar. Anropa aldrig detta från webbläsaren — den hemliga autentiseringstoken måste stanna på serversidan.
query getCheckoutSession($id: String!) { checkoutSession(id ) order idSkicka frågan till https://api.zonos.com/graphql med er hemliga autentiseringstoken från Dashboard -> Settings -> Integrations som skickas som credentialToken-headern i förfrågan.
Kan jag bli notifierad när en order skapas?
Ja. Om ni vill få notifieringar när en order skapas kan ni, under avsnittet Email i Checkout settings i Dashboard, ange e-postadressen till de teammedlemmar som ska notifieras när en order skapas, skickas eller avbryts.
Anpassad integration
Bygg en komplett Checkout-integration i er anpassade webbplats.