DOCS

맞춤형 통합

Checkout•
홈글로벌 전자상거래 통합 Checkout 통합 맞춤형 통합

맞춤형 통합

귀하의 맞춤형 사이트에 Checkout 통합을 구축하세요.

이 가이드는 귀하의 맞춤형 사이트 또는 플랫폼에 Zonos Checkout의 전체 통합을 완료하는 기술적 측면을 다룹니다. JavaScript 작업에 익숙하고 프론트엔드 개발 경험이 있는 개발자를 위한 것입니다. 별도로 언급되지 않는 한 모든 단계가 필요합니다.

필수 조건


이 가이드는 귀하의 맞춤형 사이트 또는 플랫폼에 Zonos Checkout의 전체 통합을 완료하는 기술적 측면을 다룹니다. JavaScript 작업에 익숙하고 프론트엔드 개발 경험이 있는 개발자를 위한 것입니다. 별도로 언급되지 않는 한 모든 단계가 필요합니다.

필수 조건


Zonos JS 스크립트 설치 

귀하의 맞춤형 통합에는 Zonos JavaScript 스니펫이 포함되어야 합니다. 이 스크립트는 Checkout UI, Zonos Hello를 렌더링하고, 결제 처리를 처리하며, 방문자의 geo-IP 감지를 처리하는 역할을 합니다.

1

Zonos JS 스니펫 설치

Zonos Elements 스크립트는 다음 URL에서 사용할 수 있습니다:

Zonos JS 스니펫

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

브라우저 캐싱 처리

우리는 또한 스크립트가 브라우저에 의해 캐시되지 않도록 URL에 타임스탬프 또는 기타 고유 식별자를 추가하는 것을 일반적으로 권장합니다. 이렇게 하면 항상 최신 버전의 스크립트가 로드됩니다. 예를 들어:

Zonos JS snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
2

Zonos JS 스니펫 인증

Zonos JS 스크립트를 로드한 후, Zonos API 키와 저장소 ID를 Zonos.init 함수에 전달하여 인증해야 합니다. Checkout 인증에 사용되는 API 키는 게시 가능하도록 설계되어 있어, 민감한 정보를 노출하지 않고도 프론트엔드 코드에서 안전하게 사용할 수 있습니다.

Zonos JS 스니펫

1
2
3
4
5
6
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
});
3

허용된 도메인 설정

Zonos JS 스크립트가 허용된 사이트에서만 로드되도록 하기 위해, "허용된 도메인" 목록을 기반으로 요청을 필터링합니다. 이 목록은 대시보드에서 구성됩니다. 이 구성이 없으면 Zonos JS 스크립트는 제대로 로드되지 않고 권한 오류를 반환합니다.

허용된 도메인을 업데이트하려면:

  1. 대시보드 -> 설정 -> Checkout 설정으로 이동합니다.
  2. 허용된 도메인 섹션에서 Checkout을 통합할 도메인(s)을 추가합니다.
  3. 저장을 클릭합니다.

Zonos Hello 설정 

Zonos JS 스크립트를 설정한 후, Hello를 귀하의 사이트와 함께 작동하도록 구성해야 합니다. Hello는 방문자의 위치, 언어 및 통화를 감지하고 적절한 정보를 표시하는 역할을 합니다. Hello는 Checkout을 사용할 때 필요합니다.

Hello의 모든 설정은 대시보드와 Zonos JS 스크립트에서 구성할 수 있습니다. 이미 대시보드에서 Hello를 구성한 경우, 스크립트는 해당 설정을 로드하여 사용합니다. Zonos.init 함수의 helloSettings 속성에 값을 지정하면, 스크립트는 대신 해당 값을 사용합니다.

1

통화 변환 구성

Hello는 사이트에서 통화 정보를 표시하는 요소를 식별하기 위해 CSS 선택기를 사용합니다. 이러한 선택기를 Zonos.init 함수의 helloSettings.currencyElementSelector 속성에 전달해야 합니다.

여기에서 유효한 CSS 선택기를 사용할 수 있으며, 예를 들어 #price, .price를 사용하여 여러 다른 요소를 선택할 수 있습니다.

Zonos JS 스니펫

1
2
3
4
5
6
7
Zonos.init({
  // ... other fields
  helloSettings: {
    // ... other fields
    currencyElementSelector: '#price, .price', // Replace with your actual selector
  },
});

선택 사항 — 페이지 로드 시 Hello 자동 열기

기본적으로 Hello는 방문자가 플래그 버튼을 클릭할 때만 열립니다. 페이지가 로드될 때 Hello를 자동으로 열고 싶다면, Zonos 스크립트가 로드된 후 Zonos.openHelloDialog() 함수를 호출하면 됩니다.

Zonos JS 스니펫

1
2
3
4
5
Zonos.init({
  // ... other fields
});

Zonos.openHelloDialog();

Zonos Checkout 설정하기 

Hello가 구성된 후, Checkout를 귀하의 사이트와 함께 작동하도록 설정해야 합니다. Checkout는 고객이 배송 정보를 입력하고, landed cost를 계산하며, 주문을 완료할 수 있도록 합니다.

Checkout는 방문자의 위치, 언어 및 통화와 같은 맥락 데이터를 Hello와 공유합니다. 이는 고객의 경험이 전체 쇼핑 과정에서 일관되도록 보장합니다.

모든 Checkout 설정은 대시보드와 Zonos JS 스크립트 모두에서 구성할 수 있습니다. 이미 대시보드에서 Checkout를 구성한 경우, 스크립트는 해당 설정을 로드하여 사용합니다. Zonos.init 함수의 checkoutSettings 속성에 값을 지정하면, 스크립트는 대신 해당 값을 사용합니다.

1

'주문하기' 버튼 구성하기

Zonos JS 스크립트는 국제 쇼핑객을 자동으로 인식하고 그들을 Checkout 흐름으로 안내합니다. 그러나 클릭 시 Checkout를 열도록 플랫폼에서 '주문하기' 버튼을 구성해야 합니다. 이는 Zonos.init 함수의 checkoutSettings.placeOrderButtonSelector 속성에 CSS 선택기를 전달하여 수행할 수 있습니다.

주문을 할 수 있는 여러 버튼이 있는 경우, 모든 버튼과 일치하는 선택기를 전달해야 합니다. 예를 들어, #placeOrder, .place-order는 #placeOrder와 .place-order 모두와 일치합니다.

Zonos JS 스니펫

1
2
3
4
5
6
7
Zonos.init({
  // ... other fields
  checkoutSettings: {
    // ... other fields
    placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)
  },
});
2

서버 측에서 장바구니 세부정보 안전하게 생성하기

고객에게 장바구니 세부정보를 표시하려면, Zonos API를 호출하여 장바구니를 생성하고, 그 장바구니 ID를 프론트엔드로 다시 전달하는 서버 측 함수를 생성해야 합니다. 이렇게 하면 장바구니 세부정보가 고객에게 조작될 수 있는 방식으로 노출되지 않도록 보장할 수 있습니다.

백엔드 API 호출은 비공식 GraphQL 자격 증명 토큰을 사용하며, 이는 Zonos JS 스크립트를 인증하는 데 사용하는 공개 토큰과 다릅니다. 이 토큰은 대시보드에서 검색할 수 있으며, API 호출 시 헤더로 전달해야 합니다.

createCart 변형은 장바구니 항목 스키마에 따라 형식이 지정된 항목 목록을 수락합니다.

서버 측 장바구니 생성 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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 통합에서 해당 엔드포인트를 호출하는 것을 제안합니다.

3

프론트엔드를 통해 Checkout에 장바구니 ID 전달하기

서버 측에서 장바구니를 생성한 후, 장바구니 ID를 Zonos JS 스크립트에 전달해야 합니다. 이는 Zonos.init 함수의 일부인 createCartId 콜백을 사용하여 수행할 수 있습니다. 그러면 Checkout이 열릴 때 Zonos에서 장바구니 세부정보를 안전하게 검색하여 장바구니의 변조를 방지합니다.

Zonos JS 스니펫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
    },
  },
});

이 페이지가 도움이 되었습니까?

데모 예약하기

질문 있으세요?

지원 받기

Zonos을 보세요

정책 및 계약
© 2025 Zonoszonos.com
이 페이지에서:
  • Zonos JS 스크립트 설치
  • Zonos Hello 설정
  • Zonos Checkout 설정하기