Tilpasset integration

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

<script src="https://js.zonos.com/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:

<script>
  (async function () {
    const timestamp = new Date().getTime();
    const zonosScript = document.querySelector(
      `script[src*="https://js.zonos.com/dist/scripts/loadZonos.js"]`,
    );

    if (!zonosScript) {
      const script = document.createElement('script');
      script.src = `https://js.zonos.com/dist/scripts/loadZonos.js?timestamp=${timestamp}`;
      script.addEventListener(
        'load',
        () => {
          // Initialize the script here (instructions in next section)
        },
        false,
      );
      document.head.appendChild(script);
    }
  })();
</script>

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.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
});

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.

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.init({
  // ... other fields
  helloSettings: {
    // ... other fields
    currencyElementSelector: '#price, .price', // Replace with your actual selector
  },
});

Hello har evnen til at kontrollere for begrænsede varer, mens kunden browser, og forhindre dem i at blive tilføjet til kurven. For at dette kan fungere, skal Hello vide om yderligere vareinformation såsom navn og beskrivelse, samt "tilføj til kurv knappen". Du kan sende CSS-selektorer til Hello for at lade den indsamle disse oplysninger fra siden.

Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other fields
    productAddToCartElementSelector: '.add-to-cart',
    productDescriptionElementSelector: '.description',
    productPriceElementSelector: '.price',
    productTitleElementSelector: '.title',
  },
});

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.init({
  // ... other fields
});

Zonos.openHelloDialog();

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.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
  },
});

Den buildCartDetail callback er ansvarlig for at returnere kurvdetaljer i et format, som Checkout-grænsefladen kan forstå og vise. Denne funktion kaldes, så snart kunden ankommer til checkout-siden, hvilket sikrer, at kurvdetaljerne vises korrekt på den første side af Checkout. Bemærk venligst, at dette ikke bruges til beregninger - det håndteres i næste trin.

Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    buildCartDetail: async () => {
      // ... Your existing buildCartDetail implementation
      // This should return cart details for UI display
    },
  },
});

Indkøbsvare skema

Funktionen buildCartDetail skal returnere et array af indkøbsvare. Nedenfor er en tabel, der beskriver strukturen af hvert CartItem objekt:

Funktionen buildLandedCost håndterer sikkert beregningen af landed cost. Den kaldes, efter kunden indtaster deres forsendelsesoplysninger. Denne funktion beregner forsendelsesomkostningerne og andre nødvendige omkostninger, som derefter vises på den efterfølgende side af Checkout.

Det er vigtigt, at du håndterer logikken for beregning af landed cost på serversiden, da dette er den eneste måde at sikre, at indkøbsvareoplysningerne ikke bliver eksponeret for kundens browser. Hvis du bruger en serverløs arkitektur, kan du bruge en serverløs funktion til at håndtere beregningen af landed cost. Funktionen buildLandedCost skal blot kalde den serverløse funktion/API-endpoint og returnere resultatet.

På serversiden kan du bruge Zonos Checkout API'en til at beregne landed cost ved at bruge følgende POST anmodning. Du skal angive API-nøglen, du har brugt til Zonos JS-scriptet i credentialToken headeren.

https://v1.route.js.zonos.com/api/zonos-elements/calculate-landed-cost

{
  "billingAddress": {
    "addressLine1": "789 King Street",
    "city": "London",
    "country": "GB",
    "postalCode": "SW1A 1AA",
    "state": "England"
  },
  "billingContact": {
    "firstName": "John",
    "lastName": "Doe",
    "phone": "+44-20-7946-0958"
  },
  "checkoutSessionId": "xyz789",
  "contact": {
    "firstName": "John",
    "lastName": "Doe",
    "phone": "+44-20-7946-0958"
  },
  "items": [
    {
      "amount": 150,
      "currencyCode": "USD",
      "name": "Product Name",
      "quantity": 2
    }
  ],
  "shippingAddress": {
    "addressLine1": "789 King Street",
    "city": "London",
    "country": "GB",
    "postalCode": "SW1A 1AA",
    "state": "England"
  }
}

Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    buildLandedCost: async (checkoutSessionId, contact, shippingAddress) => {
      // This should return the landed cost calculation
    },
  },
});