如果您有自訂邏輯並需要以程式設計方式觸發 Zonos 結帳,您可以在 Zonos 初始化後使用 Zonos.triggerCheckoutInternational() 函數開啟 Zonos 結帳視窗。這將調用上面在 Zonos.init 中定義的 createCartId 回呼並開啟 Zonos 結帳視窗。
1// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")
2const domesticCountry = 'US';
3document.querySelector('.country-select').addEventListener('change', e => {
如果您想分離國內和國際購物者的結帳流程,您可以將「國際結帳」按鈕新增到您的網站。您可以使用適當的選擇器設定 Zonos.init,而不是使用 Zonos.triggerCheckoutInternational 手動觸發 Zonos Checkout。按一下按鈕時,選擇器將被禁用,直到 Zonos 初始化,自動觸發 Zonos 結帳。這將調用上面在 Zonos.init 中定義的 createCartId 回呼並開啟 Zonos 結帳視窗。
1Zonos.init({
2// ... other fields
3checkoutSettings: {
4// ... other fields
5alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout
自訂整合
自訂整合
為您的自訂網站建立端到端的 Checkout 整合。
整合檢查清單
按照本綜合檢查清單設定您的 Zonos 控制板帳戶,並將 Zonos Checkout 整合至您的自訂網站或平台。
建立 Zonos 帳戶
若要開始,請聯絡我們的銷售團隊以建立帳戶並簽署協議。簽署協議後,您將在帳戶中收到兩筆小額存款,需要驗證。
請將這些小額存款金額電郵至 accounting@zonos.com,並附上您的 Dashboard 商店 ID(抄送給您的銷售代表)。
驗證後,您的銀行詳細資訊將顯示在 Dashboard -> Settings -> Billing。
設定 Dashboard 和 Checkout 設定
建立 Zonos 帳戶後,您需要在 Dashboard 中設定設定,以確保 Checkout 正常運作。本部分涵蓋所有必要的 Dashboard 設定。
設定支付
連接銀行帳戶以從 Checkout 接收及時的支付。支付在捕獲付款後的 2 天延遲內每日處理。若要執行此操作,請按照以下步驟進行:
設定允許的網域
Zonos JS 指令碼出於安全目的需要允許網域清單。這可防止未經授權的網站載入指令碼,並確保它僅在您核准的網域上執行。沒有此設定,指令碼將傳回權限錯誤。
若要設定此項目:
example.com,您應該新增example.com和test.example.com。自訂品牌設定
在 Dashboard 中設定您的品牌設定以符合您商店的外觀和風格。
若要執行此操作,請按照以下步驟進行:
如需品牌設定的詳細資訊,請參閱我們的文件。
連接運輸承運商
若要在結帳時報價運輸,您需要將運輸承運商連接到您的 Zonos 帳戶。這將允許您在結帳時啟用特定的運輸服務級別。
若要連接運輸承運商,請按照以下步驟進行:
如需連接承運商帳戶的詳細資訊,請參閱我們的文件。
設定運輸區域
運輸區域允許您設定世界不同地區可用的運輸承運商和服務級別。
若要設定運輸區域,請按照以下步驟進行:
如需運輸區域的詳細資訊,請參閱我們的文件。
設定後備原產地國家和 HS 代碼
原產地國家和 HS 代碼用於計算準確的關稅和稅費。
如果您未提供特定的原產地國家或 HS 代碼,我們將使用在 Dashboard 中設定的後備。
若要設定後備原產地國家和 HS 代碼:
安裝 Zonos JS 片段
Zonos JS 片段是用戶端 JavaScript 整合,可在您的網站上啟用全球結帳功能。它充當您的電子商務平台和 Zonos 服務之間的橋樑,處理以下事項:
該片段以非同步方式載入,以防止對您網站性能的任何影響。它使用您商店的 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 logicreturn {cartId: 'cart_73e707c0-c161-4c37-9581-4da1b1115777',};},placeOrderButtonSelector: '#placeOrder, .place-order', // Replace with your actual selector(s)},: {: ,: {.();},},: ,: ,});});..(script);}})();處理瀏覽器快取
我們建議將時間戳記或其他唯一標識符附加到 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 fieldszonosApiKey: '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。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 fieldshelloSettings: {currencyElementSelector: '.price', // Replace with your actual selector},// ... other fields});在頁面載入時自動開啟 Hello
根據預設,Hello 將僅在訪客按一下旗標按鈕時開啟。如果您想在頁面載入時自動開啟 Hello,您可以在 Zonos 指令碼載入後呼叫
Zonos.openHelloDialog()函數。這在完整示例的第 25 和 26 行中顯示。Zonos.init({// ... other fieldshelloSettings: {// ... other hello settingsonInitSuccess: () => {Zonos.openHelloDialog();},},});在 Dashboard 中設定國家顯示規則
控制哪些買方國家/地區看到 Hello 以及哪些國家/地區出現在國家選擇器下拉清單中(來自 Dashboard)。導航至 Dashboard -> Settings -> Hello 並找到國家顯示規則部分。
小工具可見性
控制哪些買方國家/地區看到 Hello 小工具。選擇其中一個基本規則,然後使用始終顯示和永不顯示清單來覆蓋特定國家。
國家選擇器
控制 Hello 國家選擇器下拉清單中出現的國家,使用相同的基本規則加上始終顯示和永不顯示覆蓋。
helloSettings上的showForCountries和showCountryList屬性已棄用。改為在 Dashboard 中設定國家顯示規則 — 在那裡設定的值將由 Zonos JS 指令碼自動載入。設定 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 fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#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) {idadjustments {amountcurrencyCodedescriptionproductIdskutype}items {idnameamountcurrencyCodequantityskudescriptionmetadata {keyvalue}}metadata {keyvalue}}}`,: {: {: [{: -,: ,: ,},],: [{: ,: ,: ,: ,: ,},],: [{: ,: ,},],},},});response = (, {: ,: {: ,: ,},: graphql,});{ data } = response.();data..;}我們建議在您的伺服器端建立 API 端點,然後從您的前端 JS 整合中呼叫該端點,這在下一步中有詳細說明。
透過前端將購物車 ID 傳遞至 Checkout
在伺服器端建立購物車後,您需要將購物車 ID 傳遞至 Zonos JS 指令碼。這可以使用
Zonos.init函數的一部分的createCartId回呼來完成。然後 Checkout 將安全地從 Zonos 檢索購物車詳細資訊,防止任何篡改購物車。請參閱下面的程式碼範例。createCartId的值不能是靜態值,它必須是一個函數。Zonos.init({// ... other fieldscheckoutSettings: {// 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 fieldscheckoutSettings: {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).',],};},},});(可選)以程式設計方式觸發 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 fieldscheckoutSettings: {// ... other fieldsalwaysTriggerInternationalCheckoutSelector: '#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', ...))。InitiateCheckout、AddPaymentInfo和Purchase— 以便 Meta 的內建最佳化和轉換報告開箱即用。事件如何到達您的提供者取決於 Checkout 如何在您的網站上呈現。選擇與您的整合相符的路徑。
原生整合(Checkout 直接在您的網站上呈現)
當
<zonos-checkout>自訂元素裝載到您自己的頁面上時(Zonos JS 指令碼整合的預設值如上所述),頁面自己的window.gtag和window.fbq已在範圍內。Zonos 直接呼叫它們 — 不需要中繼或像素 ID 握手。設定:
就是這樣。沒有中繼指令碼,沒有
customHTML,沒有額外 ID 要傳遞 — Zonos 檢測頁面上的gtag/fbq並直接觸發事件。Iframe 整合(
iglobalstores.com上的舊版 Checkout iframe)當 Checkout 裝載在不同來源的 iframe 中時,它無法直接到達您的頁面的
gtag/fbq。Zonos 發佈了一個小型中繼指令碼 —analyticsRelayOnInit.js— 它監聽來自 Checkout iframe 的 postMessage 事件,並將它們轉發給您頁面上的提供者。單個中繼處理GA4 和 Facebook Pixel 同時進行。設定:
<head>。asyncsrc="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">customHTML傳遞相應的 ID,以便中繼知道要針對哪個屬性/像素觸發:window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';如需逐步 iframe 說明、完整事件參考(包括
purchase/Purchase裝載映射)和偵錯提示,請參閱:將訂單追蹤和狀態同步至 Dashboard
若要在您的系統和 Zonos Dashboard 之間同步訂單,請實現這些 API 呼叫和 Webhook:
必需的變異
orderUpdateAccountOrderNumberorderAddTrackingNumber必需的 Webhook
ORDER_CREATEDORDER_STATUS_CHANGED測試您的整合
在您的 Checkout 整合上線之前,重要的是徹底測試整合的所有方面,以確保順暢的客戶體驗。這包括測試結帳流程、付款處理、訂單建立和 Webhook 功能。
遵循我們的測試指南以驗證您的整合工作正常,並在啟動到生產環境前識別並修復任何問題。
常見問題
以下是有關整合流程的常見問題。
Zonos 如何處理訂單確認?
在 Dashboard -> Settings -> Checkout settings 下的成功頁面類型中設定購後體驗。可用三個選項:
zOrderNumber(以及orderId用於舊版購物車)附加為查詢參數。zonosCheckoutSessionId附加為查詢參數。當您想要最快交接回您自己的成功頁面時,請使用此選項。從
zonosCheckoutSessionId查詢訂單當您使用關閉結帳模態搭配重新導向 URL 時,訂單在重新導向後可能需要幾秒鐘才能附加到結帳會話。從 URL 讀取
zonosCheckoutSessionId並使用您的秘密認證令牌輪詢checkoutSessionGraphQL 查詢,直到訂單準備就緒。絕不要從瀏覽器呼叫此項目 — 秘密認證令牌必須保持伺服器端。query getCheckoutSession($id: String!) {checkoutSession(id: $id) {order {id}}}將查詢傳送至
https://api.zonos.com/graphql,並將您的秘密認證令牌(來自 Dashboard -> Settings -> Integrations)作為credentialToken要求標頭傳遞。訂單建立時可以通知我嗎?
可以。如果您想在訂單建立時收到通知,在 Dashboard 的 Checkout settings 的電郵部分中,您可以輸入應在訂單建立、運送或取消時獲得通知的團隊成員的電郵地址。
這個頁面有幫助嗎?