Индивидуальная интеграция

Скрипт Zonos Elements доступен по следующему URL:

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

Обработка кэширования браузера

Мы также обычно рекомендуем добавлять временную метку или другой уникальный идентификатор к URL, чтобы гарантировать, что скрипт не кэшируется браузером. Это обеспечит загрузку последней версии скрипта. Например:

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

После загрузки скрипта Zonos JS, вам необходимо аутентифицировать его, передав Zonos API ключ и идентификатор магазина в функцию Zonos.init. API ключи, используемые для аутентификации Checkout, предназначены для публикации, что означает, что их можно безопасно использовать в коде на стороне клиента, не раскрывая никакой конфиденциальной информации.

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

Чтобы гарантировать, что JS-скрипт Zonos загружается только на разрешенных сайтах, мы фильтруем запросы на основе списка "разрешенных доменов". Этот список настраивается в Dashboard. Без этой конфигурации JS-скрипт Zonos будет возвращать ошибки разрешения вместо корректной загрузки.

Чтобы обновить ваши разрешенные домены:

1. Перейдите в Dashboard -> Настройки -> настройки Checkout.
2. В разделе Разрешенные домены добавьте домен(ы), на которых вы будете интегрировать Checkout.
3. Нажмите Сохранить.

Hello использует CSS-селекторы для идентификации элементов на вашем сайте, которые отображают информацию о валюте. Вам нужно будет передать эти селекторы в свойство helloSettings.currencyElementSelector функции Zonos.init.

Вы можете использовать любой действительный CSS-селектор, например #price, .price, чтобы выбрать несколько различных элементов.

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

Hello имеет возможность проверять наличие ограниченных товаров, пока покупатель просматривает, и предотвращать их добавление в корзину. Для того чтобы это работало, Hello необходимо знать дополнительную информацию о товаре, такую как название и описание, а также кнопку "добавить в корзину". Вы можете передать CSS-селекторы в Hello, чтобы он мог извлекать эту информацию со страницы.

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

По умолчанию Hello будет открываться только тогда, когда посетитель нажимает на кнопку с флагом. Если вы хотите автоматически открывать Hello при загрузке страницы, вы можете вызвать функцию Zonos.openHelloDialog(), как только скрипт Zonos будет загружен.

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

Zonos.openHelloDialog();

JS-скрипт Zonos автоматически распознает международных покупателей и направляет их в поток Checkout. Однако вам нужно будет настроить кнопку 'разместить заказ' на вашей платформе, чтобы она открывала Checkout при нажатии. Это можно сделать, передав CSS-селектор в свойство checkoutSettings.placeOrderButtonSelector функции Zonos.init.

Если у вас есть несколько кнопок, которые могут использоваться для размещения заказа, убедитесь, что вы передали селектор, который будет соответствовать всем из них. Например, #placeOrder, .place-order будет соответствовать как #placeOrder, так и .place-order.

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

Функция обратного вызова buildCartDetail отвечает за возврат деталей корзины в формате, который интерфейс Checkout может понять и отобразить. Эта функция вызывается, как только клиент попадает на страницу checkout, что гарантирует точное отображение деталей корзины на первой странице Checkout. Обратите внимание, что это не используется для расчетов - это будет обработано на следующем этапе.

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

Схема элемента корзины

Функция buildCartDetail должна возвращать массив элементов корзины. Ниже представлена таблица, описывающая структуру каждого объекта CartItem:

Функция buildLandedCost отвечает за безопасный расчет landed cost. Она вызывается после того, как клиент вводит свою информацию для доставки. Эта функция рассчитывает тарифы на доставку и другие необходимые расходы, которые затем отображаются на следующей странице Checkout.

Важно, чтобы вы обрабатывали логику расчета landed cost на стороне сервера, так как это единственный способ гарантировать, что детали корзины не будут доступны в браузере клиента. Если вы используете безсерверную архитектуру, вы можете использовать безсерверную функцию для обработки расчета landed cost. Функция buildLandedCost должна просто вызывать безсерверную функцию/API-эндпоинт и возвращать результат.

На стороне сервера вы можете использовать API Zonos Checkout для расчета landed cost с помощью следующего запроса POST. Вам нужно будет передать API-ключ, который вы использовали для скрипта Zonos, в заголовке credentialToken.

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