Anpassad integration

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

<script src="https://cdn.jsdelivr.net/npm/@zonos/elements/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://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>

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

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

För att visa kundvagnsdetaljer för kunden måste du skapa en serverside-funktion som kommer att anropa Zonos API:et för att skapa en kundvagn, och sedan skicka tillbaka det kundvagns-ID:t till din frontend. Detta kommer att säkerställa att kundvagnsdetaljer inte exponeras för kunden på ett sätt som kan manipuleras.

Ditt backend API-anrop kommer att använda en hemlig GraphQL-credential-token, som är annorlunda än den offentliga token som du använder för att autentisera Zonos JS-skriptet. Denna token kan hämtas från Dashboard och måste skickas som en header i ditt API-anrop.

Mutation createCart accepterar en lista med artiklar, som bör formateras enligt kundvagnsartikel-schema.

// Example cart creation with Node.js
async function createCart(someCartDetails) {
  const response = await fetch('https://api.zonos.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      credentialToken: 'credential_live_xxxxxxxxxx', // Replace with your actual credential token (found in Dashboard)
    },
    body: `
      mutation {
        createCart(input: {
          cart: {
            items: ${JSON.stringify(someCartDetails)}
          }
        }) {
          id
        }
      }
    `,
  });

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

Vi föreslår att du skapar en API-slutpunkt på din server-sida och sedan anropar den slutpunkten från din frontend JS-integration, vilket beskrivs i nästa steg.

När du har skapat en varukorg på din server-sida, behöver du skicka varukorgs-ID:t till Zonos JS-skriptet. Detta kan göras genom att använda createCartId callbacken som är en del av Zonos.init funktionen. Checkout kommer då säkert att hämta varukorgens detaljer från Zonos när den öppnas, vilket förhindrar att varukorgen manipuleras.

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