集成清单
按照此综合清单来设置您的 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 服务之间的桥梁,处理:
- Checkout 体验:呈现结账 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 函数来验证它。用于验证 Checkout 的公共 API 密钥设计为可发布的,这意味着它可以安全地用于前端代码,而不会暴露任何敏感信息。
要查找您的商店 ID 和 API 密钥,请导航至 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});更新您的内容安全策略 (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 选择器来识别网站上显示货币信息的元素。将这些选择器传递到 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 中配置国家显示规则
从 Dashboard 控制哪些购买者国家看到 Hello,以及哪些国家出现在国家选择器下拉菜单中。导航至 Dashboard -> Settings -> Hello,并查找 Country display rules 部分。
Widget 可见性
控制哪些购买者国家看到 Hello widget。选择一个基础规则,然后使用 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 选择器传递到 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 脚本。这可以通过使用 createCartId 回调来完成,该回调是 Zonos.init 函数的一部分。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 结账选择器
如果您想为国内和国际购物者分离结账流程,您可以向网站添加"International checkout"按钮。您可以使用 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 集成(旧版 Checkout iframe 在 iglobalstores.com 上)
当 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 请求标头。
我可以在创建订单时收到通知吗?
是的。如果您想在创建订单时收到通知,在 Dashboard 的 Checkout settings 的 Email 部分中,您可以输入应在创建、运送或取消订单时收到通知的团队成员的电子邮件地址。
自定义集成
将端到端的 Checkout 集成构建到您的自定义网站中。