Anpassad integration

Zonos Elements-skriptet finns tillgängligt på följande URL:

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

Hantera webbläsarcaching

Vi rekommenderar också vanligtvis att lägga till en tidsstämpel eller annan unik identifierare till URL:en för att säkerställa att skriptet inte cachas av webbläsaren. Detta kommer att säkerställa att den senaste versionen av skriptet alltid laddas. Till exempel:

<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 laddat Zonos JS-skriptet, behöver du autentisera det genom att skicka en Zonos API-nyckel och butikens ID till Zonos.init funktionen. API-nycklarna som används för att autentisera Checkout är utformade för att vara publicerbara, vilket innebär att de kan användas säkert i frontend-kod utan att avslöja någon känslig information.

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

För att säkerställa att Zonos JS-skriptet endast laddas på tillåtna webbplatser, filtrerar vi förfrågningar baserat på en lista över "tillåtna domäner". Denna lista konfigureras i Dashboard. Utan denna konfiguration kommer Zonos JS-skriptet att returnera behörighetsfel istället för att laddas korrekt.

För att uppdatera dina tillåtna domäner:

1. Gå till Dashboard -> Inställningar -> Checkout inställningar.
2. Under avsnittet Tillåtna domäner, lägg till domän(er) där du kommer att integrera Checkout.
3. Klicka på Spara.

Hello använder CSS-selektorer för att identifiera element på din webbplats som visar valutainformation. Du behöver skicka dessa selektorer till helloSettings.currencyElementSelector-egenskapen av Zonos.init-funktionen.

Du kan använda vilken giltig CSS-selektor som helst här, till exempel #price, .price för att välja flera olika element.

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

Hello har förmågan att kontrollera för begränsade artiklar när kunden bläddrar och förhindra att de läggs till i kundvagnen. För att detta ska fungera behöver Hello veta om ytterligare artikelinformation såsom namn och beskrivning, samt "lägg till i kundvagn"-knappen. Du kan skicka CSS-selektorer till Hello för att låta den hämta denna information från sidan.

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

Som standard kommer Hello endast att öppnas när besökaren klickar på flaggknappen. Om du vill öppna Hello automatiskt när sidan laddas, kan du anropa funktionen Zonos.openHelloDialog() när Zonos-scriptet har laddats.

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

Zonos.openHelloDialog();

Zonos JS-skriptet kommer automatiskt att känna igen internationella shoppare och dirigera dem till Checkout flödet. Du behöver dock konfigurera 'lägg beställning' knappen på din plattform för att öppna Checkout när den klickas. Detta kan göras genom att skicka en CSS-väljare till checkoutSettings.placeOrderButtonSelector egenskapen av Zonos.init funktionen.

Om du har flera knappar som kan användas för att lägga en beställning, se till att skicka in en väljare som matchar alla av dem. Till exempel, #placeOrder, .place-order kommer att matcha både #placeOrder och .place-order.

Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
  },
});

Den buildCartDetail callback är ansvarig för att returnera kundvagnsdetaljer i ett format som Checkout gränssnittet kan förstå och visa. Denna funktion anropas så snart kunden anländer till checkout sidan, vilket säkerställer att kundvagnsdetaljerna visas korrekt på första sidan av Checkout. Observera att detta inte används för beräkningar - det hanteras i nästa steg.

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

Schema för varukorgsobjekt

Funktionen buildCartDetail ska returnera en array av varukorgsobjekt. Nedan finns en tabell som beskriver strukturen för varje CartItem-objekt:

Funktionen buildLandedCost hanterar säker beräkning av landed cost. Den anropas efter att kunden har angett sin fraktinformation. Denna funktion beräknar fraktkostnader och andra nödvändiga kostnader, som sedan visas på nästa sida av Checkout.

Det är viktigt att du hanterar logiken för beräkning av landed cost på serversidan, eftersom detta är det enda sättet att säkerställa att varukorgens detaljer inte exponeras för kundens webbläsare. Om du använder en serverlös arkitektur kan du använda en serverlös funktion för att hantera beräkningen av landed cost. Funktionen buildLandedCost ska helt enkelt anropa den serverlösa funktionen/API-slutpunkten och returnera resultatet.

På serversidan kan du använda Zonos Checkout API för att beräkna landed cost genom att använda följande POST-begäran. Du behöver skicka API-nyckeln som du har använt för Zonos JS-skriptet i credentialToken-huvudet.

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