如果您有自定义逻辑并需要以编程方式触发 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 => {
如果您想为国内和国际购物者分离结账流程,您可以向网站添加"International checkout"按钮。您可以使用 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。确保您不使用Secret API key,因为它不设计用于前端代码。这在完整示例的第 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 选择器来识别网站上显示货币信息的元素。将这些选择器传递到
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 中配置国家显示规则
从 Dashboard 控制哪些购买者国家看到 Hello,以及哪些国家出现在国家选择器下拉菜单中。导航至 Dashboard -> Settings -> Hello,并查找 Country display rules 部分。
Widget 可见性
控制哪些购买者国家看到 Hello widget。选择一个基础规则,然后使用 Always show 和 Never show 列表来覆盖特定国家。
国家选择器
使用相同的基础规则以及 Always show 和 Never show 覆盖来控制 Hello 国家选择器下拉菜单中显示的国家。
helloSettings上的showForCountries和showCountryList属性已弃用。改为在 Dashboard 中配置国家显示规则 — 那里设置的值将由 Zonos JS 脚本自动加载。设置 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 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 脚本。这可以通过使用
createCartId回调来完成,该回调是Zonos.init函数的一部分。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 结账选择器
如果您想为国内和国际购物者分离结账流程,您可以向网站添加"International checkout"按钮。您可以使用
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,以便 Meta 的内置优化和转化报告可以直接使用。事件如何到达您的提供商取决于 Checkout 在您网站上的呈现方式。选择与您的集成匹配的路径。
原生集成(Checkout 直接呈现在您的网站上)
当
<zonos-checkout>自定义元素挂载在您自己的页面上(Zonos JS 脚本集成的默认设置如上所述)时,页面自己的window.gtag和window.fbq已经在范围内。Zonos 直接调用它们 — 不需要中继或像素 ID 交接。设置:
就这样。没有中继脚本、没有
customHTML、没有额外的 ID 要传递 — Zonos 检测页面上的gtag/fbq并直接触发事件。Iframe 集成(旧版 Checkout iframe 在
iglobalstores.com上)当 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请求标头。我可以在创建订单时收到通知吗?
是的。如果您想在创建订单时收到通知,在 Dashboard 的 Checkout settings 的 Email 部分中,您可以输入应在创建、运送或取消订单时收到通知的团队成员的电子邮件地址。
这个页面有帮助吗?