如果您有自訂邏輯並需要以程式方式觸發 Zonos 結帳,您可以使用 Zonos.triggerCheckoutInternational() 函式在 Zonos 初始化後開啟 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 Dashboard 帳戶,並將 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函式來驗證它。用於驗證 Checkout 的公開 API 金鑰設計為可發佈,這表示它可以在前端程式碼中安全使用,而不會公開任何敏感資訊。若要尋找您的商店 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 片段載入指令碼、樣式表、字型、影像並進行網路請求,因此阻止任何這些資源將破壞 Checkout 流程或 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 選擇器識別您網站上顯示貨幣資訊的元素。將這些選擇器傳入
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 中設定國家顯示規則
從 Dashboard 控制哪個買家國家看到 Hello,以及哪些國家出現在國家選擇器下拉清單中。導覽至 Dashboard -> Settings -> Hello,並找到國家顯示規則區段。
小工具可見度
控制哪個買家國家看到 Hello 小工具。選擇其中一個基本規則,然後使用 Always show 和 Never show 清單覆寫特定國家。
國家選擇器
使用相同的基本規則以及 Always show 和 Never show 覆寫來控制 Hello 國家選擇器下拉清單中出現哪些國家。
helloSettings上的showForCountries和showCountryList屬性已被淘汰。請改在 Dashboard 中設定國家顯示規則 — 在那裡設定的值將由 Zonos JS 指令碼自動載入。設定 Checkout
Checkout 負責允許客戶輸入其運送和帳單資訊、計算 Landed Cost、收集付款並完成訂單。
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 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 連結語法 —
[link label]後跟(https://example.com)— 呈現為錨定標籤,因此購物者可以點擊瀏覽。文字中的純https://URL 也會自動連結。其他所有內容都呈現為純文字,因此字串中的 HTML 會被逸出而不是執行。無論您傳入多少行,每個 Checkout 只顯示一個橫幅。
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.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 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 下的 Success page type 中設定購後體驗。有三個選項可用:
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請求標題。我可以在建立訂單時收到通知嗎?
是的。如果您想在建立訂單時接收通知,請在 Checkout settings 的 Email 區段中的 Dashboard 中,輸入應在建立、出貨或取消訂單時收到通知的團隊成員的電子郵件地址。
這個頁面有幫助嗎?