Tilpasset integrasjon

Zonos Elements-skriptet er tilgjengelig på følgende URL:

<script src="https://js.zonos.com/dist/scripts/loadZonos.js" />

Håndtering av nettleserbuffer

Vi anbefaler også vanligvis å legge til et tidsstempel eller en annen unik identifikator til URL-en for å sikre at skriptet ikke blir bufret av nettleseren. Dette vil sikre at den nyeste versjonen av skriptet alltid lastes inn. 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 lastet inn Zonos JS-skriptet, må du autentisere det ved å sende en Zonos API-nøkkel og butikk-ID inn i Zonos.init funksjonen. API-nøklene som brukes til å autentisere Checkout er designet for å være publiserbare, noe som betyr at de trygt kan brukes i frontend-kode uten å eksponere sensitiv informasjon.

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 å sikre at Zonos JS-skriptet kun lastes inn på tillatte nettsteder, filtrerer vi forespørslene basert på en liste over "tillatte domener". Denne listen konfigureres i Dashboard. Uten denne konfigurasjonen vil Zonos JS-skriptet returnere tillatelsesfeil i stedet for å lastes inn riktig.

For å oppdatere dine tillatte domener:

1. Gå til Dashboard -> Innstillinger -> Checkout innstillinger.
2. Under Tillatte domener-seksjonen, legg til domenet/domenene der du vil integrere Checkout.
3. Klikk Lagre.

Hello bruker CSS-selektorer for å identifisere elementer på nettstedet ditt som viser valutainformasjon. Du må sende disse selektorene til helloSettings.currencyElementSelector-egenskapen til Zonos.init-funksjonen.

Du kan bruke hvilken som helst gyldig CSS-selektor her, for eksempel #price, .price for å velge flere forskjellige elementer.

Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other fields
    currencyElementSelector: '#price, .price', // Replace with your actual selector
  },
});

Hello har muligheten til å sjekke for begrensede varer mens kunden blar gjennom og forhindre dem fra å bli lagt til i handlekurven. For at dette skal fungere, må Hello vite om tilleggsinformasjon om varen, som navn og beskrivelse, samt "legg til i handlekurv-knappen". Du kan sende CSS-selektorer til Hello for å la den hente denne informasjonen fra siden.

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

Som standard vil Hello kun åpne når besøkende klikker på flaggknappen. Hvis du ønsker å åpne Hello automatisk når siden lastes, kan du kalle Zonos.openHelloDialog()-funksjonen når Zonos-skriptet har lastet inn.

Zonos.init({
  // ... other fields
});

Zonos.openHelloDialog();

Zonos JS-skriptet vil automatisk gjenkjenne internasjonale kunder og lede dem til Checkout-flyten. Du må imidlertid konfigurere 'plasser ordre'-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 ordre, må du sørge for å sende inn en velger som vil matche alle sammen. 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 tilbakeringingsfunksjonen er ansvarlig for å returnere handlekurvdetaljer i et format som Checkout-grensesnittet kan forstå og vise. Denne funksjonen kalles så snart kunden ankommer checkout-siden, og sikrer at handlekurvdetaljene vises nøyaktig på den første siden av Checkout. Vennligst merk at dette ikke brukes til beregninger - det håndteres i neste steg.

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

Handle for kurvobjekt

Funksjonen buildCartDetail skal returnere en matrise av kurvobjekter. Nedenfor er en tabell som beskriver strukturen til hvert CartItem-objekt:

Funksjonen buildLandedCost håndterer sikker beregning av landed cost. Den blir kalt etter at kunden har oppgitt sin fraktinformasjon. Denne funksjonen beregner fraktkostnader og andre nødvendige kostnader, som deretter vises på den påfølgende siden av Checkout.

Det er viktig at du håndterer logikken for beregning av landed cost på serversiden, da dette er den eneste måten å sikre at kurvdetaljene ikke blir eksponert for kundens nettleser. Hvis du bruker en serverløs arkitektur, kan du bruke en serverløs funksjon for å håndtere beregningen av landed cost. Funksjonen buildLandedCost skal ganske enkelt kalle den serverløse funksjonen/API-endepunktet og returnere resultatet.

På serversiden kan du bruke Zonos Checkout API for å beregne landed cost ved å bruke følgende POST-forespørsel. Du må sende API-nøkkelen du har brukt for Zonos JS-skriptet 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
    },
  },
});