5alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout
Show Zonos success page(デフォルト、推奨)— 注文が確定した後、Zonosが組み込みのサンキューページを表示します。注文がシステムにインポートできなかった場合でも、ページは常に表示されるため、買い物客は必ず確認を受け取れます。
Redirect to a success page — Zonosは注文が作成されるまで短い「Order complete」画面で待機し、その後、設定した成功URLに zOrderNumber(レガシーカートの場合は orderId)をクエリパラメータとして付加してリダイレクトします。
Close the checkout modal — 決済が確定すると、Zonosはモーダルを閉じます。成功URLも構成している場合、ZonosはStripeが決済を回収した直後に注文の作成を待たずにそのURLにリダイレクトし、zonosCheckoutSessionId をクエリパラメータとして付加します。独自の成功ページへの最速の引き渡しが必要な場合にこのオプションを使用します。
カスタム統合
カスタム統合
カスタムサイト向けにエンドツーエンドのCheckout統合を構築します。
統合チェックリスト
この包括的なチェックリストに従って、Zonos Dashboardアカウントを設定し、Zonos Checkoutをカスタムサイトまたはプラットフォームに統合します。
Zonosアカウントを作成
開始するには、営業チームにお問い合わせいただき、アカウントを作成し契約に署名してください。契約に署名すると、アカウントに2件の少額入金が行われ、それらを確認する必要があります。
これらの少額入金額を、DashboardストアID(営業担当者をCCに含めて)とともに accounting@zonos.com にメールでお送りください。
確認が完了すると、銀行情報が Dashboard -> Settings -> Billing に表示されます。
DashboardとCheckout設定を構成
Zonosアカウントを作成したら、Checkoutがストアで正しく動作するよう、Dashboardで設定を構成する必要があります。このセクションでは、Dashboardの必須設定をすべて説明します。
入金を設定
Checkoutからの入金をタイムリーに受け取るために、銀行口座を接続します。入金は、決済確定から2日以内の遅延で日次処理されます。手順は以下のとおりです:
許可ドメインを設定
Zonos JSスクリプトは、セキュリティ上の理由から許可ドメインのリストを必要とします。これにより、許可されていないサイトがスクリプトを読み込むことを防ぎ、承認されたドメインでのみ実行されることを保証します。この設定がない場合、スクリプトは権限エラーを返します。
設定手順:
example.comの場合、example.comとtest.example.comを追加する必要があります。ブランディング設定をカスタマイズ
Dashboardでブランディング設定を構成し、ストアのルックアンドフィールに合わせます。
手順は以下のとおりです:
ブランディング設定の詳細については、ドキュメントをご覧ください。
配送キャリアを接続
チェックアウト時に配送料を見積もるには、Zonosアカウントに配送キャリアを接続する必要があります。これにより、チェックアウト時に特定の配送サービスレベルを有効にできます。
配送キャリアを接続する手順:
キャリアアカウントの接続の詳細については、ドキュメントをご覧ください。
配送ゾーンを設定
配送ゾーンでは、世界のさまざまな地域で利用可能な配送キャリアとサービスレベルを構成できます。
配送ゾーンを設定する手順:
配送ゾーンの詳細については、ドキュメントをご覧ください。
フォールバック原産国とHS codeを設定
原産国とHS codeは、正確な関税と税金を計算するために使用されます。
特定の原産国またはHS codeを提供しない場合、Dashboardで設定したフォールバックが使用されます。
フォールバック原産国とHS codeを設定するには:
Zonos JSスニペットをインストール
Zonos JSスニペットは、サイトでグローバルチェックアウト機能を有効にするクライアントサイドJavaScript統合です。eコマースプラットフォームと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',};},: ,},: {: ,: {.();},},: ,: ,});});..(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});Content Security Policy (CSP) を更新
サイトでContent Security Policyを設定している場合、以下のドメインを対応する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.comHelloを設定
Checkoutを使用する場合、Helloは必須です。
Helloは、訪問者の所在地、言語、通貨を検出し、適切な情報を表示する役割を担います。すべての Hello settings はDashboardまたはZonos JSスクリプトで構成できます。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 セクションを見つけます。
ウィジェットの表示
どの購入者国にHelloウィジェットを表示するかを制御します。基本ルールの1つを選択し、Always show と Never show リストを使用して特定の国を上書きします。
国セレクター
Hello国セレクターのドロップダウンに表示する国を、同じ基本ルールと Always show および Never show の上書きを使用して制御します。
helloSettingsのshowForCountriesとshowCountryListプロパティは非推奨です。代わりに Dashboard で国表示ルールを構成してください。そこで設定した値はZonos JSスクリプトによって自動的に読み込まれます。Checkoutを設定
Checkoutは、顧客が配送先および請求先情報を入力し、Landed Costを計算し、決済を回収し、注文を完了できるようにする役割を担います。
Checkoutは、訪問者の所在地、言語、通貨などのコンテキストデータをHelloと共有します。これにより、ショッピングプロセス全体を通じて顧客体験の一貫性が保たれます。
すべてのCheckout設定は、DashboardとZonos JSスクリプトの両方で構成できます。DashboardでCheckoutを既に構成している場合、スクリプトはそれらの設定を読み込んで使用します。
Zonos.init関数のcheckoutSettingsプロパティで値を指定した場合、スクリプトは代わりにそれらの値を使用します。JSスクリプトで「place order」ボタンを構成
Zonos JSスクリプトは国際買い物客を自動的に認識し、Checkoutフローに誘導します。ただし、プラットフォームの「place order」ボタンをクリックしたときにCheckoutを開くよう構成する必要があります。これは、
Zonos.init関数のcheckoutSettings.placeOrderButtonSelectorプロパティにCSSセレクターを渡すことで行えます。注文に使用できるボタンが複数ある場合は、各ボタンのセレクターを渡してください。例:
#placeOrder, .place-order。これは完全な例の21行目に示されています。
Zonos.init({// ... other fieldscheckoutSettings: {// ... other fieldsplaceOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s)},});サーバーサイドでカート詳細を安全に作成
顧客にカート詳細を表示するには、Zonos APIを呼び出してカートを作成し、そのカートIDをフロントエンドに返すサーバーサイド関数を作成する必要があります。これにより、カート詳細が操作可能な形で顧客に公開されないことが保証されます。
バックエンドAPI呼び出しでは、Zonos JSスクリプトの認証に使用する公開トークンとは異なる、秘密のGraphQL認証トークンを使用します。このトークンは Dashboard -> Settings -> Integrations で取得できます。秘密トークンはAPI呼び出しのヘッダーとして渡す必要があります。
cartCreatemutationはアイテムのリストを受け付け、cart item schemaに従ってフォーマットする必要があります。// Create new cart from serversideasync function createCart() {/*** Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate* */const graphql = JSON.stringify({query: ,: {: {: [{: -,: ,: ,},],: [{: ,: ,: ,: ,: ,},],: [{: ,: ,},],},},});response = (, {: ,: {: ,: ,},: graphql,});{ data } = response.();data..;}サーバーサイドにAPIエンドポイントを作成し、次のステップで説明するフロントエンドJS統合からそのエンドポイントを呼び出すことを推奨します。
フロントエンド経由でCheckoutにカートIDを渡す
サーバーサイドでカートを作成したら、カート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},},});(オプション)Order totalの下に通知を表示
Checkout内に短い動的メッセージを表示する必要がある場合(例:特定の製品がカートにある場合の規制開示)、
createCartIdコールバックからcustomMessage配列を返すことができます。配列の各エントリは、Order total の真下にある単一の情報バナーの独自の行にレンダリングされます。Markdownリンク構文 —
[link label]の後に(https://example.com)— はアンカータグとしてレンダリングされるため、買い物客はクリックして遷移できます。テキスト内のプレーンなhttps://URLも自動的にリンクされます。それ以外はすべてプレーンテキストとしてレンダリングされるため、文字列内のHTMLは実行されずにエスケープされます。渡す行数に関わらず、Checkoutごとに表示されるバナーは1つのみです。
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 checkoutをトリガー
カスタムロジックがあり、プログラムでZonos checkoutをトリガーする必要がある場合、Zonosの初期化後に
Zonos.triggerCheckoutInternational()関数を使用してZonos checkoutウィンドウを開くことができます。これにより、上記のZonos.initで定義したcreateCartIdコールバックが呼び出され、Zonos checkoutウィンドウが開きます。// 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 checkoutを常にトリガーするセレクター
国内買い物客と国際買い物客のチェックアウトプロセスを分離したい場合、サイトに
International checkoutボタンを追加できます。Zonos.triggerCheckoutInternationalで手動トリガーする代わりに、適切なセレクターでZonos.initを構成できます。Zonosの初期化が完了するまでセレクターは無効になり、ボタンがクリックされると自動的にZonos checkoutがトリガーされます。これにより、Zonos.initで定義したcreateCartIdコールバックが呼び出され、Zonos checkoutウィンドウが開きます。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>にGA4 base tagおよび/またはMeta Pixel base codeを追加します。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を実装します:
必須Mutation
orderUpdateAccountOrderNumberorderAddTrackingNumber必須Webhook
ORDER_CREATEDORDER_STATUS_CHANGED統合をテスト
Checkout統合を本番公開する前に、スムーズな顧客体験を確保するため、統合のすべての側面を徹底的にテストすることが重要です。これには、チェックアウトフロー、決済処理、注文作成、webhook機能のテストが含まれます。
テストガイドに従って、統合が正しく動作していることを確認し、本番公開前に問題を特定して修正してください。
よくある質問
以下は、統合プロセスに関するよくある質問です。
Zonosは注文確認をどのように処理しますか?
Dashboard -> Settings -> Checkout settings の Success page type で購入後の体験を構成します。3つのオプションがあります:
zOrderNumber(レガシーカートの場合はorderId)をクエリパラメータとして付加してリダイレクトします。zonosCheckoutSessionIdをクエリパラメータとして付加します。独自の成功ページへの最速の引き渡しが必要な場合にこのオプションを使用します。zonosCheckoutSessionIdから注文を検索リダイレクトURL付きの Close the checkout modal を使用する場合、リダイレクト後にチェックアウトセッションに注文が紐付くまで数秒かかることがあります。URLから
zonosCheckoutSessionIdを読み取り、秘密の認証トークンを使用してサーバーからcheckoutSessionGraphQLクエリをポーリングし、注文の準備ができるまで待ちます。ブラウザからこれを呼び出さないでください — 秘密の認証トークンはサーバーサイドに留める必要があります。query getCheckoutSession($id: String!) {checkoutSession(id: $id) {order {id}}}Dashboard -> Settings -> Integrations から取得した秘密の認証トークンを
credentialTokenリクエストヘッダーとして渡し、クエリをhttps://api.zonos.com/graphqlに送信します。注文が作成されたときに通知を受け取れますか?
はい。注文が作成、発送、またはキャンセルされたときに通知を受け取りたい場合は、Checkout settings の Email セクションで、通知を受け取るチームメンバーのメールアドレスを入力できます。
このページは役に立ちましたか?