Danh sách kiểm tra tích hợp
Làm theo danh sách kiểm tra toàn diện này để thiết lập tài khoản Dashboard của Zonos và tích hợp Zonos Checkout vào trang web hoặc nền tảng tùy chỉnh của bạn.
Tạo tài khoản Zonos
Để bắt đầu, vui lòng liên hệ với đội bán hàng của chúng tôi để tạo tài khoản và ký một thỏa thuận. Sau khi thỏa thuận được ký, bạn sẽ nhận được hai lần gửi tiền nhỏ vào tài khoản của mình cần được xác minh.
Vui lòng gửi email những số tiền gửi tiền nhỏ này đến accounting@zonos.com với ID cửa hàng Dashboard của bạn (CC đại diện bán hàng của bạn).
Sau khi xác minh, chi tiết ngân hàng của bạn sẽ hiển thị trong Dashboard -> Settings -> Billing.
Cấu hình cài đặt Dashboard và Checkout
Sau khi tạo tài khoản Zonos, bạn sẽ cần cấu hình cài đặt trong Dashboard để đảm bảo Checkout hoạt động đúng cách với cửa hàng của bạn. Phần này bao gồm tất cả các cấu hình Dashboard cần thiết.
Thiết lập thanh toán
Kết nối tài khoản ngân hàng để nhận thanh toán kịp thời từ Checkout. Thanh toán được xử lý hàng ngày trong vòng 2 ngày kể từ khi thanh toán được ghi nhận. Để làm điều này, vui lòng làm theo các bước sau:
- Điều hướng đến Dashboard -> Settings -> Checkout settings .
- Nhấp vào Add bank account
- Bạn sẽ được dẫn đến cổng thông tin Stripe để hoàn thành thiết lập và cung cấp các thông tin sau:
- Thông tin tài khoản ngân hàng.
- Company EIN.
- Số An sinh xã hội của chủ sở hữu công ty 25%. Để biết thêm chi tiết về lý do điều này là bắt buộc, hãy xem tài liệu của Stripe.
Ghi chú: Nếu bạn cần cập nhật lịch thanh toán của mình, vui lòng liên hệ support@zonos.com
Thiết lập các miền được phép
Tập lệnh JS của Zonos yêu cầu một danh sách các miền được phép cho các mục đích bảo mật. Điều này ngăn ngừa các trang web trái phép tải tập lệnh và đảm bảo nó chỉ chạy trên các miền được phê duyệt của bạn. Nếu không cấu hình này, tập lệnh sẽ trả về lỗi quyền.
Để thiết lập điều này:
- Điều hướng đến Dashboard -> Settings -> Checkout settings
- Dưới URLs, thêm miền đầy đủ và bất kỳ miền phụ nào nơi Checkout sẽ được sử dụng. Ví dụ: nếu miền của bạn là
example.com, bạn nên thêmexample.comvàtest.example.com.
Tùy chỉnh cài đặt thương hiệu
Định cấu hình cài đặt thương hiệu của bạn trong Dashboard để phù hợp với giao diện và cảm nhận của cửa hàng bạn.
Để làm điều này, vui lòng làm theo các bước sau:
- Điều hướng đến Dashboard -> Settings -> Checkout settings -> Branding
- Cấu hình các cài đặt sau:
- Logo.
- Màu thương hiệu và nhấn mạnh.
- Chủ đề, Kiểu dáng và Phông chữ.
Để biết thêm thông tin về cài đặt thương hiệu, hãy xem tài liệu của chúng tôi.
Kết nối một nhà cung cấp dịch vụ vận chuyển
Để báo giá vận chuyển tại giỏ hàng, bạn sẽ cần kết nối một nhà cung cấp dịch vụ vận chuyển với tài khoản Zonos của bạn. Điều này sẽ cho phép bạn bật các mức dịch vụ vận chuyển cụ thể tại giỏ hàng.
Để kết nối nhà cung cấp dịch vụ vận chuyển, vui lòng làm theo các bước sau:
- Điều hướng đến Dashboard -> Settings -> Shipping -> Rates
- Nhấp vào Add carrier
- Làm theo hướng dẫn thiết lập nhà cung cấp dịch vụ.
Để biết thêm chi tiết về kết nối các tài khoản nhà cung cấp dịch vụ, hãy xem tài liệu của chúng tôi.
Thiết lập các vùng vận chuyển
Các vùng vận chuyển cho phép bạn định cấu hình các nhà cung cấp dịch vụ vận chuyển và mức dịch vụ nào có sẵn cho các vùng khác nhau trên thế giới.
Để thiết lập các vùng vận chuyển, vui lòng làm theo các bước sau:
- Điều hướng đến Dashboard -> Settings -> Shipping -> Locations
- Nhấp vào New zone
- Nhập tên vùng và chọn các quốc gia bạn muốn vận chuyển.
- Chọn nhà cung cấp dịch vụ và mức dịch vụ bạn muốn cung cấp.
Để biết thêm chi tiết về các vùng vận chuyển, hãy xem tài liệu của chúng tôi.
Thiết lập quốc gia gốc dự phòng và mã HS
Quốc gia gốc và mã HS được sử dụng để tính toán thuế suất và thuế chính xác.
Nếu bạn không cung cấp quốc gia gốc hoặc mã HS cụ thể, chúng tôi sẽ sử dụng các giá trị dự phòng được thiết lập trong Dashboard.
Để đặt quốc gia gốc và mã HS dự phòng của bạn:
- Điều hướng đến Dashboard -> Settings -> Shipping -> Catalog.
- Đối với quốc gia gốc, chọn quốc gia nơi phần lớn các sản phẩm của bạn được sản xuất.
- Đối với mã HS, nhập mã HS của sản phẩm phổ biến nhất của bạn. Nếu bạn không có mã HS, điều hướng đến Classify trong Dashboard và nhập tên và mô tả sản phẩm của bạn để tạo mã HS chính xác.
Cài đặt đoạn mã JS Zonos
Đoạn mã JS Zonos là một tích hợp JavaScript phía máy khách cho phép chức năng giỏ hàng toàn cầu trên trang web của bạn. Nó hoạt động như là cầu nối giữa nền tảng thương mại điện tử của bạn và các dịch vụ Zonos, xử lý:
- Trải nghiệm Checkout: Kết xuất giao diện người dùng của giỏ hàng và xử lý thanh toán.
- Dịch vụ Vị trí: Phát hiện vị trí của khách truy cập và quản lý chuyển đổi tiền tệ.
- Tích hợp Giỏ hàng: Kết nối với hệ thống giỏ hàng và đơn hàng hiện có của bạn.
- Bảo mật: Xác thực các miền và xác thực các yêu cầu API.
Đoạn mã được tải không đồng bộ để ngăn chặn bất kỳ tác động nào đến hiệu suất trang web của bạn. Nó khởi tạo với thông tin đăng nhập API của cửa hàng của bạn và xử lý tất cả các tương tác phía máy khách một cách an toàn. Việc triển khai được thiết kế để không xâm nhập, yêu cầu những thay đổi tối thiểu đối với luồng thanh toán hiện có của bạn.
Dưới đây là một ví dụ hoàn chỉnh bao gồm tải tập lệnh, khởi tạo và xử lý sự kiện để tham khảo khi tích hợp 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.({ : { : () => { { : , }; }, : , }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();Ghi chú: Thay thế các giá trị trình giữ chỗ (storeId, zonosApiKey, bộ chọn, v.v.) bằng các giá trị thực tế từ Dashboard Zonos của bạn.
Xử lý bộ nhớ đệm của trình duyệt
Chúng tôi khuyên bạn nên nối một dấu thời gian hoặc định danh duy nhất khác vào URL để đảm bảo rằng tập lệnh không được bộ nhớ đệm của trình duyệt. Điều này sẽ đảm bảo rằng phiên bản tập lệnh mới nhất luôn được tải. Điều này được hiển thị trong dòng 10 của ví dụ hoàn chỉnh.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Xác thực đoạn mã JS Zonos
Sau khi tải tập lệnh JS của Zonos, bạn cần xác thực nó bằng cách chuyển một khóa API công khai của Zonos và ID cửa hàng vào hàm Zonos.init. Khóa API công khai được sử dụng để xác thực Checkout được thiết kế để có thể xuất bản, có nghĩa là nó có thể được sử dụng an toàn trong mã phía trước mà không tiết lộ bất kỳ thông tin nhạy cảm nào.
Để tìm ID cửa hàng và khóa API của bạn, điều hướng đến Dashboard -> Settings -> Integrations. Đảm bảo rằng bạn không sử dụng Secret API key, vì nó không được thiết kế để sử dụng trong mã phía trước. Điều này được hiển thị trong dòng 29 và 30 của ví dụ hoàn chỉnh.
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});Cập nhật Chính sách bảo mật nội dung (CSP) của bạn
Nếu trang web của bạn đặt một Chính sách bảo mật nội dung, hãy thêm các miền dưới đây vào các chỉ thị CSP tương ứng. Chính sách này áp dụng cho cả Checkout và Hello — đoạn mã Zonos tải các tập lệnh, bảng định kiểu, phông chữ, hình ảnh và thực hiện các yêu cầu mạng, vì vậy chặn bất kỳ tài nguyên nào sẽ phá vỡ luồng Checkout hoặc màn hình Hello. Danh sách style-src cũng áp dụng cho style-src-elem.
Ghi chú: Bỏ qua bước này nếu trang web của bạn không gửi tiêu đề CSP. Chỉ những thương nhân thực thi CSP tùy chỉnh trên các trang của họ mới cần cập nhật nó.
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.comThiết lập Hello
Hello là bắt buộc khi sử dụng Checkout.
Hello chịu trách nhiệm phát hiện vị trí, ngôn ngữ và tiền tệ của khách truy cập, và hiển thị thông tin thích hợp cho họ. Bạn có thể cấu hình tất cả cài đặt Hello trong Dashboard hoặc trong tập lệnh JS Zonos. Nếu bạn đã cấu hình Hello trong Dashboard, tập lệnh sẽ tải những cài đặt đó và sử dụng chúng. Nếu bạn chỉ định bất kỳ giá trị nào trong thuộc tính helloSettings của hàm Zonos.init, tập lệnh sẽ sử dụng những giá trị đó thay thế như hiển thị dưới đây.
Định cấu hình chuyển đổi tiền tệ trong Hello trong Tập lệnh JS
Hello sử dụng các bộ chọn CSS để xác định các phần tử trên trang web của bạn hiển thị thông tin tiền tệ. Chuyển những bộ chọn này tới thuộc tính helloSettings.currencyElementSelector của hàm Zonos.init để Hello có thể phát hiện và hiển thị đúng tiền tệ của người mua hàng quốc tế.
Bạn có thể sử dụng bất kỳ bộ chọn CSS hợp lệ nào ở đây, ví dụ: #price, .price để chọn nhiều phần tử khác nhau. Điều này được hiển thị trong dòng 23 và 24 của ví dụ hoàn chỉnh.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: '.price', // Replace with your actual selector }, // ... other fields});Tự động mở Hello khi tải trang
Theo mặc định, Hello chỉ sẽ mở khi khách truy cập nhấp vào nút cờ. Nếu bạn muốn tự động mở Hello khi trang tải, bạn có thể gọi hàm Zonos.openHelloDialog() sau khi tập lệnh Zonos được tải. Điều này được hiển thị trong dòng 25 và 26 của ví dụ hoàn chỉnh.
Zonos.init({ // ... other fields helloSettings: { : { .(); }, },});Định cấu hình các quy tắc hiển thị quốc gia trong Dashboard
Kiểm soát những quốc gia của người mua hàng nào nhìn thấy Hello và những quốc gia nào xuất hiện trong thả xuống bộ chọn quốc gia từ Dashboard. Điều hướng đến Dashboard -> Settings -> Hello và tìm phần Country display rules.
Khả năng hiển thị widget
Kiểm soát những quốc gia của người mua hàng nào nhìn thấy tiện ích Hello. Chọn một trong các quy tắc cơ sở, sau đó sử dụng danh sách Always show và Never show để ghi đè các quốc gia cụ thể.
- All countries - Mọi quốc gia mà Hello hỗ trợ.
- Only shippable countries - Các quốc gia bạn vận chuyển từ cài đặt vận chuyển của bạn.
- Always show - Các quốc gia luôn xuất hiện, ngay cả khi quy tắc cơ sở loại trừ chúng.
- Never show - Các quốc gia không bao giờ xuất hiện, ngay cả khi quy tắc cơ sở bao gồm chúng.

Bộ chọn quốc gia
Kiểm soát những quốc gia nào xuất hiện trong thả xuống bộ chọn quốc gia Hello, sử dụng cùng các quy tắc cơ sở cộng với các ghi đè Always show và Never show.

Thiết lập Checkout
Checkout chịu trách nhiệm cho phép khách hàng nhập thông tin vận chuyển và thanh toán của họ, tính toán chi phí hạ cánh, thu thập thanh toán và hoàn thành đơn hàng.
Checkout sẽ chia sẻ dữ liệu theo ngữ cảnh với Hello, chẳng hạn như vị trí, ngôn ngữ và tiền tệ của khách truy cập. Điều này đảm bảo rằng trải nghiệm của khách hàng nhất quán trên toàn bộ quá trình mua sắm.
Bạn có thể cấu hình tất cả cài đặt Checkout trong cả Dashboard và tập lệnh JS Zonos. Nếu bạn đã cấu hình Checkout trong Dashboard, tập lệnh sẽ tải những cài đặt đó và sử dụng chúng. Nếu bạn chỉ định bất kỳ giá trị nào trong thuộc tính checkoutSettings của hàm Zonos.init, tập lệnh sẽ sử dụng những giá trị đó thay thế.
Cấu hình nút 'đặt hàng' trong Tập lệnh JS
Tập lệnh JS Zonos sẽ tự động nhận dạng những người mua hàng quốc tế và hướng họ tới luồng Checkout. Tuy nhiên, bạn sẽ cần cấu hình nút 'đặt hàng' trên nền tảng của bạn để mở Checkout khi nhấp vào. Điều này có thể được thực hiện bằng cách chuyển một bộ chọn CSS tới thuộc tính checkoutSettings.placeOrderButtonSelector của hàm Zonos.init.
Nếu bạn có nhiều nút có thể được sử dụng để đặt hàng, hãy chắc chắn chuyển một bộ chọn cho mỗi nút. Ví dụ: #placeOrder, .place-order.
Điều này được hiển thị trong dòng 21 của ví dụ hoàn chỉnh.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s) },});Tạo chi tiết giỏ hàng một cách an toàn trên máy chủ
Để hiển thị chi tiết giỏ hàng cho khách hàng, bạn cần tạo một hàm phía máy chủ sẽ gọi API Zonos để tạo giỏ hàng, và sau đó chuyển ID giỏ hàng đó trở lại phía trước. Điều này sẽ đảm bảo rằng chi tiết giỏ hàng không được tiết lộ cho khách hàng theo cách có thể bị thao tác.
Lệnh gọi API phía sau của bạn sẽ sử dụng mã thông báo thông tin đăng nhập GraphQL bí mật, khác với mã thông báo công khai mà bạn sử dụng để xác thực tập lệnh JS Zonos. Mã thông báo này có thể được truy xuất trong Dashboard -> Settings -> Integrations. Mã thông báo bí mật cần được chuyển làm tiêu đề trong lệnh gọi API của bạn.
Mutation cartCreate chấp nhận danh sách các mục, được định dạng theo lược đồ mục giỏ hàng.
// 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 } }}`, variables: { /** * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput */ input: { /** * Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput */ adjustments: [ { amount: -10, currencyCode: 'USD', /** * Enum value: https://zonos.com/developer/types/CartAdjustmentType */ type: 'CART_TOTAL', }, ], /** * Cart item input: https://zonos.com/developer/types/ItemInput */ items: [ { name: 'Item 1', amount: 150.99, currencyCode: 'USD', description: 'Item 1 description', quantity: 2, }, ], /** * Cart metadata input: https://zonos.com/developer/types/CartMetadataInput */ metadata: [ { : , : , }, ], }, }, }); response = (, { : , : { : , : , }, : graphql, }); { data } = response.(); data..; }Chúng tôi đề xuất tạo một điểm cuối API trên phía máy chủ của bạn và sau đó gọi điểm cuối đó từ tích hợp JS phía trước của bạn, được chi tiết trong bước tiếp theo.
Chuyển ID giỏ hàng tới Checkout thông qua phía trước
Sau khi tạo giỏ hàng trên phía máy chủ, bạn cần chuyển ID giỏ hàng tới tập lệnh JS Zonos. Điều này có thể được thực hiện bằng cách sử dụng lệnh gọi lại createCartId là một phần của hàm Zonos.init. Checkout sau đó sẽ truy xuất an toàn chi tiết giỏ hàng từ Zonos khi mở, ngăn chặn bất kỳ thao tác nào với giỏ hàng. Xem ví dụ mã bên dưới.
Giá trị của createCartId không thể là giá trị tĩnh, nó phải là một hàm.
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 }, },});(Tùy chọn) Hiển thị thông báo dưới Tổng đơn hàng
Nếu bạn cần bề mặt một thông báo ngắn, động bên trong Checkout — ví dụ: công khai quy định khi sản phẩm cụ thể nằm trong giỏ hàng — bạn có thể trả về mảng customMessage từ lệnh gọi lại createCartId. Mỗi mục nhập trong mảng được kết xuất trên dòng của riêng nó của một biểu ngữ thông tin duy nhất trực tiếp dưới Tổng đơn hàng.
Cú pháp liên kết Markdown — [nhãn liên kết] theo sau bởi (https://example.com) — được kết xuất dưới dạng thẻ neo, để những người mua hàng có thể nhấp qua. URL https:// đơn giản trong văn bản cũng được tự động liên kết. Mọi thứ khác được kết xuất dưới dạng văn bản đơn giản, vì vậy HTML trong chuỗi được thoát khỏi thay vì thực thi.
Chỉ một biểu ngữ được hiển thị trên Checkout, bất kể bạn chuyển bao nhiêu dòng.
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).', ], }; }, },});Ghi chú: Văn bản thông báo được kết xuất dưới dạng văn bản đơn giản — các thẻ HTML trong chuỗi được thoát khỏi, vì vậy chỉ cú pháp liên kết Markdown mới được diễn giải. Quyết định có bao gồm
customMessagephía máy chủ dựa trên nội dung giỏ hàng để biểu ngữ chỉ xuất hiện khi nó liên quan.
(Tùy chọn) Kích hoạt Checkout Zonos theo lập trình
Nếu bạn có logic tùy chỉnh và cần kích hoạt giỏ hàng Zonos theo lập trình, bạn có thể sử dụng hàm Zonos.triggerCheckoutInternational() để mở cửa sổ giỏ hàng Zonos sau khi Zonos được khởi tạo. Điều này sẽ gọi lệnh gọi lại createCartId được định nghĩa trong Zonos.init ở trên và mở cửa sổ giỏ hàng 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(); }});(Tùy chọn) Luôn kích hoạt bộ chọn giỏ hàng quốc tế
Nếu bạn muốn tách quá trình thanh toán cho những người mua hàng trong nước và quốc tế, bạn có thể thêm nút International checkout vào trang web của bạn. Thay vì kích hoạt theo cách thủ công Zonos Checkout bằng Zonos.triggerCheckoutInternational, bạn có thể cấu hình Zonos.init bằng bộ chọn thích hợp. Bộ chọn sẽ bị vô hiệu hóa cho đến khi Zonos được khởi tạo, khi nút được nhấp vào, nó sẽ tự động kích hoạt giỏ hàng Zonos. Điều này sẽ gọi lệnh gọi lại createCartId được định nghĩa trong Zonos.init và mở cửa sổ giỏ hàng 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 },});(Tùy chọn) Theo dõi giỏ hàng với GA4 hoặc Facebook Pixel
Zonos Checkout có thể chuyển tiếp toàn bộ giỏ hàng tới các công cụ phân tích hiện có của bạn. Đối với mỗi bước, Zonos phát hành:
- Sự kiện
zonos-checkout-...gốc tới GA4 (thông quagtag('event', ...)) và tới Meta dưới dạng sự kiện tùy chỉnh (thông quafbq('trackCustom', ...)). - Sự kiện tiêu chuẩn khớp với Meta khi một tồn tại —
InitiateCheckout,AddPaymentInfovàPurchase— vì vậy tối ưu hóa tích hợp và báo cáo chuyển đổi của Meta hoạt động ngay từ hộp.
Cách sự kiện đến với nhà cung cấp của bạn phụ thuộc vào cách Checkout được kết xuất trên trang web của bạn. Chọn con đường phù hợp với tích hợp của bạn.
Tích hợp gốc (Checkout kết xuất trực tiếp trên trang web của bạn)
Khi phần tử tùy chỉnh <zonos-checkout> được gắn kết trên trang của riêng bạn (mặc định cho tích hợp tập lệnh JS Zonos được mô tả ở trên), window.gtag và window.fbq của trang đã có trong phạm vi. Zonos gọi chúng trực tiếp — không cần sự chuyển tiếp hoặc bàn giao pixel ID.
Thiết lập:
- Hãy chắc chắn rằng trang của bạn đã có thẻ cơ sở GA4 và/hoặc mã cơ sở Meta Pixel được tải (cùng cách bạn theo dõi bất kỳ trang nào khác trên trang web của bạn).
- Bật các nhà cung cấp bạn muốn trong bảng điều khiển Zonos dưới Cài đặt Checkout → Theo dõi (Google Analytics, Facebook Pixel hoặc cả hai).
Đó là nó. Không có tập lệnh sự chuyển tiếp, không có customHTML, không có ID phụ thêm để chuyển — Zonos phát hiện gtag / fbq trên trang và bắn sự kiện trực tiếp.
Tích hợp Iframe (giỏ hàng Iframe kế thừa trên iglobalstores.com)
Khi Checkout được lưu trữ trong một iframe trên một gốc khác, nó không thể tiếp cận gtag / fbq của trang của bạn trực tiếp. Zonos xuất bản một tập lệnh sự chuyển tiếp nhỏ — analyticsRelayOnInit.js — nghe các sự kiện postMessage từ iframe Checkout và chuyển tiếp chúng tới những nhà cung cấp bạn có trên trang của bạn. Một sự chuyển tiếp duy nhất xử lý cả GA4 và Facebook Pixel cùng một lúc.
Thiết lập:
- Bật các nhà cung cấp bạn muốn trong bảng điều khiển Zonos dưới Cài đặt Checkout → Theo dõi.
- Thêm thẻ cơ sở GA4 và/hoặc mã cơ sở Meta Pixel vào
<head>của trang lưu trữ iframe Checkout. - Thêm tập lệnh sự chuyển tiếp sau các thẻ nhà cung cấp:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- Chuyển các ID tương ứng thông qua
customHTMLCheckout của bạn để sự chuyển tiếp biết tài sản/pixel nào để bắn chống lại:
window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX'; window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';Để biết hướng dẫn từng bước iframe, tham khảo sự kiện hoàn chỉnh (bao gồm bản đồ tải trọng purchase / Purchase) và mẹo gỡ lỗi, xem:
Đồng bộ hóa theo dõi và trạng thái đơn hàng vào Dashboard
Để đồng bộ hóa đơn hàng giữa hệ thống của bạn và Dashboard Zonos, hãy triển khai các lệnh gọi API và webhook này:
Mutation bắt buộc
| Mutation↕ | Description↕ |
|---|---|
orderUpdateAccountOrderNumber | Đồng bộ hóa số tài khoản gốc của bạn với Dashboard. Docs → |
orderAddTrackingNumber | Chỉ bắt buộc nếu bạn không in nhãn trong Dashboard. Đảm bảo theo dõi hiển thị trong Dashboard để Zonos có thể đảm bảo tính toán chi phí hạ cánh của bạn. Docs → |
Webhook bắt buộc
Kiểm tra tích hợp của bạn
Trước khi đi vào hoạt động với tích hợp Checkout của bạn, điều quan trọng là phải kiểm tra kỹ lưỡng tất cả các khía cạnh của tích hợp để đảm bảo trải nghiệm khách hàng suôn sẻ. Điều này bao gồm kiểm tra luồng thanh toán, xử lý thanh toán, tạo đơn hàng và chức năng webhook.
Làm theo hướng dẫn kiểm tra của chúng tôi để xác minh rằng tích hợp của bạn đang hoạt động đúng cách và xác định và khắc phục bất kỳ vấn đề nào trước khi khởi chạy vào sản xuất.
Câu hỏi thường gặp
Dưới đây là một số câu hỏi thường gặp về quá trình tích hợp.
Zonos xử lý xác nhận đơn hàng như thế nào?
Định cấu hình trải nghiệm sau khi mua trong Dashboard -> Settings -> Checkout settings dưới Success page type. Ba tùy chọn có sẵn:
- Show Zonos success page (mặc định, được đề xuất) — Zonos hiển thị trang cảm ơn tích hợp sẵn sau khi đặt hàng. Trang luôn được hiển thị, ngay cả khi đơn hàng không nhập vào hệ thống của bạn, vì vậy người mua hàng luôn nhận được xác nhận.
- Redirect to a success page — Zonos chờ trên màn hình "Đơn hàng hoàn thành" ngắn cho đến khi đơn hàng được tạo, sau đó chuyển hướng tới URL thành công được cấu hình của bạn với
zOrderNumber(vàorderIdcho giỏ hàng kế thừa) được nối thêm dưới dạng tham số truy vấn. - Close the checkout modal — Zonos đóng hộp thoại của nó sau khi thanh toán được ghi nhận. Nếu bạn cũng cấu hình URL thành công, Zonos chuyển hướng đến URL đó ngay lập tức sau khi Stripe thu thập thanh toán — mà không chờ đơn hàng được tạo — và nối thêm
zonosCheckoutSessionIddưới dạng tham số truy vấn. Sử dụng tùy chọn này khi bạn muốn bàn giao nhanh nhất trở lại trang thành công của riêng bạn.
Tra cứu đơn hàng từ zonosCheckoutSessionId
Khi bạn sử dụng Close the checkout modal với URL chuyển hướng, đơn hàng có thể mất vài giây để gắn với phiên giỏ hàng sau khi chuyển hướng. Đọc zonosCheckoutSessionId từ URL và thăm dò truy vấn checkoutSession GraphQL từ máy chủ của bạn bằng mã thông báo thông tin đăng nhập bí mật của bạn cho đến khi đơn hàng sẵn sàng. Không bao giờ gọi điều này từ trình duyệt — mã thông báo thông tin đăng nhập bí mật phải ở phía máy chủ.
query getCheckoutSession($id: String!) { checkoutSession(id ) order idGửi truy vấn tới https://api.zonos.com/graphql với mã thông báo thông tin đăng nhập bí mật của bạn từ Dashboard -> Settings -> Integrations được chuyển làm tiêu đề yêu cầu credentialToken.
Tôi có thể được thông báo khi đơn hàng được tạo không?
Vâng. Nếu bạn muốn nhận thông báo khi đơn hàng được tạo, trong Dashboard dưới phần Email của Checkout settings, bạn có thể nhập địa chỉ email của các thành viên nhóm nên được thông báo khi đơn hàng được tạo, gửi hoặc hủy.
Tích hợp tùy chỉnh
Xây dựng tích hợp Checkout từ đầu đến cuối vào trang web tùy chỉnh của bạn.