DOCS

Tilpasset integration

Log ind
Book en demo
Checkout•
HjemGlobal e-handel Integration Integrer Checkout Tilpasset integration

Tilpasset integration

Byg en end-to-end Checkout integration til dit tilpassede site.

Denne guide dækker de tekniske aspekter af at gennemføre en fuld integration af Zonos Checkout i dit tilpassede site eller platform. Den er beregnet til udviklere, der er komfortable med at arbejde med JavaScript og har erfaring med frontend-udvikling. Alle trin er nødvendige, medmindre andet er angivet.

Forudsætninger


Installer Zonos JS-scriptet 

Din tilpassede integration skal inkludere Zonos JavaScript-snippet. Dette script er ansvarligt for at gengive Checkout UI, Zonos Hello, håndtere betalingsbehandling og håndtere besøgendes geo-IP-detektion.

1

Installer Zonos JS-snippet

Zonos Elements-scriptet er tilgængeligt på følgende URL:

Zonos JS snippet

1
<script src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js" />

Håndtering af browsercache

Vi anbefaler også typisk at tilføje et tidsstempel eller en anden unik identifikator til URL'en for at sikre, at scriptet ikke bliver cachet af browseren. Dette vil sikre, at den nyeste version af scriptet altid bliver indlæst. For eksempel:

Zonos JS snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  (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',
        () => {
          // Initialize the script here (instructions in next section)
        },
        false,
      );
      document.head.appendChild(script);
    }
  })();
</script>
2

Godkend Zonos JS snippet

Når du har indlæst Zonos JS-scriptet, skal du godkende det ved at sende en Zonos API-nøgle og butik ID ind i Zonos.init funktionen. API-nøglerne, der bruges til at godkende Checkout, er designet til at være offentliggjorte, hvilket betyder, at de sikkert kan bruges i frontend-kode uden at afsløre følsomme oplysninger.

Zonos JS snippet

1
2
3
4
5
6
Zonos.init({
  // ... other fields
  zonosApiKey: 'API KEY', // Replace with your actual API key (found in Dashboard)
  storeId: 'STORE ID', // Replace with your actual store ID (found in Dashboard)
  // ... other fields
});
3

Indstil tilladte domæner

For at sikre, at Zonos JS-scriptet kun indlæses på tilladte sider, filtrerer vi anmodninger baseret på en liste over "tilladte domæner". Denne liste konfigureres i Dashboard. Uden denne konfiguration vil Zonos JS-scriptet returnere tilladelsesfejl i stedet for at indlæse korrekt.

For at opdatere dine tilladte domæner:

  1. Gå til Dashboard -> Indstillinger -> Checkout indstillinger.
  2. Under sektionen Tilladte domæner skal du tilføje det/de domæne(r), hvor du vil integrere Checkout.
  3. Klik på Gem.

Opsæt Zonos Hello 

Når du har opsat Zonos JS-scriptet, skal du konfigurere Hello til at fungere med din side. Hello er ansvarlig for at registrere besøgendes placering, sprog og valuta og vise de relevante oplysninger til dem. Hello er påkrævet, når du bruger Checkout.

Du kan konfigurere alle Hello indstillinger i både Dashboard og Zonos JS-scriptet. Hvis du allerede har konfigureret Hello i Dashboard, vil scriptet indlæse disse indstillinger og bruge dem. Hvis du angiver nogen værdier i helloSettings egenskaben af Zonos.init funktionen, vil scriptet bruge disse værdier i stedet.

1

Konfigurer valutakonvertering

Hello bruger CSS-selektorer til at identificere elementer på din side, der viser valutaoplysninger. Du skal videregive disse selektorer til helloSettings.currencyElementSelector egenskaben af Zonos.init funktionen.

Du kan bruge enhver gyldig CSS-selektor her, for eksempel #price, .price for at vælge flere forskellige elementer.

Zonos JS snippet

1
2
3
4
5
6
7
Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other fields
    currencyElementSelector: '#price, .price', // Replace with your actual selector
  },
});

Valgfri — Åbn automatisk Hello ved indlæsning af siden

Som standard vil Hello kun åbne, når besøgende klikker på flagknappen. Hvis du ønsker at åbne Hello automatisk, når siden indlæses, kan du kalde funktionen Zonos.openHelloDialog() efter at Zonos scriptet er indlæst.

Zonos JS snippet

1
2
3
4
5
6
7
8
9
Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other hello settings
    onInitSuccess: () => {
      Zonos.openHelloDialog();
    },
  },
});

Opsæt Zonos Checkout 

Når Hello er blevet konfigureret, skal du opsætte Checkout til at fungere med din side. Checkout er ansvarlig for at lade kunden indtaste deres forsendelsesoplysninger, beregne landed cost og fuldføre ordren.

Checkout vil dele kontekstuelle data med Hello, såsom besøgendes placering, sprog og valuta. Dette sikrer, at kundens oplevelse er konsistent 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, vil scriptet indlæse disse indstillinger og bruge dem. Hvis du angiver nogen værdier i checkoutSettings egenskaben af Zonos.init funktionen, vil scriptet bruge disse værdier i stedet.

1

Konfigurer 'læg ordre' knappen

Zonos JS-scriptet vil automatisk genkende internationale shoppere og lede dem til Checkout flowet. Du skal dog konfigurere 'læg ordre' knappen på din platform til at åbne Checkout når den klikkes. Dette kan gøres ved at videregive en CSS-selektor til checkoutSettings.placeOrderButtonSelector egenskaben af Zonos.init funktionen.

Hvis du har flere knapper, der kan bruges til at lægge en ordre, skal du sørge for at videregive en selektor, der matcher dem alle. For eksempel, #placeOrder, .place-order vil matche både #placeOrder og .place-order.

Zonos JS snippet

1
2
3
4
5
6
7
Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
  },
});
2

Sikkert opret cart-detaljer på serversiden

For at vise cart-detaljerne til kunden skal du oprette en serverside funktion, der vil kalde Zonos API'et for at oprette en cart, og derefter sende den cart-ID tilbage til din frontend. Dette vil sikre, at cart-detaljer ikke bliver eksponeret for kunden på en måde, der kan manipuleres.

Dit backend API-opkald vil bruge et hemmeligt GraphQL legitimations-token, som er forskelligt fra det offentlige token, du bruger til at autentificere Zonos JS-scriptet. Dette token kan hentes i Dashboard -> Indstillinger -> Integrationer. Det hemmelige token skal sendes som en header i dit API-opkald.

cartCreate mutation accepterer en liste over varer, som skal formateres i henhold til cart item schema.

Eksempel på oprettelse af cart på serversiden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// Create new cart from serverside
async 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: [
          {
            key: 'key1',
            value: 'value1',
          },
        ],
      },
    },
  });

  const response = await fetch('https://api.zonos.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      credentialToken: 'credential_live_xxxxxxxxx', // Replace with your actual SECRET credential token (found in Dashboard)
    },
    body: graphql,
  });

  const { data } = await response.json();
  return data.cartCreate.id; // Return the cart ID to your frontend
}

Vi foreslår at oprette et API-endpoint på din server-side og derefter kalde dette endpoint fra din frontend JS-integration, som er detaljeret i næste trin.

3

Send kurv-ID til Checkout via frontend

Når du har oprettet en kurv på din server-side, skal du sende kurv-ID'et til Zonos JS-scriptet. Dette kan gøres ved at bruge createCartId callback'en, som er en del af Zonos.init funktionen. Checkout vil derefter sikkert hente kurvdetaljerne fra Zonos når den åbnes, hvilket forhindrer enhver manipulation af kurven.

Zonos JS snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    placeOrderButtonSelector: '#placeOrder', // 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
    },
  },
});

Var denne side nyttig?

Book en demo

Spørgsmål?

Få support
© 2025 Zonoszonos.com
På denne side:
  • Tilpasset integration
  • Installer Zonos JS-scriptet
  • Opsæt Zonos Hello
  • Opsæt Zonos Checkout