Følg denne omfattende sjekklisten for å sette opp Zonos Dashboard-kontoen din og integrere Zonos Checkout på din tilpassede nettside eller plattform.
1
Opprett en Zonos-konto
For å komme i gang, vennligst kontakt salgsteamet vårt for å opprette en konto og signere en avtale. Når avtalen er signert, mottar du to mikroinnskudd på kontoen som må bekreftes.
Send disse mikroinnskuddsbeløpene per e-post til accounting@zonos.com med din Dashboard-butikkID (CC salgsrepresentanten din).
Når de er bekreftet, vil bankopplysningene dine vises i Dashboard -> Settings -> Billing.
2
Konfigurer Dashboard og Checkout-innstillinger
Etter å ha opprettet Zonos-kontoen din, må du konfigurere innstillinger i Dashboard for å sikre at Checkout fungerer riktig med butikken din. Dette avsnittet dekker alle essensielle Dashboard-konfigurasjoner.
Koble til en bankkonto for å motta rettidige utbetalinger fra Checkout. Utbetalinger behandles daglig med en forsinkelse på 2 dager fra betalingen er fanget opp. For å gjøre dette, vennligst følg disse trinnene:
Zonos JS-scriptet krever en liste over tillatte domener av sikkerhetshensyn. Dette forhindrer uautoriserte nettsteder fra å laste inn scriptet og sikrer at det bare kjøres på dine godkjente domener. Uten denne konfigurasjonen returnerer scriptet tillatelsesfeil.
Under URLs legger du til ditt fullstendige domene og eventuelle underdomener der Checkout skal brukes. For eksempel, hvis ditt domene er example.com, bør du legge til både example.com og test.example.com.
Landet for opprinnelse og HS-koden brukes til å beregne nøyaktig toll og skatter.
Hvis du ikke oppgir et spesifikt land for opprinnelse eller HS-kode, vil vi bruke standardinnstillingene som er satt opp i Dashboard.
For å angi dine fallback-verdier for land for opprinnelse og HS-kode:
Naviger til Dashboard -> Settings -> Shipping -> Catalog.
For landet for opprinnelse, velg landet der størstedelen av produktene dine produseres.
For HS-koden, skriv inn HS-koden for ditt vanligste produkt. Hvis du ikke har en HS-kode, naviger til Classify i Dashboard og skriv inn navn og beskrivelse på produktet ditt for å generere en nøyaktig HS-kode.
3
Installer Zonos JS-snippet
Zonos JS-snippet er en klient-side JavaScript-integrasjon som aktiverer global kassefunksjonalitet på nettstedet ditt. Det fungerer som broen mellom e-handelsplattformen din og Zonos-tjenester, og håndterer:
Checkout Experience: Gjengir kassebrukergrensesnittet og behandler betalinger.
Location Services: Oppdager besøkendes plassering og administrerer valutakonvertering.
Cart Integration: Kobler sammen med din eksisterende handlekurv og ordresystem.
Security: Validerer domener og autentiserer API-forespørsler.
Snippetet lastes asynkront for å forhindre påvirkning på nettstedets ytelse. Det initialiseres med API-legitimasjonen til butikken din og håndterer all sikker klient-side interaksjon. Implementasjonen er designet for å være ikke-påtrengende, og krever minimale endringer i eksisterende kasseflyten din.
Nedenfor er et komplett eksempel som inkluderer scriptlasting, initialisering og hendelseshåndtering for referanse ved integrasjon av Checkout.
Vi anbefaler å legge ved et tidsstempel eller annen unik identifikator til URL-adressen for å sikre at scriptet ikke mellomlagres av nettleseren. Dette sikrer at den siste versjonen av scriptet alltid lastes inn. Dette er vist på linje 10 i det komplette eksemplet.
Når du har lastet Zonos JS-scriptet, må du autentisere det ved å passere en offentlig Zonos API-nøkkel og butikk-ID til Zonos.init-funksjonen. API-nøkkelen som brukes til å autentisere Checkout, er designet for å være offentlig tilgjengelig, noe som betyr at den kan brukes sikkert i frontend-kode uten å eksponere sensitiv informasjon.
For å finne butikk-ID og API-nøkkelen din, naviger til Dashboard -> Settings -> Integrations. Sørg for at du ikke bruker en Secret API key, da den ikke er designet for bruk i frontend-kode. Dette er vist på linjene 29 og 30 i det komplette eksemplet.
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 nettstedet ditt angir en Content Security Policy, legger du til domenene nedenfor i de tilsvarende CSP-direktivene. Denne policyen gjelder både Checkout og Hello — Zonos-snippet laster inn skript, stilark, fonter, bilder og gjør nettverksforespørsler, så blokkering av noen av disse ressursene vil bryte Checkout-flyten eller Hello-visningen. Listen over style-src gjelder også for style-src-elem.
Merk: Hopp over dette trinnet hvis nettstedet ditt ikke sender en CSP-header. Bare selgere som håndhever en tilpasset CSP på sidene sine, trenger å oppdatere 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
Sett opp Hello
Hello er påkrevd når du bruker Checkout.
Hello er ansvarlig for å oppdage besøkendes plassering, språk og valuta, og vise passende informasjon til dem. Du kan konfigurere alle Hello settings i Dashboard eller i Zonos JS-scriptet. Hvis du allerede har konfigurert Hello i Dashboard, vil scriptet laste disse innstillingene og bruke dem. Hvis du angir noen verdier i egenskapen helloSettings til Zonos.init-funksjonen, vil scriptet bruke disse verdiene i stedet, som vist nedenfor.
Hello bruker CSS-selektorer for å identifisere elementer på nettstedet ditt som viser valutainformasjon. Overfør disse selektorene til egenskapen helloSettings.currencyElementSelector av Zonos.init-funksjonen slik at Hello kan oppdage og vise riktig valuta til den internasjonale kjøperen.
Du kan bruke enhver gyldig CSS-velger her, for eksempel #price, .price for å velge flere forskjellige elementer. Dette er vist på linjene 23 og 24 i det komplette eksemplet.
1Zonos.init({
2// ... other fields
3helloSettings: {
4currencyElementSelector: '.price', // Replace with your actual selector
Som standard åpnes Hello bare når besøkende klikker på flagg-knappen. Hvis du vil åpne Hello automatisk når siden lastes inn, kan du kalle Zonos.openHelloDialog()-funksjonen når Zonos-scriptet har lastet inn. Dette er vist på linjene 25 og 26 i det komplette eksemplet.
Kontroller hvilke kjøperland som ser Hello, og hvilke land som vises i rullegardinlisten med landvelger fra Dashboard. Naviger til Dashboard -> Settings -> Hello og finn Country display rules-delen.
Kontroller hvilke kjøperland som ser Hello-widgeten. Velg en av grunnreglene, og bruk deretter listene Always show og Never show for å overstyre spesifikke land.
All countries - Alle land som Hello støtter.
Only shippable countries - Land som du sender til fra fraktinnstillingene dine.
Always show - Land som alltid vises, selv om grunnregelen utelukker dem.
Never show - Land som aldri vises, selv om grunnregelen inkluderer dem.
Kontroller hvilke land som vises i Hello-landsvelgerens rullegardinkasse, ved å bruke de samme grunnreglene pluss overstyringer med Always show og Never show.
Deprecated JS options
Egenskapene showForCountries og showCountryList på helloSettings er foreldet. Konfigurer landvisningsregler i Dashboard i stedet — verdier satt der vil lastes inn automatisk av Zonos JS-scriptet.
5
Sett opp Checkout
Checkout er ansvarlig for å tillate kunden å angi frakt- og faktureringsinformasjon, beregne landingskostnad, samle inn betaling og fullføre bestillingen.
Checkout vil dele kontekstuelle data med Hello, for eksempel besøkendes plassering, språk og valuta. Dette sikrer at kundens opplevelse er konsistent på tvers av hele shoppingprosessen.
Du kan konfigurere alle Checkout-innstillinger både i Dashboard og i Zonos JS-scriptet. Hvis du allerede har konfigurert Checkout i Dashboard, vil scriptet laste disse innstillingene og bruke dem. Hvis du angir noen verdier i egenskapen checkoutSettings til Zonos.init-funksjonen, vil scriptet bruke disse verdiene i stedet.
Zonos JS-scriptet vil automatisk gjenkjenne internasjonale kjøpere og lede dem til Checkout-flyten. Du må imidlertid konfigurere 'plasser bestilling'-knappen på plattformen din for å åpne Checkout når den klikkes. Dette kan gjøres ved å sende en CSS-velger til checkoutSettings.placeOrderButtonSelector-egenskapen til Zonos.init-funksjonen.
Hvis du har flere knapper som kan brukes til å plassere en bestilling, sørg for å sende en velger for hver knapp. For eksempel #placeOrder, .place-order.
Dette er vist på linje 21 i det komplette eksemplet.
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
For å vise handlekurvdetaljene til kunden, må du opprette en serversidig funksjon som kaller Zonos API for å opprette en handlekurv, og deretter sende handlekurv-ID-en tilbake til frontend. Dette sikrer at handlekurvdetaljene ikke eksponeres for kunden på en måte som kan manipuleres.
API-anropet på backend-siden vil bruke en hemmelig GraphQL-legitimasjontoken, som er annerledes enn den offentlige tokenen du bruker for å autentisere Zonos JS-scriptet. Denne tokenen kan hentes inn i Dashboard -> Settings -> Integrations. Den hemmelige tokenen må sendes som en header i API-anropet ditt.
cartCreate-mutasjonen aksepterer en liste over elementer, som skal formateres i henhold til 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
Vi foreslår å opprette en API-endepunkt på serversiden og deretter kalle det endepunktet fra din frontend JS-integrasjon, som er detaljert i neste trinn.
Når du har opprettet en handlekurv på serversiden, må du overføre handlekurv-ID til Zonos JS-scriptet. Dette kan gjøres ved å bruke createCartId-tilbakekall som er del av Zonos.init-funksjonen. Checkout vil deretter sikkert hente handlekurvdetaljene fra Zonos når den åpnes, og forhindrer manipulering av handlekurven. Se kodeeksemplet nedenfor.
Verdien av createCartId kan ikke være en statisk verdi, den må være en funksjon.
Hvis du trenger å vise en kort, dynamisk melding inne i Checkout — for eksempel en lovpålagt avsløring når et spesifikt produkt er i handlekurven — kan du returnere en customMessage-matrise fra createCartId-tilbakekallet. Hver oppføring i matrisen gjengis på sin egen linje av ett enkelt informasjonsbanner direkte under Order total.
Markdown link-syntaks — [link label] etterfulgt av (https://example.com) — gjengis som en ankertag, slik at kjøpere kan klikke gjennom. Vanlig https://-URL-er i teksten blir også automatisk koblet. Alt annet gjengis som ren tekst, slik at HTML i strengene escapes i stedet for å bli kjørt.
Bare ett banner vises per Checkout, uansett hvor mange linjer du sender inn.
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});
Merk: Meldingsteksten gjengis som ren tekst — HTML-tagger i strengene escapes, så bare Markdown link-syntaksen tolkes. Avgjør om du skal inkludere customMessage på serversiden basert på handlekurvinnholdet slik at banneret bare vises når det er relevant.
Hvis du har tilpasset logikk og trenger å utløse Zonos checkout programmatisk, kan du bruke Zonos.triggerCheckoutInternational()-funksjonen for å åpne Zonos checkout-vinduet etter at Zonos er initialisert. Dette vil påkalle createCartId-tilbakekallet som er definert i Zonos.init ovenfor, og åpne Zonos 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 skille checkout-prosessen for innenlandske og internasjonale kjøpere, kan du legge til en International checkout-knapp på nettstedet ditt. I stedet for å manuelt utløse Zonos Checkout med Zonos.triggerCheckoutInternational, kan du konfigurere Zonos.init med den aktuelle velgeren. Velgeren blir deaktivert inntil Zonos er initialisert, når knappen klikkes, utløser den automatisk Zonos checkout. Dette vil påkalle createCartId-tilbakekallet som er definert i Zonos.init og åpne Zonos 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 kassetrakten til dine eksisterende analyseverktøy. For hvert trinn sender Zonos:
Den opprinnelige zonos-checkout-...-hendelsen til GA4 (via gtag('event', ...)) og til Meta som en tilpasset hendelse (via fbq('trackCustom', ...)).
Den samsvarende standard hendelsen til Meta når en eksisterer — InitiateCheckout, AddPaymentInfo og Purchase — slik at Metas innebygde optimisering og konverteringsrapportering fungerer direkte.
Hvordan hendelser kommer til leverandørene dine, avhenger av hvordan Checkout gjengis på nettstedet ditt. Velg banen som samsvarer med integrasjonen din.
Når det egendefinerte <zonos-checkout>-elementet monteres på din egen side (standarden for Zonos JS-skriptet som er beskrevet ovenfor), er sidens egen window.gtag og window.fbq allerede i omfang. Zonos kaller dem direkte — ingen relé eller piksel-ID-overføring er nødvendig.
Oppsett:
Sørg for at siden din allerede har GA4 base-merket og/eller Meta Pixel base-koden lastet inn (på samme måte som du ville spore enhver annen side på nettstedet ditt).
Aktiver leverandørene du vil ha i Zonos dashboard under Checkout settings → Tracking (Google Analytics, Facebook Pixel eller begge).
Det er alt. Ingen relé skript, ingen customHTML, ingen ekstra ID-er som skal sendes — Zonos oppdager gtag / fbq på siden og avfyrer hendelser direkte.
Når Checkout er vert i en iframe på en annen opprinnelse, kan den ikke nå siden din gtag / fbq direkte. Zonos publiserer et lite relé-skript — analyticsRelayOnInit.js — som lytter til postMessage-hendelser fra Checkout iframe og videresender dem til leverandørene du har på siden din. Et enkelt relé håndterer både GA4 og Facebook Pixel på samme tid.
Oppsett:
Aktiver leverandørene du vil ha i Zonos dashboard under Checkout settings → Tracking.
Legg til GA4 base-merket og/eller Meta Pixel base-koden i <head> på siden som er vert for Checkout iframe.
Synkroniserer ditt eget kontonummer med Dashboard. Docs →
orderAddTrackingNumber
Påkrevd bare hvis du ikke skriver ut etiketter i Dashboard. Sikrer at sporing vises i Dashboard slik at Zonos kan garantere dine landingskostnadsberegninger. Docs →
Nødvendig for å sende Checkout-bestillinger til den opprinnelige plattformen din. Docs →
ORDER_STATUS_CHANGED
Holder systemet ditt synkronisert med Zonos når ordrestatuser endres (f.eks. oppfylt, kansellert). Docs →
7
Test integrasjonen din
Før du går live med Checkout-integrasjonen din, er det viktig å grundig teste alle aspekter av integrasjonen for å sikre en jevn kundeopplevelse. Dette inkluderer testing av kasseflyten, betalingsbehandling, ordreopprettelse og webhook-funksjonalitet.
Følg vår testguide for å verifisere at integrasjonen din fungerer korrekt, og for å identifisere og fikse eventuelle problemer før lansering til produksjon.
Vanlige spørsmål
Nedenfor er noen vanlige spørsmål om integrasjonsprosessen.
Konfigurer opplevelsen etter kjøp i Dashboard -> Settings -> Checkout settings under Success page type. Tre alternativer er tilgjengelige:
Show Zonos success page (standard, anbefalt) — Zonos viser en innebygd takk-side etter at bestillingen er plassert. Siden vises alltid, selv om bestillingen ikke importeres til systemet ditt, slik at kjøperen alltid får en bekreftelse.
Redirect to a success page — Zonos venter på en kort «Ordre fullført»-skjerm til bestillingen er opprettet, og omdirigerer deretter til den konfigurerte suksess-URL-en din med zOrderNumber (og orderId for eldre handlekurver) lagt til som spørreparametere.
Close the checkout modal — Zonos lukker sin modal når betalingen hentes inn. Hvis du også konfigurerer en suksess-URL, omdirigerer Zonos til den URL-en umiddelbart etter at Stripe samler inn betalingen — uten å vente på at bestillingen skal opprettes — og legger til zonosCheckoutSessionId som en spørreparameter. Bruk dette alternativet når du vil ha den raskeste overføringen tilbake til din egen suksess-side.
Når du bruker Close the checkout modal med en omdirigerings-URL, kan det hende at bestillingen tar noen få sekunder å knytte seg til checkout-sesjonen etter omdirigeringen. Les zonosCheckoutSessionId fra URL-en og poll checkoutSession-GraphQL-spørringen fra serveren din ved hjelp av din hemmelige legitimasjontoken inntil bestillingen er klar. Kall aldri dette fra nettleseren — den hemmelige legitimasjontoken må holdes på serversiden.
1query getCheckoutSession($id: String!){
2 checkoutSession )
3 order
4 id
Send spørringen til https://api.zonos.com/graphql med din hemmelige legitimasjontoken fra Dashboard -> Settings -> Integrations sendt som credentialToken-forespørselshoder.
Ja. Hvis du vil motta varslinger når en ordre opprettes, i Dashboard under Email-delen av Checkout settings, kan du oppgi e-postadressen til teammedlemmene som bør varsles når en ordre opprettes, sendes eller kanselleres.
Egendefinert integrasjon
Egendefinert integrasjon
Bygg en end-to-end Checkout-integrasjon på din tilpassede nettside.
Integrasjonssjekkliste
Følg denne omfattende sjekklisten for å sette opp Zonos Dashboard-kontoen din og integrere Zonos Checkout på din tilpassede nettside eller plattform.
Opprett en Zonos-konto
For å komme i gang, vennligst kontakt salgsteamet vårt for å opprette en konto og signere en avtale. Når avtalen er signert, mottar du to mikroinnskudd på kontoen som må bekreftes.
Send disse mikroinnskuddsbeløpene per e-post til accounting@zonos.com med din Dashboard-butikkID (CC salgsrepresentanten din).
Når de er bekreftet, vil bankopplysningene dine vises i Dashboard -> Settings -> Billing.
Konfigurer Dashboard og Checkout-innstillinger
Etter å ha opprettet Zonos-kontoen din, må du konfigurere innstillinger i Dashboard for å sikre at Checkout fungerer riktig med butikken din. Dette avsnittet dekker alle essensielle Dashboard-konfigurasjoner.
Sett opp utbetalinger
Koble til en bankkonto for å motta rettidige utbetalinger fra Checkout. Utbetalinger behandles daglig med en forsinkelse på 2 dager fra betalingen er fanget opp. For å gjøre dette, vennligst følg disse trinnene:
Sett opp tillatte domener
Zonos JS-scriptet krever en liste over tillatte domener av sikkerhetshensyn. Dette forhindrer uautoriserte nettsteder fra å laste inn scriptet og sikrer at det bare kjøres på dine godkjente domener. Uten denne konfigurasjonen returnerer scriptet tillatelsesfeil.
For å sette dette opp:
example.com, bør du legge til bådeexample.comogtest.example.com.Tilpass merkevareinnstillinger
Konfigurer merkevareinnstillingene dine i Dashboard slik at de samsvarer med butikkens utseende og preg.
For å gjøre dette, vennligst følg disse trinnene:
For mer informasjon om merkevareinnstillinger, se vår dokumentasjon.
Koble til en fraktbærer
For å oppgi frakt under kassen, må du koble til en fraktbærer med Zonos-kontoen din. Dette lar deg aktivere spesifikke frakttjenestenivåer ved kassen.
For å koble til en fraktbærer, vennligst følg disse trinnene:
For mer informasjon om å koble til bærerkonto, se vår dokumentasjon.
Sett opp fraktsoner
Fraktsoner lar deg konfigurere hvilke fraktbærere og tjenestenivåer som er tilgjengelige for forskjellige regioner i verden.
For å sette opp fraktsoner, vennligst følg disse trinnene:
For mer informasjon om fraktsoner, se vår dokumentasjon.
Sett opp et fallback-land for opprinnelse og HS-kode
Landet for opprinnelse og HS-koden brukes til å beregne nøyaktig toll og skatter.
Hvis du ikke oppgir et spesifikt land for opprinnelse eller HS-kode, vil vi bruke standardinnstillingene som er satt opp i Dashboard.
For å angi dine fallback-verdier for land for opprinnelse og HS-kode:
Installer Zonos JS-snippet
Zonos JS-snippet er en klient-side JavaScript-integrasjon som aktiverer global kassefunksjonalitet på nettstedet ditt. Det fungerer som broen mellom e-handelsplattformen din og Zonos-tjenester, og håndterer:
Snippetet lastes asynkront for å forhindre påvirkning på nettstedets ytelse. Det initialiseres med API-legitimasjonen til butikken din og håndterer all sikker klient-side interaksjon. Implementasjonen er designet for å være ikke-påtrengende, og krever minimale endringer i eksisterende kasseflyten din.
Nedenfor er et komplett eksempel som inkluderer scriptlasting, initialisering og hendelseshåndtering for referanse ved integrasjon av 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.({: {: () => {{: ,};},: ,},: {: ,: {.();},},: ,: ,});});..(script);}})();Håndtering av nettlesermellomlagring
Vi anbefaler å legge ved et tidsstempel eller annen unik identifikator til URL-adressen for å sikre at scriptet ikke mellomlagres av nettleseren. Dette sikrer at den siste versjonen av scriptet alltid lastes inn. Dette er vist på linje 10 i det komplette eksemplet.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Autentiser Zonos JS-snippet
Når du har lastet Zonos JS-scriptet, må du autentisere det ved å passere en offentlig Zonos API-nøkkel og butikk-ID til
Zonos.init-funksjonen. API-nøkkelen som brukes til å autentisere Checkout, er designet for å være offentlig tilgjengelig, noe som betyr at den kan brukes sikkert i frontend-kode uten å eksponere sensitiv informasjon.For å finne butikk-ID og API-nøkkelen din, naviger til Dashboard -> Settings -> Integrations. Sørg for at du ikke bruker en Secret API key, da den ikke er designet for bruk i frontend-kode. Dette er vist på linjene 29 og 30 i det komplette eksemplet.
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});Oppdater Content Security Policy (CSP)
Hvis nettstedet ditt angir en Content Security Policy, legger du til domenene nedenfor i de tilsvarende CSP-direktivene. Denne policyen gjelder både Checkout og Hello — Zonos-snippet laster inn skript, stilark, fonter, bilder og gjør nettverksforespørsler, så blokkering av noen av disse ressursene vil bryte Checkout-flyten eller Hello-visningen. Listen over
style-srcgjelder 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.comSett opp Hello
Hello er påkrevd når du bruker Checkout.
Hello er ansvarlig for å oppdage besøkendes plassering, språk og valuta, og vise passende informasjon til dem. Du kan konfigurere alle Hello settings i Dashboard eller i Zonos JS-scriptet. Hvis du allerede har konfigurert Hello i Dashboard, vil scriptet laste disse innstillingene og bruke dem. Hvis du angir noen verdier i egenskapen
helloSettingstilZonos.init-funksjonen, vil scriptet bruke disse verdiene i stedet, som vist nedenfor.Konfigurer valutakonvertering i Hello i JS-skript
Hello bruker CSS-selektorer for å identifisere elementer på nettstedet ditt som viser valutainformasjon. Overfør disse selektorene til egenskapen
helloSettings.currencyElementSelectoravZonos.init-funksjonen slik at Hello kan oppdage og vise riktig valuta til den internasjonale kjøperen.Du kan bruke enhver gyldig CSS-velger her, for eksempel
#price, .pricefor å velge flere forskjellige elementer. Dette er vist på linjene 23 og 24 i det komplette eksemplet.Zonos.init({// ... other fieldshelloSettings: {currencyElementSelector: '.price', // Replace with your actual selector},// ... other fields});Åpne Hello automatisk ved sidelastning
Som standard åpnes Hello bare når besøkende klikker på flagg-knappen. Hvis du vil åpne Hello automatisk når siden lastes inn, kan du kalle
Zonos.openHelloDialog()-funksjonen når Zonos-scriptet har lastet inn. Dette er vist på linjene 25 og 26 i det komplette eksemplet.Zonos.init({// ... other fieldshelloSettings: {: {.();},},});Konfigurer landvisningsregler i Dashboard
Kontroller hvilke kjøperland som ser Hello, og hvilke land som vises i rullegardinlisten med landvelger fra Dashboard. Naviger til Dashboard -> Settings -> Hello og finn Country display rules-delen.
Synlighet for widget
Kontroller hvilke kjøperland som ser Hello-widgeten. Velg en av grunnreglene, og bruk deretter listene Always show og Never show for å overstyre spesifikke land.
Landvelger
Kontroller hvilke land som vises i Hello-landsvelgerens rullegardinkasse, ved å bruke de samme grunnreglene pluss overstyringer med Always show og Never show.
Egenskapene
showForCountriesogshowCountryListpåhelloSettingser foreldet. Konfigurer landvisningsregler i Dashboard i stedet — verdier satt der vil lastes inn automatisk av Zonos JS-scriptet.Sett opp Checkout
Checkout er ansvarlig for å tillate kunden å angi frakt- og faktureringsinformasjon, beregne landingskostnad, samle inn betaling og fullføre bestillingen.
Checkout vil dele kontekstuelle data med Hello, for eksempel besøkendes plassering, språk og valuta. Dette sikrer at kundens opplevelse er konsistent på tvers av hele shoppingprosessen.
Du kan konfigurere alle Checkout-innstillinger både i Dashboard og i Zonos JS-scriptet. Hvis du allerede har konfigurert Checkout i Dashboard, vil scriptet laste disse innstillingene og bruke dem. Hvis du angir noen verdier i egenskapen
checkoutSettingstilZonos.init-funksjonen, vil scriptet bruke disse verdiene i stedet.Konfigurer 'plasser bestilling'-knappen i JS-skript
Zonos JS-scriptet vil automatisk gjenkjenne internasjonale kjøpere og lede dem til Checkout-flyten. Du må imidlertid konfigurere 'plasser bestilling'-knappen på plattformen din for å åpne Checkout når den klikkes. Dette kan gjøres ved å sende en CSS-velger til
checkoutSettings.placeOrderButtonSelector-egenskapen tilZonos.init-funksjonen.Hvis du har flere knapper som kan brukes til å plassere en bestilling, sørg for å sende en velger for hver knapp. For eksempel
#placeOrder, .place-order.Dette er vist på linje 21 i det komplette eksemplet.
Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)},});Opprett handlekurvdetaljer sikkert på serversiden
For å vise handlekurvdetaljene til kunden, må du opprette en serversidig funksjon som kaller Zonos API for å opprette en handlekurv, og deretter sende handlekurv-ID-en tilbake til frontend. Dette sikrer at handlekurvdetaljene ikke eksponeres for kunden på en måte som kan manipuleres.
API-anropet på backend-siden vil bruke en hemmelig GraphQL-legitimasjontoken, som er annerledes enn den offentlige tokenen du bruker for å autentisere Zonos JS-scriptet. Denne tokenen kan hentes inn i Dashboard -> Settings -> Integrations. Den hemmelige tokenen må sendes som en header i API-anropet ditt.
cartCreate-mutasjonen aksepterer en liste over elementer, som skal formateres i henhold til 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 foreslår å opprette en API-endepunkt på serversiden og deretter kalle det endepunktet fra din frontend JS-integrasjon, som er detaljert i neste trinn.
Overfør handlekurv-ID til Checkout via frontend
Når du har opprettet en handlekurv på serversiden, må du overføre handlekurv-ID til Zonos JS-scriptet. Dette kan gjøres ved å bruke
createCartId-tilbakekall som er del avZonos.init-funksjonen. Checkout vil deretter sikkert hente handlekurvdetaljene fra Zonos når den åpnes, og forhindrer manipulering av handlekurven. Se kodeeksemplet nedenfor.Verdien av
createCartIdkan ikke være en statisk verdi, den må være en funksjon.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},},});(Valgfritt) Vis en melding under Ordretotal
Hvis du trenger å vise en kort, dynamisk melding inne i Checkout — for eksempel en lovpålagt avsløring når et spesifikt produkt er i handlekurven — kan du returnere en
customMessage-matrise fracreateCartId-tilbakekallet. Hver oppføring i matrisen gjengis på sin egen linje av ett enkelt informasjonsbanner direkte under Order total.Markdown link-syntaks —
[link label]etterfulgt av(https://example.com)— gjengis som en ankertag, slik at kjøpere kan klikke gjennom. Vanlighttps://-URL-er i teksten blir også automatisk koblet. Alt annet gjengis som ren tekst, slik at HTML i strengene escapes i stedet for å bli kjørt.Bare ett banner vises per Checkout, uansett hvor mange linjer du sender inn.
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).',],};},},});(Valgfritt) Utløs Zonos checkout programmatisk
Hvis du har tilpasset logikk og trenger å utløse Zonos checkout programmatisk, kan du bruke
Zonos.triggerCheckoutInternational()-funksjonen for å åpne Zonos checkout-vinduet etter at Zonos er initialisert. Dette vil påkallecreateCartId-tilbakekallet som er definert iZonos.initovenfor, og åpne Zonos 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();}});(Valgfritt) Utløs alltid Zonos checkout-velger
Hvis du vil skille checkout-prosessen for innenlandske og internasjonale kjøpere, kan du legge til en
International checkout-knapp på nettstedet ditt. I stedet for å manuelt utløse Zonos Checkout medZonos.triggerCheckoutInternational, kan du konfigurereZonos.initmed den aktuelle velgeren. Velgeren blir deaktivert inntil Zonos er initialisert, når knappen klikkes, utløser den automatisk Zonos checkout. Dette vil påkallecreateCartId-tilbakekallet som er definert iZonos.initog åpne Zonos 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},});(Valgfritt) Spor kassetrakten med GA4 eller Facebook Pixel
Zonos Checkout kan videresende hele kassetrakten til dine eksisterende analyseverktøy. For hvert trinn sender Zonos:
zonos-checkout-...-hendelsen til GA4 (viagtag('event', ...)) og til Meta som en tilpasset hendelse (viafbq('trackCustom', ...)).InitiateCheckout,AddPaymentInfoogPurchase— slik at Metas innebygde optimisering og konverteringsrapportering fungerer direkte.Hvordan hendelser kommer til leverandørene dine, avhenger av hvordan Checkout gjengis på nettstedet ditt. Velg banen som samsvarer med integrasjonen din.
Innebygd integrasjon (Checkout gjengis direkte på nettstedet ditt)
Når det egendefinerte
<zonos-checkout>-elementet monteres på din egen side (standarden for Zonos JS-skriptet som er beskrevet ovenfor), er sidens egenwindow.gtagogwindow.fbqallerede i omfang. Zonos kaller dem direkte — ingen relé eller piksel-ID-overføring er nødvendig.Oppsett:
Det er alt. Ingen relé skript, ingen
customHTML, ingen ekstra ID-er som skal sendes — Zonos oppdagergtag/fbqpå siden og avfyrer hendelser direkte.Iframe-integrasjon (legacy Checkout iframe på
iglobalstores.com)Når Checkout er vert i en iframe på en annen opprinnelse, kan den ikke nå siden din
gtag/fbqdirekte. Zonos publiserer et lite relé-skript —analyticsRelayOnInit.js— som lytter til postMessage-hendelser fra Checkout iframe og videresender dem til leverandørene du har på siden din. Et enkelt relé håndterer både GA4 og Facebook Pixel på samme tid.Oppsett:
<head>på siden som er vert for Checkout iframe.asyncsrc="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">customHTMLslik at releiet vet hvilken eiendom/piksel du skal avfyre:window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';For trinnvis iframe-instruksjoner, hele hendelsesreferansen (inkludert nyttelast-kartleggingen for
purchase/Purchase), og feilsøkingstips, se:Synkroniser ordresporing og status i Dashboard
For å synkronisere bestillinger mellom systemet ditt og Zonos Dashboard, implementerer du disse API-anropene og webhooks:
Nødvendige mutasjoner
orderUpdateAccountOrderNumberorderAddTrackingNumberNødvendige webhooks
ORDER_CREATEDORDER_STATUS_CHANGEDTest integrasjonen din
Før du går live med Checkout-integrasjonen din, er det viktig å grundig teste alle aspekter av integrasjonen for å sikre en jevn kundeopplevelse. Dette inkluderer testing av kasseflyten, betalingsbehandling, ordreopprettelse og webhook-funksjonalitet.
Følg vår testguide for å verifisere at integrasjonen din fungerer korrekt, og for å identifisere og fikse eventuelle problemer før lansering til produksjon.
Vanlige spørsmål
Nedenfor er noen vanlige spørsmål om integrasjonsprosessen.
Hvordan håndterer Zonos ordrebekreftelse?
Konfigurer opplevelsen etter kjøp i Dashboard -> Settings -> Checkout settings under Success page type. Tre alternativer er tilgjengelige:
zOrderNumber(ogorderIdfor eldre handlekurver) lagt til som spørreparametere.zonosCheckoutSessionIdsom en spørreparameter. Bruk dette alternativet når du vil ha den raskeste overføringen tilbake til din egen suksess-side.Slå opp bestillingen fra
zonosCheckoutSessionIdNår du bruker Close the checkout modal med en omdirigerings-URL, kan det hende at bestillingen tar noen få sekunder å knytte seg til checkout-sesjonen etter omdirigeringen. Les
zonosCheckoutSessionIdfra URL-en og pollcheckoutSession-GraphQL-spørringen fra serveren din ved hjelp av din hemmelige legitimasjontoken inntil bestillingen er klar. Kall aldri dette fra nettleseren — den hemmelige legitimasjontoken må holdes på serversiden.query getCheckoutSession($id: String!) {checkoutSession )orderidSend spørringen til
https://api.zonos.com/graphqlmed din hemmelige legitimasjontoken fra Dashboard -> Settings -> Integrations sendt somcredentialToken-forespørselshoder.Kan jeg bli varslet når en ordre opprettes?
Ja. Hvis du vil motta varslinger når en ordre opprettes, i Dashboard under Email-delen av Checkout settings, kan du oppgi e-postadressen til teammedlemmene som bør varsles når en ordre opprettes, sendes eller kanselleres.
Var denne siden nyttig?