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

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

<script src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js" />

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

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

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

После загрузки скрипта 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 при загрузке страницы, вы можете вызвать функцию 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)
  },
});

Для того чтобы отобразить детали корзины клиенту, вам необходимо создать серверную функцию, которая будет вызывать API Zonos для создания корзины, а затем передавать этот идентификатор корзины обратно на ваш фронтенд. Это обеспечит защиту деталей корзины от манипуляций со стороны клиента.

Ваш вызов API на стороне сервера будет использовать секретный токен GraphQL, который отличается от публичного токена, который вы используете для аутентификации скрипта Zonos JS. Этот токен можно получить из Dashboard и его необходимо передать в заголовке вашего вызова API.

Мутация createCart принимает список товаров, который должен быть отформатирован в соответствии с схемой элемента корзины.

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

Мы предлагаем создать конечную точку API на вашей стороне сервера, а затем вызывать эту конечную точку из вашей интеграции JS на стороне клиента, что подробно описано на следующем шаге.

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

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