Følg denne omfattende tjekliste for at opsætte din Zonos Dashboard-konto og integrere Zonos Checkout i dit brugerdefinerede site eller platform.
1
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.
2
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.
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:
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.
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øje example.com og test.example.com.
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.
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.
3
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.
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.
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.
1Zonos.init({
2// ... other fields
3zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)
4storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)
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.
1cdn.jsdelivr.net/npm/@zonos
2cdnjs.cloudflare.com/ajax/libs/zonos-elements
3unpkg.com/@zonos/elements
4js.zonos.com
5*.js.zonos.com
6assets.zonos.com
7zonos-store-assets.s3.amazonaws.com
8js.stripe.com
9a.stripecdn.com
10b.stripecdn.com
11c.stripecdn.com
12checkout.stripe.com
13f.stripecdn.com
14hcaptcha.com
15hooks.stripe.com
16m.stripe.com
17m.stripe.network
18pay.stripe.com
19payments.stripe.com
20q.stripe.com
21r.stripe.com
4
Opsæ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.
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.
1Zonos.init({
2// ... other fields
3helloSettings: {
4currencyElementSelector: '.price', // Replace with your actual selector
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.
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.
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.
Styr hvilke lande der vises i Hello-landevælgeren med samme basisregler plus Always show og Never show-tilsidesættelser.
Forældede JS-indstillinger
Egenskaberne showForCountries og showCountryList på helloSettings er forældede. Konfigurer regler for landevisning i Dashboard i stedet — værdier sat der indlæses automatisk af Zonos JS-scriptet.
5
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.
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.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
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.
1// Create new cart from serverside
2asyncfunctioncreateCart() {
3/**
4 * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate
5 * */
6const graphql = JSON.stringify({
7query: `
8mutation cartCreate($input: CartCreateInput!){
9 cartCreate(input: $input) {
10 id
11 adjustments {
12 amount
13 currencyCode
14 description
15 productId
16 sku
17 type
18 }
19 items {
20 id
21 name
22 amount
23 currencyCode
24 quantity
25 sku
26 description
27 metadata {
28 key
29 value
30 }
31 }
32 metadata {
33 key
34 value
35 }
36 }
37}`,
38variables: {
39/**
40 * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput
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.
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.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4createCartId: async () => {
5const response = awaitfetch(
6'https://api.merchant.com/api/get-zonos-cart',
7 {
8method: 'POST',
9headers: {
10'Content-Type': 'application/json',
11 },
12 },
13 );
14const json = await response.json();
15
16return {
17cartId: json.id,
18// Each item is rendered on a new line of the same info banner.
19// Markdown links `[text](url)` become `<a>` tags.
20customMessage: [
21'Some items in your cart are subject to California regulations.',
22'Please review the required notice [here](https://oag.ca.gov/prop65).',
23 ],
24 };
25 },
26 },
27});
Note: Meddelelsesteksten gengives som almindelig tekst — HTML-tags i strengene escapes, så kun Markdown-link-syntaks fortolkes. Beslut serverside, om customMessage skal inkluderes baseret på kurvindhold, så banneret kun vises, når det er relevant.
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.
1// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")
2const domesticCountry = 'US';
3document.querySelector('.country-select').addEventListener('change', e => {
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.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout
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 (via gtag('event', ...)) og til Meta som custom event (via fbq('trackCustom', ...)).
Det matchende standardevent til Meta, når det findes — InitiateCheckout, AddPaymentInfo og Purchase — 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.
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.
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.
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 →
Nødvendig for at sende Checkout-ordrer til din native platform. Docs →
ORDER_STATUS_CHANGED
Holder dit system synkroniseret med Zonos, når ordrestatus ændres (f.eks. fulfilled, canceled). Docs →
7
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.
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 (og orderId for 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 zonosCheckoutSessionId som query-param. Brug dette, når du vil have hurtigst mulig overdragelse til din egen success-side.
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.
1query getCheckoutSession($id: String!){
2 checkoutSession(id:$id) {
3 order
4 id
Send query til https://api.zonos.com/graphql med dit hemmelige credential token fra Dashboard -> Settings -> Integrations som credentialToken request header.
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
Brugerdefineret integration
Byg en end-to-end Checkout-integration ind i dit brugerdefinerede site.
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:
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:
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:
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:
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:
Se vores dokumentation 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:
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:
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);}})();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 fieldszonosApiKey: '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å forstyle-src-elem.cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comassets.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
helloSettingsiZonos.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.currencyElementSelectoriZonos.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, .pricefor at vælge flere elementer. Det vises på linje 23 og 24 i det komplette eksempel.Zonos.init({// ... other fieldshelloSettings: {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 fieldshelloSettings: {// ... other hello settingsonInitSuccess: {.();},},});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.
Landevælger
Styr hvilke lande der vises i Hello-landevælgeren med samme basisregler plus Always show og Never show-tilsidesættelser.
Egenskaberne
showForCountriesogshowCountryListpåhelloSettingser forældede. Konfigurer regler for landevisning i Dashboard i stedet — værdier sat der indlæses automatisk af Zonos JS-scriptet.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
checkoutSettingsiZonos.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.placeOrderButtonSelectoriZonos.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 fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#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
cartCreateaccepterer 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) {idadjustments {amountcurrencyCodedescriptionproductIdskutype}items {idnameamountcurrencyCodequantityskudescriptionmetadata {keyvalue}}metadata {keyvalue}}}`,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 iZonos.init. Checkout henter derefter kurvdetaljer sikkert fra Zonos ved åbning og forhindrer manipulation. Se kodeeksemplet nedenfor.Værdien af
createCartIdkan ikke være statisk — den skal være en funktion.Zonos.init({// ... other fieldscheckoutSettings: {// 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 fracreateCartId-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. Almindeligehttps://-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 fieldscheckoutSettings: {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).',],};},},});(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 kaldercreateCartId-callback defineret iZonos.initovenfor 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.triggerCheckoutInternationalkan du konfigurereZonos.initmed den rette selektor. Selektoren er deaktiveret, indtil Zonos er initialiseret; ved klik udløses Checkout automatisk viacreateCartIdog åbner Checkout-vinduet.Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsalwaysTriggerInternationalCheckoutSelector: '#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:
zonos-checkout-...-event til GA4 (viagtag('event', ...)) og til Meta som custom event (viafbq('trackCustom', ...)).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 egnewindow.gtagogwindow.fbqallerede tilgængelige. Zonos kalder dem direkte — ingen relay eller pixel ID-overdragelse er nødvendig.Opsætning:
Det er det. Ingen relay-script, ingen
customHTML, ingen ekstra ID'er at sende — Zonos registrerergtag/fbqpå 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/fbqdirekte. 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:
<head>på siden, der hoster Checkout-iframe.asyncsrc="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">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/Purchasepayload-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
orderUpdateAccountOrderNumberorderAddTrackingNumberPåkrævede webhooks
ORDER_CREATEDORDER_STATUS_CHANGEDTest 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:
zOrderNumber(ogorderIdfor legacy-kurve) som query-parametre.zonosCheckoutSessionIdsom query-param. Brug dette, når du vil have hurtigst mulig overdragelse til din egen success-side.Slå ordren op via
zonosCheckoutSessionIdNå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
zonosCheckoutSessionIdfra URL'en og pollcheckoutSessionGraphQL-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) {orderidSend query til
https://api.zonos.com/graphqlmed dit hemmelige credential token fra Dashboard -> Settings -> Integrations somcredentialTokenrequest 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.
Var denne side nyttig?