Anpassad integration

För att komma igång, vänligen kontakta vårt försäljningsteam för att skapa ett konto och skriva ett avtal. När ett avtal har undertecknats kommer du att få två mikrodepositioner på ditt konto som behöver verifieras.

Vänligen skicka dessa mikrodepositionsbelopp till accounting@zonos.com med ditt Dashboard-butiks-ID (CC:a din försäljningsrepresentant).

När det har verifierats kommer dina bankuppgifter att visas i Dashboard -> Inställningar -> Fakturering.

Efter att du har skapat ditt Zonos-konto behöver du konfigurera inställningar i Dashboard för att säkerställa att Checkout fungerar korrekt med din butik. Denna sektion täcker alla viktiga Dashboard-konfigurationer.

Ställ in utbetalningar

Anslut ett bankkonto för att ta emot snabba utbetalningar från Checkout. Utbetalningar behandlas dagligen med en fördröjning på 2 dagar från den fångade betalningen. För att göra detta, följ dessa steg:

1. Navigera till Dashboard -> Inställningar -> Checkout-inställningar.
2. Klicka på Lägg till bankkonto
3. Du kommer att tas till en Stripe-portal för att slutföra installationen och ange följande information:
   • Bankkontoinformation.
   • Företagets EIN.
   • Personnummer för en 25%-ig företagsägare. För mer information om varför detta krävs, se Stripes dokumentation.

Obs: Om du behöver uppdatera ditt utbetalningsschema, vänligen kontakta support@zonos.com

Ställ in tillåtna domäner

Den Zonos JS-skriptet kräver en lista över tillåtna domäner av säkerhetsskäl. Detta förhindrar obehöriga webbplatser från att ladda skriptet och säkerställer att det endast körs på dina godkända domäner. Utan denna konfiguration kommer skriptet att returnera behörighetsfel.

För att ställa in detta:

1. Navigera till Dashboard -> Inställningar -> Checkout-inställningar
2. Under URL:er, lägg till din fullständiga domän och eventuella underdomäner där Checkout kommer att användas. Till exempel, om din domän är example.com, bör du lägga till example.com och test.example.com.

Anpassa varumärkesinställningar

Konfigurera dina varumärkesinställningar i Dashboard för att matcha din butiks utseende och känsla.

För att göra detta, följ dessa steg:

1. Navigera till Dashboard -> Inställningar -> Checkout-inställningar -> Varumärke
2. Konfigurera följande inställningar:
   • Logotyp.
   • Varumärke och accentfärg.
   • Tema, stil och typsnitt.

För mer information om varumärkesinställningar, se vår dokumentation.

Anslut en fraktleverantör

För att citera frakt vid checkout, behöver du ansluta en fraktleverantör till ditt Zonos-konto. Detta gör att du kan aktivera specifika fraktservicenivåer vid checkout.

För att ansluta en fraktleverantör, följ dessa steg:

1. Navigera till Dashboard -> Inställningar -> Frakt -> Priser
2. Klicka på Lägg till leverantör
3. Följ instruktionerna för att ställa in leverantören.

För mer information om att ansluta leverantörskonton, se vår dokumentation.

Ställ in fraktzoner

Fraktzoner gör att du kan konfigurera vilka fraktleverantörer och servicenivåer som är tillgängliga för olika regioner i världen.

För att ställa in fraktzoner, följ dessa steg:

1. Navigera till Dashboard -> Inställningar -> Frakt -> Platser
2. Klicka på Ny zon
3. Ange ett zonnamn och välj de länder du vill skicka till.
4. Välj den leverantör och servicenivå du vill erbjuda.

För mer information om fraktzoner, se vår dokumentation.

Ställ in en fallback-land för ursprung och HS-kod

Ursprungslandet och HS-koden används för att beräkna exakta avgifter och skatter.

Om du inte anger ett specifikt ursprungsland eller HS-kod, kommer vi att använda de fallback-alternativ som ställts in i Dashboard.

För att ställa in ditt fallback-ursprungsland och HS-kod:

1. Navigera till Dashboard -> Inställningar -> Frakt -> Katalog.
2. För ursprungslandet, välj det land där majoriteten av dina produkter tillverkas.
3. För HS-koden, ange HS-koden för din vanligaste produkt. Om du inte har en HS-kod, navigera till Classify i Dashboard och ange namnet och beskrivningen av din produkt för att generera en korrekt HS-kod.

Zonos JS-snippet är en klientbaserad JavaScript-integration som möjliggör global checkout-funktionalitet på din webbplats. Det fungerar som bron mellan din e-handelsplattform och Zonos-tjänster, och hanterar:

• Checkout-upplevelse: Renderar checkout-användargränssnittet och behandlar betalningar.
• Platsjänster: Upptäcker besökarens plats och hanterar valutakonvertering.
• Varukorgsintegration: Ansluter till ditt befintliga varukorgs- och ordersystem.
• Säkerhet: Validerar domäner och autentiserar API-förfrågningar.

Snippeten laddas asynkront för att förhindra påverkan på din webbplats prestanda. Den initieras med din butiks API-uppgifter och hanterar alla klientbaserade interaktioner på ett säkert sätt. Implementeringen är utformad för att vara icke-invasiv och kräver minimala ändringar i din befintliga checkout-flöde.

Nedan finns ett komplett exempel som inkluderar skriptladdning, initiering och händelsehantering att referera till när du integrerar Checkout.

<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', () => {
        window.Zonos.init({
          checkoutSettings: {
            createCartId: async () => {
              // Replace with your server-side cart creation logic
              return {
                cartId: 'cart_73e707c0-c161-4c37-9581-4da1b1115777',
              };
            },
            placeOrderButtonSelector: '#placeOrder, .place-order', // Replace with your actual selector(s)
          },
          helloSettings: {
            currencyElementSelector: '.price',
            onInitSuccess: () => {
              Zonos.openHelloDialog();
            },
          },
          storeId: 7744, // Replace with your actual store ID
          zonosApiKey: 'credential_live_7a128f4e-f192-4232-8992-94dd09eb4437', // Replace with your actual API key
        });
      });

      document.head.appendChild(script);
    }
  })();
</script>

Notera: Ersätt platshållarvärdena (storeId, zonosApiKey, selectors, etc.) med dina faktiska värden från din Zonos Dashboard.

Hantering av webbläsarcaching

Vi rekommenderar att du lägger till en tidsstämpel eller ett annat unikt 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. Detta visas i rad 10 av det kompletta exemplet.

      script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;

Autentisera Zonos JS-snippet

När du har laddat Zonos JS-skriptet, behöver du autentisera det genom att skicka en offentlig Zonos API-nyckel och butikens ID till Zonos.init funktionen. Den offentliga API-nyckeln som används för att autentisera Checkout är avsedd att vara publicerbar, vilket innebär att den kan användas säkert i frontend-kod utan att avslöja någon känslig information.

För att hitta ditt butikens ID och API-nyckel, navigera till Dashboard -> Inställningar -> Integrationer. Se till att du inte använder en Secret API-nyckel, eftersom den inte är avsedd att användas i frontend-kod. Detta visas i raderna 29 och 30 i det kompletta exemplet.

Zonos.init({
  // ... other fields
  zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard)
  storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard)
  // ... other fields
});

Hello krävs när du använder Checkout.

Hello ansvarar för att upptäcka besökarens plats, språk och valuta, och visa lämplig information för dem. Du kan konfigurera alla Hello inställningar i Dashboard eller i Zonos JS-skriptet. Om du redan har konfigurerat Hello i Dashboard, kommer skriptet att ladda dessa inställningar och använda dem. Om du anger några värden i helloSettings-egenskapen av funktionen Zonos.init, kommer skriptet att använda dessa värden istället som visas nedan.

Konfigurera valutakonvertering i Hello i JS-skript

Hello använder CSS-väljare för att identifiera element på din webbplats som visar valutainformation. Skicka dessa väljare till helloSettings.currencyElementSelector-egenskapen av funktionen Zonos.init så att Hello kan upptäcka och visa rätt valuta för den internationella köparen.

Du kan använda vilken giltig CSS-väljare som helst här, till exempel #price, .price för att välja flera olika element. Detta visas i rad 23 och 24 av det kompletta exemplet.

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

Automatiskt öppna Hello vid sidladdning

Som standard kommer Hello endast att öppnas när besökaren klickar på flaggknappen. Om du vill automatiskt öppna Hello när sidan laddas, kan du anropa funktionen Zonos.openHelloDialog() när Zonos-scriptet har laddats. Detta visas i rad 25 och 26 av det kompletta exemplet.

Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other hello settings
    onInitSuccess: () => {
      Zonos.openHelloDialog();
    },
  },
});

Checkout ansvarar för att låta kunden ange sin frakt- och faktureringsinformation, beräkna landed cost, collect betalning och slutföra beställningen.

Checkout kommer att dela kontextuell data med Hello, såsom besökarens plats, språk och valuta. Detta säkerställer att kundens upplevelse är konsekvent genom hela shoppingprocessen.

Du kan konfigurera alla Checkout inställningar både i Dashboard och i Zonos JS-skriptet. Om du redan har konfigurerat Checkout i Dashboard, kommer skriptet att ladda dessa inställningar och använda dem. Om du anger några värden i checkoutSettings egenskapen av Zonos.init funktionen, kommer skriptet att använda dessa värden istället.

Konfigurera 'lägg beställning' knappen i JS-skript

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 för varje knapp. Till exempel, #placeOrder, .place-order.

Detta visas i rad 21 av det kompletta exemplet.

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

Säkert skapa kundvagnsdetaljer på serversidan

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 autentiseringstoken, som är annorlunda än den offentliga token som du använder för att autentisera Zonos JS-skriptet. Denna token kan hämtas i Dashboard -> Settings -> Integrations. Den hemliga token måste skickas som en header i ditt API-anrop.

Mutation cartCreate accepterar en lista med artiklar, som bör formateras enligt kundvagnsartikelsschemat.

// Create new cart from serverside
async function createCart() {
  /**
   * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate
   * */
  const graphql = JSON.stringify({
    query: `
mutation cartCreate($input: CartCreateInput!){
  cartCreate(input: $input) {
    id
    adjustments {
      amount
      currencyCode
      description
      productId
      sku
      type
    }
    items {
      id
      name
      amount
      currencyCode
      quantity
      sku
      description
      metadata {
        key
        value
      }
    }
    metadata {
      key
      value
    }
  }
}`,
    variables: {
      /**
       * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput
       */
      input: {
        /**
         * Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput
         */
        adjustments: [
          {
            amount: -10,
            currencyCode: 'USD',
            /**
             * Enum value: https://zonos.com/developer/types/CartAdjustmentType
             */
            type: 'CART_TOTAL',
          },
        ],
        /**
         * Cart item input: https://zonos.com/developer/types/ItemInput
         */
        items: [
          {
            name: 'Item 1',
            amount: 150.99,
            currencyCode: 'USD',
            description: 'Item 1 description',
            quantity: 2,
          },
        ],
        /**
         * Cart metadata input: https://zonos.com/developer/types/CartMetadataInput
         */
        metadata: [
          {
            key: 'key1',
            value: 'value1',
          },
        ],
      },
    },
  });

  const response = await fetch('https://api.zonos.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      credentialToken: 'credential_live_xxxxxxxxx', // Replace with your actual SECRET credential token (found in Dashboard)
    },
    body: graphql,
  });

  const { data } = await response.json();
  return data.cartCreate.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.

Skicka varukorgs-ID till Checkout via frontend

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. Se kodexemplet nedan.

Värdet av createCartId kan inte vara ett statiskt värde, det måste vara en funktion.

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

För att synkronisera beställningar mellan ditt system och Zonos Dashboard, implementera dessa API-anrop och webhooks:

Nödvändiga mutationer

Nödvändiga webhooks

Innan du går live med din Checkout integration är det viktigt att noggrant testa alla aspekter av integrationen för att säkerställa en smidig kundupplevelse. Detta inkluderar att testa checkout flödet, betalningsbehandling, order skapande och webhook-funktionalitet.

Följ vår testguide för att verifiera att din integration fungerar korrekt och för att identifiera och åtgärda eventuella problem innan du lanserar i produktion.

Nedan följer några vanliga frågor om integrationsprocessen.

Hur hanterar Zonos orderbekräftelse?

Zonos tillhandahåller en inbyggd tack-sida som du kan använda för orderbekräftelser. Denna sida kommer alltid att visas, även om en beställning misslyckas med att importeras till ditt system, vilket säkerställer att kunder alltid får bekräftelse på sitt köp.

Kan jag bli meddelad när en beställning skapas?

Ja. Om du vill ta emot meddelanden när en beställning skapas, kan du i Dashboard under E-post sektionen av Checkout inställningar ange e-postadressen till de teammedlemmar som ska meddelas när en beställning skapas, skickas eller avbryts.