Integrations-tjekliste
Følg denne omfattende tjekliste for at opsætte din Zonos Dashboard-konto og integrere Zonos Checkout i dit brugerdefinerede site eller platform.
Opret en Zonos-konto
For at komme i gang skal du kontakte vores salgsteam for at oprette en konto og underskrive en aftale. Når en aftale er underskrevet, modtager du to mikroindskud på din konto, som skal verificeres.
Send mikroindskudsbeløbene pr. e-mail til accounting@zonos.com med dit Dashboard store ID (CC din salgsrepræsentant).
Når de er verificeret, vises dine bankoplysninger i Dashboard -> Settings -> Billing.
Konfigurer Dashboard- og Checkout-indstillinger
Efter oprettelse af din Zonos-konto skal du konfigurere indstillinger i Dashboard, så Checkout fungerer korrekt med din butik. Dette afsnit dækker alle væsentlige Dashboard-konfigurationer.
Opsæt udbetalinger
Tilknyt en bankkonto for at modtage rettidige udbetalinger fra Checkout. Udbetalinger behandles dagligt med 2 dages forsinkelse fra den indfangede betaling. Følg disse trin:
- Gå til Dashboard -> Settings -> Checkout settings .
- Klik Add bank account
- Du sendes til en Stripe-portal for at fuldføre opsætning og angive følgende:
- Bankkontooplysninger.
- Virksomhedens EIN.
- Social Security Number for en virksomhedsejer med 25 % ejerandel. Se Stripes dokumentation for flere detaljer om, hvorfor dette kræves.
Note: Hvis du skal opdatere din udbetalingsplan, skal du kontakte support@zonos.com
Opsæt tilladte domæner
Zonos JS-scriptet kræver en liste over tilladte domæner af sikkerhedshensyn. Det forhindrer uautoriserede sites i at indlæse scriptet og sikrer, at det kun kører på dine godkendte domæner. Uden denne konfiguration returnerer scriptet tilladelsesfejl.
Sådan opsætter du det:
- Gå til Dashboard -> Settings -> Checkout settings
- Under URLs skal du tilføje dit fulde domæne og eventuelle subdomæner, hvor Checkout bruges. Hvis dit domæne f.eks. er
example.com, skal du tilføjeexample.comogtest.example.com.
Tilpas branding-indstillinger
Konfigurer branding-indstillinger i Dashboard, så de matcher din butiks udseende.
Følg disse trin:
- Gå til Dashboard -> Settings -> Checkout settings -> Branding
- Konfigurer følgende:
- Logo.
- Brand- og accentfarve.
- Theme, Style og Font.
Se vores dokumentation for mere om branding-indstillinger.
Tilslut en forsendelsestransportør
For at give forsendelsestilbud ved Checkout skal du tilslutte en transportør til din Zonos-konto. Det gør, at du kan aktivere specifikke servicelevels ved Checkout.
Følg disse trin for at tilslutte en transportør:
- Gå til Dashboard -> Settings -> Shipping -> Rates
- Klik Add carrier
- Følg transportørens opsætningsinstruktioner.
Se vores dokumentation for flere detaljer om tilslutning af transportørkonti.
Opsæt forsendelseszoner
Forsendelseszoner gør det muligt at konfigurere, hvilke transportører og servicelevels der er tilgængelige for forskellige regioner.
Følg disse trin for at opsætte forsendelseszoner:
- Gå til Dashboard -> Settings -> Shipping -> Locations
- Klik New zone
- Angiv et zonenavn og vælg de lande, du vil sende til.
- Vælg den transportør og det servicelevel, du vil tilbyde.
Se vores documentation for flere detaljer om forsendelseszoner.
Opsæt fallback for oprindelsesland og HS-kode
Oprindelsesland og HS-kode bruges til at beregne præcis told og skat.
Hvis du ikke angiver et specifikt oprindelsesland eller en HS-kode, bruger vi fallback-værdierne opsat i Dashboard.
Sådan angiver du fallback for oprindelsesland og HS-kode:
- Gå til Dashboard -> Settings -> Shipping -> Catalog.
- For oprindelsesland skal du vælge det land, hvor størstedelen af dine produkter fremstilles.
- For HS-koden skal du indtaste HS-koden for dit mest almindelige produkt. Hvis du ikke har en HS-kode, skal du gå til Classify i Dashboard og indtaste produktnavn og -beskrivelse for at generere en præcis HS-kode.
Installer Zonos JS-snippet
Zonos JS-snippet er en client-side JavaScript-integration, der aktiverer global Checkout på dit site. Det fungerer som bro mellem din e-handelsplatform og Zonos-tjenester og håndterer:
- Checkout-oplevelse: Viser Checkout-UI og behandler betalinger.
- Lokationstjenester: Registrerer besøgendes placering og håndterer valutakonvertering.
- Kurvintegration: Forbinder med dit eksisterende kurv- og ordresystem.
- Sikkerhed: Validerer domæner og autentificerer API-anmodninger.
Snippetet indlæses asynkront for ikke at påvirke dit sites ydeevne. Det initialiseres med din butiks API-legitimationsoplysninger og håndterer alle client-side interaktioner sikkert. Implementeringen er designet til at være uindtrængende og kræver minimale ændringer i dit eksisterende Checkout-flow.
Nedenfor er et komplet eksempel med scriptindlæsning, initialisering og eventhåndtering, du kan bruge som reference ved integration af 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); } })();Note: Erstat pladsholderværdierne (storeId, zonosApiKey, selektorer osv.) med dine faktiske værdier fra Zonos Dashboard.
Håndtering af browser-cache
Vi anbefaler at tilføje et tidsstempel eller anden unik identifikator til URL'en, så scriptet ikke caches af browseren. Det sikrer, at den nyeste version altid indlæses. Det vises på linje 10 i det komplette eksempel.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Autentificer Zonos JS-snippet
Når du har indlæst Zonos JS-scriptet, skal du autentificere det ved at sende en offentlig Zonos API-nøgle og store ID til Zonos.init. Den offentlige API-nøgle til Checkout er designet til at kunne publiceres og kan bruges sikkert i frontend-kode uden at afsløre følsom information.
For at finde dit store ID og API-nøgle skal du gå til Dashboard -> Settings -> Integrations. Brug ikke en Secret API key, da den ikke er beregnet til frontend-kode. Det vises på linje 29 og 30 i det komplette eksempel.
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});Opdater din Content Security Policy (CSP)
Hvis dit site sætter en Content Security Policy, skal du tilføje domænerne nedenfor til de tilsvarende CSP-direktiver. Politikken gælder både Checkout og Hello — Zonos-snippetet indlæser scripts, stylesheets, fonts, billeder og laver netværkskald, så blokering af disse ressourcer bryder Checkout-flowet eller Hello-visningen. style-src-listen gælder også for style-src-elem.
Note: Spring dette trin over, hvis dit site ikke sender en CSP-header. Kun merchants, der håndhæver en brugerdefineret CSP på deres sider, skal opdatere 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.comOpsæt Hello
Hello er påkrævet, når du bruger Checkout.
Hello er ansvarlig for at registrere besøgendes placering, sprog og valuta og vise den rette information. Du kan konfigurere alle Hello-indstillinger i Dashboard eller i Zonos JS-scriptet. Hvis du allerede har konfigureret Hello i Dashboard, indlæser scriptet disse indstillinger. Hvis du angiver værdier i helloSettings i Zonos.init, bruger scriptet dem i stedet som vist nedenfor.
Konfigurer valutakonvertering i Hello i JS-script
Hello bruger CSS-selektorer til at identificere elementer på dit site, der viser valutainformation. Send disse selektorer til helloSettings.currencyElementSelector i Zonos.init, så Hello kan registrere og vise den korrekte valuta for den internationale køber.
Du kan bruge enhver gyldig CSS-selektor her, f.eks. #price, .price for at vælge flere elementer. Det vises på linje 23 og 24 i det komplette eksempel.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: ".price", // Replace with your actual selector }, // ... other fields});Åbn Hello automatisk ved sideindlæsning
Som standard åbner Hello kun, når besøgenden klikker på flagknappen. Hvis du vil åbne Hello automatisk ved sideindlæsning, kan du kalde Zonos.openHelloDialog(), når Zonos-scriptet er indlæst. Det vises på linje 25 og 26 i det komplette eksempel.
Zonos.init({ // ... other fields helloSettings: { // ... other hello settings onInitSuccess: { .(); }, },});Konfigurer regler for landevisning i Dashboard
Styr hvilke køberlande der ser Hello, og hvilke lande der vises i landevælgeren fra Dashboard. Gå til Dashboard -> Settings -> Hello og find afsnittet Country display rules.
Widget-synlighed
Styr hvilke køberlande der ser Hello-widgetten. Vælg en af basisreglerne, og brug listerne Always show og Never show til at tilsidesætte specifikke lande.
- All countries — Alle lande, Hello understøtter.
- Only shippable countries — Lande, du sender til fra dine forsendelsesindstillinger.
- Always show — Lande, der altid vises, selv om basisreglen udelukker dem.
- Never show — Lande, der aldrig vises, selv om basisreglen inkluderer dem.

Landevælger
Styr hvilke lande der vises i Hello-landevælgeren med samme basisregler plus Always show og Never show-tilsidesættelser.

Opsæt Checkout
Checkout giver kunden mulighed for at indtaste forsendelses- og faktureringsoplysninger, beregne Landed Cost, opkræve betaling og fuldføre ordren.
Checkout deler kontekstdata med Hello, f.eks. besøgendes placering, sprog og valuta. Det sikrer en konsistent kundeoplevelse gennem hele købsprocessen.
Du kan konfigurere alle Checkout-indstillinger i både Dashboard og Zonos JS-scriptet. Hvis du allerede har konfigureret Checkout i Dashboard, indlæser scriptet disse indstillinger. Hvis du angiver værdier i checkoutSettings i Zonos.init, bruger scriptet dem i stedet.
Konfigurer „place order“-knappen i JS-script
Zonos JS-scriptet genkender automatisk internationale købere og sender dem til Checkout-flowet. Du skal dog konfigurere „place order“-knappen på din platform til at åbne Checkout ved klik. Det gøres ved at sende en CSS-selektor til checkoutSettings.placeOrderButtonSelector i Zonos.init.
Hvis du har flere knapper til at afgive ordre, skal du sende en selektor for hver knap, f.eks. #placeOrder, .place-order.
Det vises på linje 21 i det komplette eksempel.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: "#placeOrder", // Replace with your actual selector(s) },});Opret kurvdetaljer sikkert på serversiden
For at vise kurvdetaljer for kunden skal du oprette en serverside-funktion, der kalder Zonos API for at oprette en kurv og returnerer kurv-ID til frontend. Det sikrer, at kurvdetaljer ikke eksponeres for kunden på en måde, der kan manipuleres.
Dit backend API-kald bruger et hemmeligt GraphQL credential token, som er forskelligt fra det offentlige token til Zonos JS-scriptet. Tokenet findes i Dashboard -> Settings -> Integrations. Det hemmelige token skal sendes som header i API-kaldet.
Mutationen cartCreate accepterer en liste af varer formateret efter cart item schema.
// 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 anbefaler at oprette et API-endpoint på serversiden og kalde det fra din frontend JS-integration, som beskrives i næste trin.
Send kurv-ID til Checkout via frontend
Når du har oprettet en kurv på serversiden, skal du sende kurv-ID til Zonos JS-scriptet via createCartId-callback i Zonos.init. Checkout henter derefter kurvdetaljer sikkert fra Zonos ved åbning og forhindrer manipulation. Se kodeeksemplet nedenfor.
Værdien af createCartId kan ikke være statisk — den skal være 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 }, },});(Valgfrit) Vis en meddelelse under Order total
Hvis du skal vise en kort, dynamisk meddelelse i Checkout — f.eks. en regulatorisk oplysning, når et specifikt produkt er i kurven — kan du returnere et customMessage-array fra createCartId-callback. Hver post vises på sin egen linje i et info-banner lige under Order total.
Markdown-link-syntaks — [link label] efterfulgt af (https://example.com) — gengives som et anchor-tag, så købere kan klikke. Almindelige https://-URL'er i teksten auto-linkes også. Alt andet gengives som almindelig tekst, så HTML i strengene escapes i stedet for at køres.
Kun ét banner vises pr. Checkout, uanset hvor mange linjer du sender.
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).", ], }; }, },});Note: Meddelelsesteksten gengives som almindelig tekst — HTML-tags i strengene escapes, så kun Markdown-link-syntaks fortolkes. Beslut serverside, om
customMessageskal inkluderes baseret på kurvindhold, så banneret kun vises, når det er relevant.
(Valgfrit) Udløs Zonos Checkout programmatisk
Hvis du har brugerdefineret logik og skal udløse Zonos Checkout programmatisk, kan du bruge Zonos.triggerCheckoutInternational() til at åbne Zonos Checkout-vinduet efter initialisering. Det kalder createCartId-callback defineret i Zonos.init ovenfor og åbner Checkout-vinduet.
// 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(); }});(Valgfrit) Selektor der altid udløser Zonos Checkout
Hvis du vil adskille Checkout for indenlandske og internationale købere, kan du tilføje en „International Checkout“-knap på dit site. I stedet for manuelt at udløse Zonos Checkout med Zonos.triggerCheckoutInternational kan du konfigurere Zonos.init med den rette selektor. Selektoren er deaktiveret, indtil Zonos er initialiseret; ved klik udløses Checkout automatisk via createCartId og åbner Checkout-vinduet.
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 },});(Valgfrit) Spor Checkout-tragten med GA4 eller Facebook Pixel
Zonos Checkout kan videresende hele Checkout-tragten til dine eksisterende analytics-værktøjer. For hvert trin udsender Zonos:
- Det originale
zonos-checkout-...-event til GA4 (viagtag('event', ...)) og til Meta som custom event (viafbq('trackCustom', ...)). - Det matchende standardevent til Meta, når det findes —
InitiateCheckout,AddPaymentInfoogPurchase— så Metas indbyggede optimering og konverteringsrapportering virker med det samme.
Hvordan events når dine udbydere, afhænger af, hvordan Checkout gengives på dit site. Vælg den sti, der matcher din integration.
Native integration (Checkout gengives direkte på dit site)
Når <zonos-checkout> custom element monteres på din egen side (standard for Zonos JS-script-integrationen ovenfor), er sidens egne window.gtag og window.fbq allerede tilgængelige. Zonos kalder dem direkte — ingen relay eller pixel ID-overdragelse er nødvendig.
Opsætning:
- Sørg for, at siden allerede har GA4 base tag og/eller Meta Pixel base code indlæst (som for enhver anden side på dit site).
- Aktivér de udbydere, du vil bruge, i Zonos Dashboard under Checkout settings → Tracking (Google Analytics, Facebook Pixel eller begge).
Det er det. Ingen relay-script, ingen customHTML, ingen ekstra ID'er at sende — Zonos registrerer gtag / fbq på siden og udløser events direkte.
Iframe-integration (legacy Checkout iframe på iglobalstores.com)
Når Checkout hostes i en iframe på et andet origin, kan den ikke nå sidens gtag / fbq direkte. Zonos udgiver et lille relay-script — analyticsRelayOnInit.js — der lytter efter postMessage-events fra Checkout-iframe og videresender dem til de udbydere, du har på siden. Én relay håndterer både GA4 og Facebook Pixel samtidig.
Opsætning:
- Aktivér de udbydere, du vil bruge, i Zonos Dashboard under Checkout settings → Tracking.
- Tilføj GA4 base tag og/eller Meta Pixel base code til
<head>på siden, der hoster Checkout-iframe. - Tilføj relay-scriptet efter provider-tags:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- Send de tilsvarende ID'er via Checkout
customHTML, så relay'et ved, hvilken property/pixel der skal udløses mod:
window.Zonos.googleAnalyticId = "G-XXXXXXXXXX"; window.Zonos.facebookPixelId = "YOUR_PIXEL_ID";For trin-for-trin iframe-instruktioner, den fulde event-reference (inkl. purchase / Purchase payload-mapping) og debugging-tips, se:
Synkroniser ordresporing og status til Dashboard
For at synkronisere ordrer mellem dit system og Zonos Dashboard skal du implementere disse API-kald og webhooks:
Påkrævede mutationer
| Mutation↕ | Beskrivelse↕ |
|---|---|
orderUpdateAccountOrderNumber | Synkroniserer dit native kontonummer med Dashboard. Docs → |
orderAddTrackingNumber | Kun påkrævet, hvis du ikke udskriver labels i Dashboard. Sikrer, at tracking vises i Dashboard, så Zonos kan garantere dine Landed Cost-beregninger. Docs → |
Påkrævede webhooks
Test din integration
Før du går live med din Checkout-integration, er det vigtigt grundigt at teste alle aspekter for en smidig kundeoplevelse — Checkout-flow, betalingsbehandling, ordreoprettelse og webhook-funktionalitet.
Følg vores testguide for at verificere, at integrationen virker korrekt, og rette eventuelle problemer før produktion.
Almindelige spørgsmål
Nedenfor er nogle almindelige spørgsmål om integrationsprocessen.
Hvordan håndterer Zonos ordrebekræftelse?
Konfigurer efter-købsoplevelsen i Dashboard -> Settings -> Checkout settings under Success page type. Tre muligheder er tilgængelige:
- Show Zonos success page (standard, anbefalet) — Zonos viser en indbygget tak-side efter ordren. Siden vises altid, selv hvis ordren fejler ved import til dit system, så køberen altid får en bekræftelse.
- Redirect to a success page — Zonos venter på en kort „Order complete“-skærm, indtil ordren er oprettet, og omdirigerer derefter til din konfigurerede success-URL med
zOrderNumber(ogorderIdfor legacy-kurve) som query-parametre. - Close the Checkout modal — Zonos lukker sin modal, når betalingen er indfanget. Hvis du også konfigurerer en success-URL, omdirigerer Zonos med det samme efter Stripe har opkrævet betaling — uden at vente på ordreoprettelse — og tilføjer
zonosCheckoutSessionIdsom query-param. Brug dette, når du vil have hurtigst mulig overdragelse til din egen success-side.
Slå ordren op via zonosCheckoutSessionId
Når du bruger Close the Checkout modal med redirect-URL, kan det tage et par sekunder, før ordren knyttes til Checkout-sessionen efter redirect. Læs zonosCheckoutSessionId fra URL'en og poll checkoutSession GraphQL-query fra din server med dit hemmelige credential token, indtil ordren er klar. Kald aldrig dette fra browseren — det hemmelige credential token skal forblive på serversiden.
query getCheckoutSession($id: String!) { checkoutSession(id: $id) { order idSend query til https://api.zonos.com/graphql med dit hemmelige credential token fra Dashboard -> Settings -> Integrations som credentialToken request header.
Kan jeg få besked, når en ordre oprettes?
Ja. Hvis du vil modtage notifikationer ved ordreoprettelse, kan du under Email i Checkout settings i Dashboard angive e-mailadresser for teammedlemmer, der skal underrettes ved oprettelse, afsendelse eller annullering af ordre.
Brugerdefineret integration
Byg en end-to-end Checkout-integration ind i dit brugerdefinerede site.