Aangepaste integratie

Het Zonos Elements-script is beschikbaar op de volgende URL:

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

Omgaan met browsercaching

We raden ook meestal aan om een tijdstempel of een andere unieke identifier aan de URL toe te voegen om ervoor te zorgen dat het script niet door de browser wordt gecached. Dit zorgt ervoor dat de nieuwste versie van het script altijd wordt geladen. Bijvoorbeeld:

<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>

Zodra je de Zonos JS-script hebt geladen, moet je deze authentiseren door een Zonos API-sleutel en store ID door te geven aan de Zonos.init functie. De API-sleutels die worden gebruikt om Checkout te authentiseren, zijn ontworpen om publiceerbaar te zijn, wat betekent dat ze veilig kunnen worden gebruikt in frontendcode zonder gevoelige informatie bloot te stellen.

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

Om ervoor te zorgen dat het Zonos JS-script alleen op toegestane sites wordt geladen, filteren we verzoeken op basis van een lijst van "toegestane domeinen". Deze lijst wordt geconfigureerd in het Dashboard. Zonder deze configuratie zal het Zonos JS-script toestemmingsfouten retourneren in plaats van correct te laden.

Om uw toegestane domeinen bij te werken:

1. Ga naar Dashboard -> Instellingen -> Checkout instellingen.
2. Voeg onder de sectie Toegestane domeinen het domein of de domeinen toe waar u Checkout zult integreren.
3. Klik op Opslaan.

Hello gebruikt CSS-selectors om elementen op uw site te identificeren die valutainformatie weergeven. U moet deze selectors doorgeven aan de helloSettings.currencyElementSelector-eigenschap van de Zonos.init functie.

U kunt hier elke geldige CSS-selector gebruiken, bijvoorbeeld #price, .price om meerdere verschillende elementen te selecteren.

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

Hello heeft de mogelijkheid om te controleren op beperkte items terwijl de koper door de winkel browsed en te voorkomen dat deze aan de winkelwagentoevoeging worden toegevoegd. Om dit te laten werken, moet Hello op de hoogte zijn van aanvullende iteminformatie zoals de naam en beschrijving, evenals de "voeg toe aan winkelwagentoevoeging" knop. U kunt CSS-selectors doorgeven aan Hello zodat het deze informatie van de pagina kan ophalen.

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

Standaard zal Hello alleen openen wanneer de bezoeker op de vlagknop klikt. Als u Hello automatisch wilt openen wanneer de pagina laadt, kunt u de Zonos.openHelloDialog() functie aanroepen zodra het Zonos script is geladen.

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

Zonos.openHelloDialog();

Het Zonos JS-script zal automatisch internationale shoppers herkennen en hen naar de Checkout flow leiden. Je moet echter de 'plaats bestelling' knop op je platform configureren om Checkout te openen wanneer erop wordt geklikt. Dit kan worden gedaan door een CSS-selector door te geven aan de checkoutSettings.placeOrderButtonSelector eigenschap van de Zonos.init functie.

Als je meerdere knoppen hebt die kunnen worden gebruikt om een bestelling te plaatsen, zorg er dan voor dat je een selector doorgeeft die op allemaal overeenkomt. Bijvoorbeeld, #placeOrder, .place-order zal zowel #placeOrder als .place-order overeenkomen.

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

De buildCartDetail callback is verantwoordelijk voor het retourneren van winkelwagentekenen in een formaat dat de Checkout interface kan begrijpen en weergeven. Deze functie wordt aangeroepen zodra de klant op de checkout pagina arriveert, zodat de winkelwagentekenen nauwkeurig worden weergegeven op de eerste pagina van Checkout. Houd er rekening mee dat dit niet wordt gebruikt voor berekeningen - dat wordt in de volgende stap afgehandeld.

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

Cart item schema

De buildCartDetail functie moet een array van winkelwagentitemen retourneren. Hieronder staat een tabel met de structuur van elk CartItem object:

De buildLandedCost functie behandelt het veilig berekenen van de landed cost. Deze wordt aangeroepen nadat de klant zijn verzendinformatie heeft ingevoerd. Deze functie berekent de verzendkosten en andere noodzakelijke kosten, die vervolgens op de volgende pagina van Checkout worden weergegeven.

Het is belangrijk dat je de logica voor de berekening van de landed cost aan de serverzijde afhandelt, aangezien dit de enige manier is om ervoor te zorgen dat de winkelwagentdetails niet aan de browser van de klant worden blootgesteld. Als je een serverless architectuur gebruikt, kun je een serverless functie gebruiken om de berekening van de landed cost af te handelen. De buildLandedCost functie moet eenvoudig de serverless functie/API-eindpunt aanroepen en het resultaat retourneren.

Aan de serverzijde kun je de Zonos Checkout API gebruiken om de landed cost te berekenen door de volgende POST aanvraag te gebruiken. Je moet de API-sleutel die je hebt gebruikt voor het Zonos JS-script in de credentialToken header doorgeven.

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