整合檢查清單
請按照此綜合檢查清單設定您的 Zonos Dashboard 帳戶,並將 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); } })();注意: 使用您的 Zonos Dashboard 中的實際值替換預留位置值(storeId、zonosApiKey、選擇器等)。
處理瀏覽器快取
我們建議將時間戳記或其他唯一識別碼附加到 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 函式來驗證它。用於驗證 Checkout 的公開 API 金鑰設計為可發佈,這表示它可以在前端程式碼中安全使用,而不會公開任何敏感資訊。
若要尋找您的商店 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 片段載入指令碼、樣式表、字型、影像並進行網路請求,因此阻止任何這些資源將破壞 Checkout 流程或 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 選擇器識別您網站上顯示貨幣資訊的元素。將這些選擇器傳入 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 中設定國家顯示規則
從 Dashboard 控制哪個買家國家看到 Hello,以及哪些國家出現在國家選擇器下拉清單中。導覽至 Dashboard -> Settings -> Hello,並找到國家顯示規則區段。
小工具可見度
控制哪個買家國家看到 Hello 小工具。選擇其中一個基本規則,然後使用 Always show 和 Never show 清單覆寫特定國家。
- All countries - Hello 支援的每個國家。
- Only shippable countries - 您從運送設定中運送到的國家。
- Always show - 即使基本規則排除這些國家,也始終出現的國家。
- Never show - 即使基本規則包含這些國家,也永遠不會出現的國家。

國家選擇器
使用相同的基本規則以及 Always show 和 Never show 覆寫來控制 Hello 國家選擇器下拉清單中出現哪些國家。

設定 Checkout
Checkout 負責允許客戶輸入其運送和帳單資訊、計算著陸成本、收集付款並完成訂單。
Checkout 將與 Hello 共用內容資料,例如訪客的位置、語言和貨幣。這可確保客戶在整個購物過程中的體驗是一致的。
您可以在 Dashboard 和 Zonos JS 指令碼中設定所有 Checkout 設定。如果您已在 Dashboard 中設定 Checkout,指令碼將載入這些設定並使用它們。如果您在 Zonos.init 函式的 checkoutSettings 屬性中指定任何值,指令碼將改為使用這些值。
在 JS 指令碼中設定「下單」按鈕
Zonos JS 指令碼將自動識別國際購物者並將其導向 Checkout 流程。但是,您需要設定平台上的「下單」按鈕,以在按一下時開啟 Checkout。這可以透過將 CSS 選擇器傳入 checkoutSettings.placeOrderButtonSelector 屬性的 Zonos.init 函式來完成。
如果您有多個可用於下單的按鈕,請確保為每個按鈕傳入選擇器。例如,#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 連結語法 — [link label] 後跟 (https://example.com) — 呈現為錨定標籤,因此購物者可以點擊瀏覽。文字中的純 https:// URL 也會自動連結。其他所有內容都呈現為純文本,因此字串中的 HTML 會被逸出而不是執行。
無論您傳入多少行,每個 Checkout 只顯示一個橫幅。
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.triggerCheckoutInternational() 函式在 Zonos 初始化後開啟 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 settings → Tracking 中啟用您想要的提供者(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 settings → Tracking 中啟用您想要的提供者。
- 將 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 下的 Success page type 中設定購後體驗。有三個選項可用:
- Show Zonos success page(預設值,建議)— Zonos 在下單後顯示內建感謝頁面。該頁面始終顯示,即使訂單無法匯入您的系統,因此購物者始終獲得確認。
- Redirect to a success page — Zonos 在簡短的「訂單完成」螢幕上等待,直到訂單建立,然後重新導向到您設定的成功 URL,並附加
zOrderNumber(以及舊版購物車的orderId)作為查詢參數。 - Close the checkout modal — 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 請求標題。
我可以在建立訂單時收到通知嗎?
是的。如果您想在建立訂單時接收通知,請在 Checkout settings 的 Email 區段中的 Dashboard 中,輸入應在建立、出貨或取消訂單時收到通知的團隊成員的電子郵件地址。
自訂整合
將端對端 Checkout 整合建立到您的自訂網站中。