통합 체크리스트
이 포괄적인 체크리스트에 따라 Zonos Dashboard 계정을 설정하고 맞춤 사이트 또는 플랫폼에 Zonos Checkout을 통합하세요.
Zonos 계정 생성
시작하려면 영업팀에 문의하여 계정을 생성하고 계약에 서명하세요. 계약에 서명하면 확인해야 하는 두 건의 소액 입금이 계좌에 입금됩니다.
Dashboard store ID와 함께(영업 담당자 CC) 이 소액 입금 금액을 accounting@zonos.com으로 이메일로 보내주세요.
확인되면 은행 세부 정보가 Dashboard -> Settings -> Billing에 표시됩니다.
Dashboard 및 Checkout 설정 구성
Zonos 계정을 생성한 후 Checkout이 스토어와 올바르게 작동하도록 Dashboard에서 설정을 구성해야 합니다. 이 섹션에서는 필수 Dashboard 구성을 모두 다룹니다.
지급 설정
Checkout에서 적시 지급을 받으려면 은행 계좌를 연결하세요. 지급은 결제 캡처 후 2일 이내에 매일 처리됩니다. 다음 단계를 따르세요.
- Dashboard -> Settings -> Checkout settings 로 이동합니다.
- Add bank account를 클릭합니다.
- Stripe portal로 이동하여 설정을 완료하고 다음 정보를 제공합니다.
- Bank account information.
- Company EIN.
- 25% 지분 회사 소유자의 Social Security Number. 필요한 이유에 대한 자세한 내용은 Stripe documentation을 참조하세요.
Note: 지급 일정을 업데이트해야 하면 support@zonos.com에 문의하세요.
허용 도메인 설정
Zonos JS script은 보안을 위해 허용 도메인 목록이 필요합니다. 승인되지 않은 사이트의 스크립트 로드를 방지하고 승인된 도메인에서만 실행되도록 합니다. 이 구성 없이는 스크립트가 권한 오류를 반환합니다.
To set this up:
- Dashboard -> Settings -> Checkout settings로 이동합니다.
- URLs에서 Checkout이 사용될 전체 도메인 및 하위 도메인을 추가합니다. 예를 들어 도메인이
example.com이면example.com과test.example.com을 추가해야 합니다.
브랜딩 설정 사용자 지정
Dashboard에서 브랜딩 설정을 구성하여 스토어의 모양과 느낌에 맞춥니다.
To do this, please follow these steps:
- Dashboard -> Settings -> Checkout settings -> Branding으로 이동합니다.
- 다음 설정을 구성합니다.
- Logo.
- Brand and accent color.
- Theme, Style, and Font.
브랜딩 설정에 대한 자세한 내용은 documentation을 참조하세요.
배송 운송사 연결
Checkout에서 배송을 견적하려면 Zonos 계정에 배송 운송사를 연결해야 합니다. Checkout에서 특정 배송 서비스 수준을 활성화할 수 있습니다.
To connect a shipping carrier, please follow these steps:
- Dashboard -> Settings -> Shipping -> Rates로 이동합니다.
- Add carrier를 클릭합니다.
- 운송사 설정 지침을 따릅니다.
운송사 계정 연결에 대한 자세한 내용은 documentation을 참조하세요.
배송 구역 설정
배송 구역을 사용하면 세계 각 지역에 사용 가능한 배송 운송사 및 서비스 수준을 구성할 수 있습니다.
To set up shipping zones, please follow these steps:
- Dashboard -> Settings -> Shipping -> Locations로 이동합니다.
- New zone을 클릭합니다.
- 구역 이름을 입력하고 배송할 국가를 선택합니다.
- 제공할 운송사 및 서비스 수준을 선택합니다.
배송 구역에 대한 자세한 내용은 documentation을 참조하세요.
대체 원산지 국가 및 HS code 설정
원산지 국가 및 HS code는 정확한 관세 및 세금 계산에 사용됩니다.
특정 원산지 국가 또는 HS code를 제공하지 않으면 Dashboard에 설정된 대체 값을 사용합니다.
대체 Country of Origin 및 HS code를 설정하려면:
Zonos JS snippet 설치
Zonos JS snippet은 사이트에서 글로벌 checkout 기능을 활성화하는 클라이언트 측 JavaScript 통합입니다. 이커머스 플랫폼과 Zonos 서비스 간의 다리 역할을 하며 다음을 처리합니다.
- Checkout Experience: checkout UI를 렌더링하고 결제를 처리합니다.
- Location Services: 방문자 위치를 감지하고 통화 변환을 관리합니다.
- Cart Integration: 기존 장바구니 및 주문 시스템과 연결합니다.
- Security: 도메인을 검증하고 API 요청을 인증합니다.
snippet은 사이트 성능에 영향을 주지 않도록 비동기로 로드됩니다. 스토어 API 자격 증명으로 초기화되며 모든 클라이언트 측 상호 작용을 안전하게 처리합니다. 구현은 비침투적으로 설계되어 기존 checkout 흐름에 최소한의 변경만 필요합니다.
아래는 Checkout 통합 시 참조할 스크립트 로드, 초기화 및 이벤트 처리가 포함된 완전한 예제입니다.
(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', }; }, : , }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();Note: placeholder 값(storeId, zonosApiKey, selectors 등)을 Zonos Dashboard의 실제 값으로 바꾸세요.
브라우저 캐싱 처리
브라우저가 스크립트를 캐시하지 않도록 URL에 timestamp 또는 다른 고유 식별자를 추가하는 것을 권장합니다. 항상 최신 버전의 스크립트가 로드됩니다. 완전한 예제의 10번째 줄에 표시됩니다.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Zonos JS snippet 인증
Zonos JS script을 로드한 후 public Zonos API key와 store ID를 Zonos.init 함수에 전달하여 인증해야 합니다. Checkout 인증에 사용되는 public API key는 게시 가능하도록 설계되어 민감한 정보를 노출하지 않고 프론트엔드 코드에서 안전하게 사용할 수 있습니다.
store ID와 API key를 찾으려면 Dashboard -> Settings -> Integrations로 이동하세요. 프론트엔드 코드용이 아니므로 Secret API key를 사용하지 마세요. 완전한 예제의 29~30번째 줄에 표시됩니다.
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});Content Security Policy(CSP) 업데이트
사이트에서 Content Security Policy를 설정하는 경우 아래 도메인을 해당 CSP 지시문에 추가하세요. 이 정책은 Checkout과 Hello 모두에 적용됩니다. Zonos snippet은 스크립트, 스타일시트, 글꼴, 이미지를 로드하고 네트워크 요청을 하므로 이러한 리소스를 차단하면 Checkout 흐름 또는 Hello 표시가 중단됩니다. style-src 목록은 style-src-elem에도 적용됩니다.
Note: 사이트에서 CSP header를 보내지 않으면 이 단계를 건너뛰세요. 페이지에 사용자 지정 CSP를 적용하는 판매자만 업데이트하면 됩니다.
cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comzonos-store-assets.s3.amazonaws.comjs.stripe.coma.stripecdn.comb.stripecdn.comc.stripecdn.comcheckout.stripe.comf.stripecdn.comhcaptcha.comhooks.stripe.comm.stripe.comm.stripe.networkpay.stripe.compayments.stripe.comq.stripe.comr.stripe.comHello 설정
Checkout 사용 시 Hello가 필요합니다.
Hello는 방문자의 위치, 언어 및 통화를 감지하고 적절한 정보를 표시합니다. 모든 Hello settings는 Dashboard 또는 Zonos JS script에서 구성할 수 있습니다. Dashboard에서 Hello를 이미 구성한 경우 스크립트가 해당 설정을 로드하여 사용합니다. Zonos.init 함수의 helloSettings 속성에 값을 지정하면 아래와 같이 스크립트가 해당 값을 대신 사용합니다.
JS Script에서 Hello 통화 변환 구성
Hello는 CSS selectors를 사용하여 사이트에서 통화 정보를 표시하는 요소를 식별합니다. 국제 쇼퍼의 올바른 통화를 감지하고 표시하도록 이러한 selectors를 Zonos.init 함수의 helloSettings.currencyElementSelector 속성에 전달하세요.
여기서는 valid CSS selector를 사용할 수 있습니다. 예: #price, .price로 여러 요소를 선택합니다. 완전한 예제의 23~24번째 줄에 표시됩니다.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: '.price', // Replace with your actual selector }, // ... other fields});페이지 로드 시 Hello 자동 열기
기본적으로 Hello는 방문자가 국기 버튼을 클릭할 때만 열립니다. 페이지 로드 시 Hello를 자동으로 열려면 Zonos script이 로드된 후 Zonos.openHelloDialog() 함수를 호출하세요. 완전한 예제의 25~26번째 줄에 표시됩니다.
Zonos.init({ // ... other fields helloSettings: { // ... other hello settings onInitSuccess: () => { Zonos.openHelloDialog(); }, },});Dashboard에서 국가 표시 규칙 구성
Dashboard에서 어떤 구매자 국가가 Hello를 보고 국가 선택기 드롭다운에 어떤 국가가 표시되는지 제어합니다. Dashboard -> Settings -> Hello로 이동하여 Country display rules 섹션을 찾으세요.
Widget visibility
어떤 구매자 국가가 Hello widget을 보는지 제어합니다. 기본 규칙 중 하나를 선택한 다음 Always show 및 Never show 목록을 사용하여 특정 국가를 재정의합니다.
- All countries - Hello가 지원하는 모든 국가.
- Only shippable countries - 배송 설정에서 배송하는 국가.
- Always show - 기본 규칙에서 제외되더라도 항상 표시되는 국가.
- Never show - 기본 규칙에 포함되더라도 표시되지 않는 국가.

Country selector
동일한 기본 규칙과 Always show 및 Never show 재정의를 사용하여 Hello country selector 드롭다운에 표시되는 국가를 제어합니다.

Checkout 설정
Checkout은 고객이 배송 및 청구 정보를 입력하고, Landed cost를 계산하고, 결제를 수집하고, 주문을 완료할 수 있도록 합니다.
Checkout은 방문자의 위치, 언어 및 통화와 같은 컨텍스트 데이터를 Hello와 공유합니다. 전체 쇼핑 프로세스에서 고객 경험이 일관되도록 보장합니다.
모든 Checkout 설정은 Dashboard와 Zonos JS script 모두에서 구성할 수 있습니다. Dashboard에서 Checkout을 이미 구성한 경우 스크립트가 해당 설정을 로드하여 사용합니다. Zonos.init 함수의 checkoutSettings 속성에 값을 지정하면 스크립트가 해당 값을 대신 사용합니다.
JS Script에서 'place order' 버튼 구성
Zonos JS script은 국제 쇼퍼를 자동으로 인식하고 Checkout 흐름으로 안내합니다. 그러나 클릭 시 Checkout이 열리도록 플랫폼의 'place order' 버튼을 구성해야 합니다. Zonos.init 함수의 checkoutSettings.placeOrderButtonSelector 속성에 CSS selector를 전달하면 됩니다.
주문에 사용할 수 있는 버튼이 여러 개 있으면 각 버튼에 대한 selector를 전달하세요. 예: #placeOrder, .place-order.
완전한 예제의 21번째 줄에 표시됩니다.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s) },});서버 측에서 장바구니 세부 정보 안전하게 생성
고객에게 장바구니 세부 정보를 표시하려면 Zonos API를 호출하여 장바구니를 생성하는 서버 측 함수를 만들고 cart ID를 프론트엔드로 다시 전달해야 합니다. 장바구니 세부 정보가 조작될 수 있는 방식으로 고객에게 노출되지 않도록 합니다.
백엔드 API 호출에는 Zonos JS script 인증에 사용하는 public token과 다른 secret GraphQL credential token을 사용합니다. 이 token은 Dashboard -> Settings -> Integrations에서 검색할 수 있습니다. secret token은 API 호출의 header로 전달해야 합니다.
cartCreate mutation은 cart item schema에 따라 형식이 지정되어야 하는 품목 목록을 허용합니다.
// Create new cart from serversideasync function createCart() { /** * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate * */ graphql = .({ : , : { : { : [ { : -, : , : , }, ], : [ { : , : , : , : , : , }, ], : [ { : , : , }, ], }, }, }); response = (, { : , : { : , : , }, : graphql, }); { data } = response.(); data..; }서버 측에 API endpoint를 만들고 다음 단계에서 설명하는 대로 프론트엔드 JS 통합에서 해당 endpoint를 호출하는 것을 권장합니다.
프론트엔드를 통해 Checkout에 cart ID 전달
서버 측에서 장바구니를 생성한 후 cart ID를 Zonos JS script에 전달해야 합니다. Zonos.init 함수의 일부인 createCartId callback을 사용하면 됩니다. Checkout이 열릴 때 Zonos에서 장바구니 세부 정보를 안전하게 검색하여 장바구니 조작을 방지합니다. 아래 코드 예제를 참조하세요.
createCartId의 값은 정적 값일 수 없으며 함수여야 합니다.
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 }, },});(Optional) Order total 아래 알림 표시
Checkout 내에 짧은 동적 메시지를 표시해야 하는 경우(예: 특정 제품이 장바구니에 있을 때 규제 공시) createCartId callback에서 customMessage 배열을 반환할 수 있습니다. 배열의 각 항목은 Order total 바로 아래 단일 info banner의 별도 줄에 렌더링됩니다.
Markdown link 구문 — [link label] 다음 (https://example.com) — 은 anchor tag로 렌더링되어 쇼퍼가 클릭할 수 있습니다. 텍스트의 일반 https:// URL도 자동으로 링크됩니다. 나머지는 일반 텍스트로 렌더링되므로 문자열의 HTML은 실행되지 않고 이스케이프됩니다.
전달하는 줄 수와 관계없이 Checkout당 하나의 banner만 표시됩니다.
Zonos.init({ // ... other fields checkoutSettings: { createCartId: async () => { const response = await fetch( 'https://api.merchant.com/api/get-zonos-cart', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }, ); const json = await response.json(); return { cartId: json.id, // Each item is rendered on a new line of the same info banner. // Markdown links `[text](url)` become `<a>` tags. customMessage: [ 'Some items in your cart are subject to California regulations.', 'Please review the required notice [here](https://oag.ca.gov/prop65).', ], }; }, },});Note: 메시지 텍스트는 일반 텍스트로 렌더링됩니다. 문자열의 HTML tags는 이스케이프되므로 Markdown link 구문만 해석됩니다. 장바구니 내용에 따라 서버 측에서
customMessage포함 여부를 결정하여 관련 있을 때만 banner가 표시되도록 하세요.
(Optional) Zonos checkout 프로그래밍 방식 트리거
사용자 지정 로직이 있고 Zonos checkout을 프로그래밍 방식으로 트리거해야 하는 경우 Zonos 초기화 후 Zonos.triggerCheckoutInternational() 함수를 사용하여 Zonos checkout 창을 열 수 있습니다. 위 Zonos.init에 정의된 createCartId callback을 호출하고 Zonos checkout 창을 엽니다.
// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")const domesticCountry = 'US';document.querySelector('.country-select').addEventListener('change', e => { const country = e.target.value; if (country !== domesticCountry) { Zonos.triggerCheckoutInternational(); }});(Optional) Zonos checkout 항상 트리거 selector
국내 및 국제 쇼퍼의 checkout 프로세스를 분리하려면 사이트에 International checkout 버튼을 추가할 수 있습니다. Zonos.triggerCheckoutInternational로 Zonos Checkout을 수동으로 트리거하는 대신 적절한 selector로 Zonos.init을 구성할 수 있습니다. Zonos가 초기화될 때까지 selector가 비활성화되며 버튼을 클릭하면 Zonos checkout이 자동으로 트리거됩니다. Zonos.init에 정의된 createCartId callback을 호출하고 Zonos checkout 창을 엽니다.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout },});(Optional) GA4 또는 Facebook Pixel로 checkout 퍼널 추적
Zonos Checkout은 전체 checkout 퍼널을 기존 analytics 도구로 전달할 수 있습니다. 각 단계에서 Zonos는 다음을 발생시킵니다.
- GA4에 원본
zonos-checkout-...event(gtag('event', ...)통해) 및 Meta에 custom event(fbq('trackCustom', ...)통해). - 해당하는 경우 Meta에 일치하는 standard event —
InitiateCheckout,AddPaymentInfo,Purchase— Meta의 기본 최적화 및 전환 보고가 즉시 작동합니다.
event가 제공업체에 도달하는 방식은 Checkout이 사이트에 렌더링되는 방식에 따라 다릅니다. 통합과 일치하는 경로를 선택하세요.
Native integration(Checkout이 사이트에 직접 렌더링)
<zonos-checkout> custom element가 자체 페이지에 마운트되면(위에서 설명한 Zonos JS script 통합의 기본값) 페이지 자체의 window.gtag와 window.fbq가 이미 범위 내에 있습니다. Zonos가 직접 호출하므로 relay 또는 pixel ID handoff가 필요하지 않습니다.
Setup:
- 페이지에 이미 GA4 base tag 및/또는 Meta Pixel base code가 로드되어 있는지 확인하세요(사이트의 다른 페이지를 추적하는 것과 동일).
- Zonos dashboard의 Checkout settings → Tracking에서 원하는 제공업체(Google Analytics, Facebook Pixel 또는 둘 다)를 활성화합니다.
끝입니다. relay script, customHTML, 추가 ID 전달 불필요 — Zonos가 페이지의 gtag / fbq를 감지하고 event를 직접 발생시킵니다.
Iframe integration(iglobalstores.com의 legacy Checkout iframe)
Checkout이 다른 origin의 iframe에 호스팅되면 페이지의 gtag / fbq에 직접 접근할 수 없습니다. Zonos는 Checkout iframe의 postMessage event를 수신하고 페이지의 제공업체로 전달하는 작은 relay script — analyticsRelayOnInit.js — 를 게시합니다. 단일 relay가 GA4와 Facebook Pixel 모두를 동시에 처리합니다.
Setup:
- Zonos dashboard의 Checkout settings → Tracking에서 원하는 제공업체를 활성화합니다.
- Checkout iframe을 호스팅하는 페이지의
<head>에 GA4 base tag 및/또는 Meta Pixel base code를 추가합니다. - provider tags 다음에 relay script를 추가합니다.
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- relay가 어떤 property/pixel에 대해 발생시킬지 알 수 있도록 Checkout
customHTML을 통해 해당 ID를 전달합니다.
window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX'; window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';단계별 iframe 지침, 전체 event reference(purchase / Purchase payload mapping 포함) 및 디버깅 팁은 다음을 참조하세요.
Dashboard에 주문 추적 및 상태 동기화
시스템과 Zonos Dashboard 간 주문을 동기화하려면 다음 API calls 및 webhooks를 구현하세요.
Required Mutations
| Mutation↕ | 설명↕ |
|---|---|
orderUpdateAccountOrderNumber | 네이티브 account number를 Dashboard와 동기화합니다. Docs → |
orderAddTrackingNumber | Dashboard에서 라벨을 인쇄하지 않는 경우에만 필요합니다. Dashboard에 추적이 표시되어 Zonos가 Landed cost 계산을 보장할 수 있도록 합니다. Docs → |
Required Webhooks
통합 테스트
Checkout 통합을 라이브하기 전에 원활한 고객 경험을 위해 통합의 모든 측면을 철저히 테스트하는 것이 중요합니다. checkout 흐름, 결제 처리, 주문 생성 및 webhook 기능 테스트가 포함됩니다.
테스트 가이드를 따라 통합이 올바르게 작동하는지 확인하고 프로덕션 출시 전 문제를 식별하고 수정하세요.
일반적인 질문
통합 프로세스에 대한 일반적인 질문입니다.
Zonos는 주문 확인을 어떻게 처리하나요?
Success page type 아래 Dashboard -> Settings -> Checkout settings에서 구매 후 경험을 구성합니다. 세 가지 옵션이 있습니다.
- Show Zonos success page(기본값, 권장) — 주문 후 Zonos가 내장 thank you page를 표시합니다. 주문이 시스템으로 가져와지지 않아도 페이지가 항상 표시되어 쇼퍼는 항상 확인을 받습니다.
- Redirect to a success page — Zonos가 주문이 생성될 때까지 짧은 "Order complete" 화면에서 대기한 다음 구성된 success URL로
zOrderNumber(legacy carts의 경우orderId)를 query params로 추가하여 리디렉션합니다. - Close the checkout modal — 결제가 캡처되면 Zonos가 modal을 닫습니다. success URL도 구성하면 Stripe가 결제를 수집한 직후 — 주문 생성을 기다리지 않고 — 해당 URL로 리디렉션하고
zonosCheckoutSessionId를 query param으로 추가합니다. 자체 success page로 가장 빠르게 전환하려면 이 옵션을 사용하세요.
zonosCheckoutSessionId에서 주문 조회
Close the checkout modal과 redirect URL을 사용하면 리디렉션 후 checkout session에 주문이 연결되는 데 몇 초가 걸릴 수 있습니다. URL에서 zonosCheckoutSessionId를 읽고 secret credential token을 사용하여 서버에서 checkoutSession GraphQL query를 폴링하여 주문이 준비될 때까지 기다리세요. 브라우저에서 호출하지 마세요 — secret credential token은 서버 측에 유지해야 합니다.
query getCheckoutSession($id: String!) { checkoutSession(id: $id) { order { id } }}Dashboard -> Settings -> Integrations의 secret credential token을 credentialToken request header로 전달하여 https://api.zonos.com/graphql에 쿼리를 보냅니다.
주문이 생성될 때 알림을 받을 수 있나요?
예. 주문 생성 시 알림을 받으려면 Checkout settings의 Email 섹션에서 주문 생성, 배송 또는 취소 시 알림을 받을 팀 구성원의 이메일 주소를 입력할 수 있습니다.
맞춤 통합
맞춤 사이트에 end-to-end Checkout 통합을 구축합니다.