整合檢查清單
按照本綜合檢查清單設定您的 Zonos 控制板帳戶,並將 Zonos Checkout 整合至您的自訂網站或平台。
建立 Zonos 帳戶
若要開始,請聯絡我們的銷售團隊以建立帳戶並簽署協議。簽署協議後,您將在帳戶中收到兩筆小額存款,需要驗證。
請將這些小額存款金額電郵至 accounting@zonos.com,並附上您的 Dashboard 商店 ID(抄送給您的銷售代表)。
驗證後,您的銀行詳細資訊將顯示在 Dashboard -> Settings -> Billing。
設定 Dashboard 和 Checkout 設定
建立 Zonos 帳戶後,您需要在 Dashboard 中設定設定,以確保 Checkout 正常運作。本部分涵蓋所有必要的 Dashboard 設定。
設定支付
連接銀行帳戶以從 Checkout 接收及時的支付。支付在捕獲付款後的 2 天延遲內每日處理。若要執行此操作,請按照以下步驟進行:
- 導航至 Dashboard -> Settings -> Checkout settings 。
- 按一下 Add bank account
- 您將被帶至 Stripe 入口網站以完成設定並提供以下資訊:
- 銀行帳戶資訊。
- 公司 EIN。
- 持有 25% 公司股份的人的社會保險號碼。如需詳細資訊,請參閱 Stripe 的文件。
注意: 如果您需要更新支付時程表,請聯絡 support@zonos.com
設定允許的網域
Zonos JS 指令碼出於安全目的需要允許網域清單。這可防止未經授權的網站載入指令碼,並確保它僅在您核准的網域上執行。沒有此設定,指令碼將傳回權限錯誤。
若要設定此項目:
- 導航至 Dashboard -> Settings -> Checkout settings
- 在 URLs 下,新增您的完整網域及將使用 Checkout 的任何子網域。例如,如果您的網域是
example.com,您應該新增example.com和test.example.com。
自訂品牌設定
在 Dashboard 中設定您的品牌設定以符合您商店的外觀和風格。
若要執行此操作,請按照以下步驟進行:
- 導航至 Dashboard -> Settings -> Checkout settings -> Branding
- 設定以下設定:
- 標誌。
- 品牌和重點色彩。
- 主題、樣式和字型。
如需品牌設定的詳細資訊,請參閱我們的文件。
連接運輸承運商
若要在結帳時報價運輸,您需要將運輸承運商連接到您的 Zonos 帳戶。這將允許您在結帳時啟用特定的運輸服務級別。
若要連接運輸承運商,請按照以下步驟進行:
- 導航至 Dashboard -> Settings -> Shipping -> Rates
- 按一下 Add carrier
- 按照承運商設定說明進行。
如需連接承運商帳戶的詳細資訊,請參閱我們的文件。
設定運輸區域
運輸區域允許您設定世界不同地區可用的運輸承運商和服務級別。
若要設定運輸區域,請按照以下步驟進行:
- 導航至 Dashboard -> Settings -> Shipping -> Locations
- 按一下 New zone
- 輸入區域名稱並選擇要運送的國家。
- 選擇您要提供的承運商和服務級別。
如需運輸區域的詳細資訊,請參閱我們的文件。
設定後備原產地國家和 HS 代碼
原產地國家和 HS 代碼用於計算準確的關稅和稅費。
如果您未提供特定的原產地國家或 HS 代碼,我們將使用在 Dashboard 中設定的後備。
若要設定後備原產地國家和 HS 代碼:
安裝 Zonos JS 片段
Zonos JS 片段是用戶端 JavaScript 整合,可在您的網站上啟用全球結帳功能。它充當您的電子商務平台和 Zonos 服務之間的橋樑,處理以下事項:
- 結帳體驗:呈現結帳 UI 並處理付款。
- 位置服務:檢測訪客位置並管理貨幣轉換。
- 購物車整合:連接到您現有的購物車和訂單系統。
- 安全性:驗證網域並驗證 API 要求。
該片段以非同步方式載入,以防止對您網站性能的任何影響。它使用您商店的 API 認證進行初始化,並安全地處理所有用戶端交互。該實現被設計為非侵入式,需要對現有結帳流程進行最少的更改。
以下是一個完整示例,包括指令碼載入、初始化和事件處理,可在整合 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', }; }, placeOrderButtonSelector: '#placeOrder, .place-order', // Replace with your actual selector(s) }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();注意: 將佔位符值(storeId、zonosApiKey、選擇器等)替換為您的 Zonos Dashboard 中的實際值。
處理瀏覽器快取
我們建議將時間戳記或其他唯一標識符附加到 URL,以確保指令碼不被瀏覽器快取。這將確保始終載入最新版本的指令碼。這在完整示例的第 10 行中顯示。
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;驗證 Zonos JS 片段
載入 Zonos JS 指令碼後,您需要透過將公開 Zonos API 金鑰和商店 ID 傳遞到 Zonos.init 函數來驗證它。公開 API 金鑰用於驗證 Checkout 被設計為可發佈的,這意味著它可以安全地用於前端程式碼,而無需暴露任何敏感資訊。
若要找到您的商店 ID 和 API 金鑰,請導航至 Dashboard -> Settings -> Integrations。確保您不要使用秘密 API 金鑰,因為它不適合在前端程式碼中使用。這在完整示例的第 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});更新您的內容安全政策 (CSP)
如果您的網站設定了內容安全政策,請將下面的網域新增到相應的 CSP 指令。此政策適用於 Checkout 和 Hello — Zonos 片段載入指令碼、樣式表、字型、影像,並進行網路要求,因此阻止任何這些資源將中斷結帳流程或 Hello 顯示。style-src 清單也適用於 style-src-elem。
注意: 如果您的網站未傳送 CSP 標頭,請跳過此步驟。只有強制自訂 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.com設定 Hello
使用 Checkout 時需要 Hello。
Hello 負責檢測訪客的位置、語言和貨幣,並向其顯示適當的資訊。您可以在 Dashboard 或 Zonos JS 指令碼中設定所有 Hello 設定。如果您已在 Dashboard 中設定了 Hello,指令碼將載入這些設定並使用它們。如果您在 Zonos.init 函數的 helloSettings 屬性中指定任何值,如下所示,指令碼將使用這些值。
在 JS 指令碼中設定 Hello 中的貨幣轉換
Hello 使用 CSS 選擇器來識別您網站上顯示貨幣資訊的元素。將這些選擇器傳遞到 Zonos.init 函數的 helloSettings.currencyElementSelector 屬性,以便 Hello 可以檢測並為國際購物者顯示正確的貨幣。
您可以在此處使用任何有效的 CSS 選擇器,例如 #price, .price 以選擇多個不同的元素。這在完整示例的第 23 和 24 行中顯示。
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: '.price', // Replace with your actual selector }, // ... other fields});在頁面載入時自動開啟 Hello
根據預設,Hello 將僅在訪客按一下旗標按鈕時開啟。如果您想在頁面載入時自動開啟 Hello,您可以在 Zonos 指令碼載入後呼叫 Zonos.openHelloDialog() 函數。這在完整示例的第 25 和 26 行中顯示。
Zonos.init({ // ... other fields helloSettings: { // ... other hello settings onInitSuccess: () => { Zonos.openHelloDialog(); }, },});在 Dashboard 中設定國家顯示規則
控制哪些買方國家/地區看到 Hello 以及哪些國家/地區出現在國家選擇器下拉清單中(來自 Dashboard)。導航至 Dashboard -> Settings -> Hello 並找到國家顯示規則部分。
小工具可見性
控制哪些買方國家/地區看到 Hello 小工具。選擇其中一個基本規則,然後使用始終顯示和永不顯示清單來覆蓋特定國家。
- 所有國家 - Hello 支援的每個國家。
- 僅可運送的國家 - 您從運輸設定運送的國家。
- 始終顯示 - 始終出現的國家,即使基本規則將它們排除。
- 永不顯示 - 即使基本規則包含它們,也永遠不會出現的國家。

國家選擇器
控制 Hello 國家選擇器下拉清單中出現的國家,使用相同的基本規則加上始終顯示和永不顯示覆蓋。

設定 Checkout
Checkout 負責讓客戶輸入他們的運輸和帳單資訊、計算著陸成本、收取付款並完成訂單。
Checkout 將與 Hello 共享情境資料,例如訪客的位置、語言和貨幣。這確保客戶的體驗在整個購物過程中是一致的。
您可以在 Dashboard 和 Zonos JS 指令碼中設定所有 Checkout 設定。如果您已在 Dashboard 中設定了 Checkout,指令碼將載入這些設定並使用它們。如果您在 Zonos.init 函數的 checkoutSettings 屬性中指定任何值,指令碼將使用這些值。
在 JS 指令碼中設定「下訂單」按鈕
Zonos JS 指令碼將自動識別國際購物者並將他們導向結帳流程。但是,您需要設定您平台上的「下訂單」按鈕以在按一下時開啟 Checkout。這可以透過將 CSS 選擇器傳遞到 Zonos.init 函數的 checkoutSettings.placeOrderButtonSelector 屬性來完成。
如果您有多個可用於下訂單的按鈕,請務必為每個按鈕傳遞選擇器。例如,#placeOrder, .place-order。
這在完整示例的第 21 行中顯示。
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s) },});安全地在伺服器端建立購物車詳細資訊
為了向客戶顯示購物車詳細資訊,您需要建立一個伺服器端函數,該函數將呼叫 Zonos API 以建立購物車,然後將該購物車 ID 傳回您的前端。這將確保購物車詳細資訊不會以可被操控的方式暴露給客戶。
您的後端 API 呼叫將使用秘密 GraphQL 認證令牌,該令牌不同於您用於驗證 Zonos JS 指令碼的公開令牌。此令牌可在 Dashboard -> Settings -> Integrations 中檢索。秘密令牌需要作為標頭在您的 API 呼叫中傳遞。
cartCreate 變異接受項目清單,應根據購物車項目架構進行格式化。
// Create new cart from serversideasync 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 } }}`, : { : { : [ { : -, : , : , }, ], : [ { : , : , : , : , : , }, ], : [ { : , : , }, ], }, }, }); response = (, { : , : { : , : , }, : graphql, }); { data } = response.(); data..; }我們建議在您的伺服器端建立 API 端點,然後從您的前端 JS 整合中呼叫該端點,這在下一步中有詳細說明。
透過前端將購物車 ID 傳遞至 Checkout
在伺服器端建立購物車後,您需要將購物車 ID 傳遞至 Zonos JS 指令碼。這可以使用 Zonos.init 函數的一部分的 createCartId 回呼來完成。然後 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 }, },});(可選)在訂單總額下顯示通知
如果您需要在 Checkout 中顯示一條簡短的動態訊息(例如,當購物車中有特定產品時顯示監管披露),您可以從 createCartId 回呼傳回 customMessage 陣列。陣列中的每個條目都呈現在單個資訊橫幅的自己的行上,直接位於訂單總額下方。
Markdown 連結語法 — [連結標籤] 後跟 (https://example.com) — 呈現為錨點標籤,因此購物者可以點進。文本中的純 https:// URL 也會自動連結。其他所有內容都呈現為純文本,因此字符串中的 HTML 會被轉義而不是執行。
無論您傳遞多少行,每次結帳都只顯示一個橫幅。
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).', ], }; }, },});注意: 訊息文本呈現為純文本 — 字符串中的 HTML 標籤被轉義,因此只解釋 Markdown 連結語法。根據購物車內容決定是否在伺服器端包含
customMessage,以便橫幅僅在相關時出現。
(可選)以程式設計方式觸發 Zonos 結帳
如果您有自訂邏輯並需要以程式設計方式觸發 Zonos 結帳,您可以在 Zonos 初始化後使用 Zonos.triggerCheckoutInternational() 函數開啟 Zonos 結帳視窗。這將調用上面在 Zonos.init 中定義的 createCartId 回呼並開啟 Zonos 結帳視窗。
// 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(); }});(可選)始終觸發 Zonos 結帳選擇器
如果您想分離國內和國際購物者的結帳流程,您可以將「國際結帳」按鈕新增到您的網站。您可以使用適當的選擇器設定 Zonos.init,而不是使用 Zonos.triggerCheckoutInternational 手動觸發 Zonos Checkout。按一下按鈕時,選擇器將被禁用,直到 Zonos 初始化,自動觸發 Zonos 結帳。這將調用上面在 Zonos.init 中定義的 createCartId 回呼並開啟 Zonos 結帳視窗。
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 },});(可選)使用 GA4 或 Facebook Pixel 追蹤結帳漏斗
Zonos Checkout 可以將完整的結帳漏斗轉發到您現有的分析工具。對於每一步,Zonos 發出:
- 原始
zonos-checkout-...事件至 GA4(透過gtag('event', ...))和至 Meta 作為自訂事件(透過fbq('trackCustom', ...))。 - 當存在時匹配的標準事件至 Meta —
InitiateCheckout、AddPaymentInfo和Purchase— 以便 Meta 的內建最佳化和轉換報告開箱即用。
事件如何到達您的提供者取決於 Checkout 如何在您的網站上呈現。選擇與您的整合相符的路徑。
原生整合(Checkout 直接在您的網站上呈現)
當 <zonos-checkout> 自訂元素裝載到您自己的頁面上時(Zonos JS 指令碼整合的預設值如上所述),頁面自己的 window.gtag 和 window.fbq 已在範圍內。Zonos 直接呼叫它們 — 不需要中繼或像素 ID 握手。
設定:
- 確保您的頁面已經載入了 GA4 基本標籤和/或 Meta Pixel 基本程式碼(與您在任何其他頁面上追蹤的方式相同)。
- 在 Zonos 儀表板中的 Checkout 設定 → 追蹤 下啟用您想要的提供者(Google Analytics、Facebook Pixel 或兩者)。
就是這樣。沒有中繼指令碼,沒有 customHTML,沒有額外 ID 要傳遞 — Zonos 檢測頁面上的 gtag / fbq 並直接觸發事件。
Iframe 整合(iglobalstores.com 上的舊版 Checkout iframe)
當 Checkout 裝載在不同來源的 iframe 中時,它無法直接到達您的頁面的 gtag / fbq。Zonos 發佈了一個小型中繼指令碼 — analyticsRelayOnInit.js — 它監聽來自 Checkout iframe 的 postMessage 事件,並將它們轉發給您頁面上的提供者。單個中繼處理GA4 和 Facebook Pixel 同時進行。
設定:
- 在 Zonos 儀表板中的 Checkout 設定 → 追蹤 下啟用您想要的提供者。
- 將 GA4 基本標籤和/或 Meta Pixel 基本程式碼新增到裝載 Checkout iframe 的頁面的
<head>。 - 在提供者標籤之後新增中繼指令碼:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- 透過您的 Checkout
customHTML傳遞相應的 ID,以便中繼知道要針對哪個屬性/像素觸發:
window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX'; window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';如需逐步 iframe 說明、完整事件參考(包括 purchase / Purchase 裝載映射)和偵錯提示,請參閱:
將訂單追蹤和狀態同步至 Dashboard
若要在您的系統和 Zonos Dashboard 之間同步訂單,請實現這些 API 呼叫和 Webhook:
必需的變異
| 變異↕ | 說明↕ |
|---|---|
orderUpdateAccountOrderNumber | 將您的原生帳戶號碼與 Dashboard 同步。文件 → |
orderAddTrackingNumber | 僅在您不在 Dashboard 中列印標籤時需要。確保追蹤顯示在 Dashboard 中,以便 Zonos 可以保證您的著陸成本計算。文件 → |
必需的 Webhook
測試您的整合
在您的 Checkout 整合上線之前,重要的是徹底測試整合的所有方面,以確保順暢的客戶體驗。這包括測試結帳流程、付款處理、訂單建立和 Webhook 功能。
遵循我們的測試指南以驗證您的整合工作正常,並在啟動到生產環境前識別並修復任何問題。
常見問題
以下是有關整合流程的常見問題。
Zonos 如何處理訂單確認?
在 Dashboard -> Settings -> Checkout settings 下的成功頁面類型中設定購後體驗。可用三個選項:
- 顯示 Zonos 成功頁面(預設值,建議)— Zonos 在訂單下達後顯示內建的感謝頁面。該頁面始終顯示,即使訂單未能匯入您的系統,因此購物者始終獲得確認。
- 重新導向到成功頁面 — Zonos 在簡短的「訂單完成」螢幕上等待,直到訂單建立,然後重新導向到您設定的成功 URL,並將
zOrderNumber(以及orderId用於舊版購物車)附加為查詢參數。 - 關閉結帳模態 — Zonos 在捕獲付款後關閉其模態。如果您還設定了成功 URL,Zonos 會在 Stripe 收集付款後立即重新導向到該 URL — 不等待訂單建立 — 並將
zonosCheckoutSessionId附加為查詢參數。當您想要最快交接回您自己的成功頁面時,請使用此選項。
從 zonosCheckoutSessionId 查詢訂單
當您使用關閉結帳模態搭配重新導向 URL 時,訂單在重新導向後可能需要幾秒鐘才能附加到結帳會話。從 URL 讀取 zonosCheckoutSessionId 並使用您的秘密認證令牌輪詢 checkoutSession GraphQL 查詢,直到訂單準備就緒。絕不要從瀏覽器呼叫此項目 — 秘密認證令牌必須保持伺服器端。
query getCheckoutSession($id: String!) { checkoutSession(id: $id) { order { id } }}將查詢傳送至 https://api.zonos.com/graphql,並將您的秘密認證令牌(來自 Dashboard -> Settings -> Integrations)作為 credentialToken 要求標頭傳遞。
訂單建立時可以通知我嗎?
可以。如果您想在訂單建立時收到通知,在 Dashboard 的 Checkout settings 的電郵部分中,您可以輸入應在訂單建立、運送或取消時獲得通知的團隊成員的電郵地址。
自訂整合
為您的自訂網站建立端到端的 Checkout 整合。