Skip to Content
チェックアウト概要

チェックアウト — 概要

ホスト型チェックアウト は、バイヤーが実際に資金を送るページです。 アセット選択、デポジットアドレス、QR コードは自社で描画する必要は ありません — SDK が当方のページ（https://checkout.infraio.xyz/<session_key>） を開き、UI は当方が処理します。

3 つのモード

中央寄せのオーバーレイポップアップ、デフォルトで約 560×780。 ストアフロントはそのまま維持されます。決済後にポップアップが 閉じると onSuccess が発火します。デフォルトモードです。

Popup

チェックアウトへのハードナビゲーションです。ポップアップが ブロックされるブラウザや、オーバーレイが違和感を生むモバイル Web に最適です。バイヤーはセッションの success_url / cancel_url 経由で戻ってきます。

Redirect

自社ページ内の iframe です。レイアウトをエンドツーエンドで 自社が制御し、コンテキストの切り替えをゼロにしたい場合に 最適です。postMessage 経由で自動リサイズします。

Embed

モードの選び方の目安

こういう場合…使うモード
デスクトップ Web、標準的な ECPopup
モバイル WebRedirect（ポップアップ + モバイルは相性が悪い）
厳格な CSP でロックされた管理画面Redirect
アプリ内 webview / ネイティブなページ内チェックアウトEmbed
ホワイトラベルヘッダーを備えた完全カスタムのバイヤーフローが欲しいEmbed + hideHeader + 自社のウォレット接続

バイヤーに表示されるもの

モードに関わらず、ページには以下が表示されます:

  1. 注文サマリー（行明細、合計、通貨）。自社側で既にこれを表示 している場合は hideSummary で非表示にできます。
  2. アセット選択 — マーチャント設定で有効化したチェーン × アセットの 組み合わせの一覧。バイヤーがその中から 1 つを選びます。
  3. 選択した組み合わせに対応する デポジットアドレス + QR + 金額。 バイヤーはスキャンするか、ウォレットを接続する（WalletConnect ボタン）か、SDK 経由で渡した事前接続済みウォレットから支払います。
  4. ステータス表示 — 「送金を待機中」、「Tx 検出済み（3/12 確認）」、 「支払い完了」。
  5. キャンセル ボタン（常に表示）→ onCancel をトリガーします。

ページのカスタマイズ

項目方法制限
注文サマリーを非表示SDK で hideSummary: trueバイヤーはデポジットパネルで合計を引き続き確認できます
InfraIO ヘッダーを非表示SDK で hideHeader: true完全なホワイトラベル化には walletAddress と組み合わせます
ウォレットを事前接続walletAddress + walletChainId + onSignRequestWalletConnect モーダルをバイパスします
ロケールSDK の locale — en、vi、ja、ko、es、pt-BR、ru、tr、zh-CN、zh-TW のいずれかチェックアウトページ と 返金ページ（およびウォレット接続モーダル）をローカライズします。不明または未指定の場合は en にフォールバックします
ロゴ、ブランドカラーマーチャント ダッシュボード → Brandingセッション単位ではなく、全体に適用されます

リターン URL の挙動

redirect モードでは、バイヤーは常に次のいずれかに戻ります:

  • セッションの success_url（決済が精算された場合）
  • セッションの cancel_url（キャンセル / 離脱の場合）
  • どちらも設定していない場合、SDK はチェックアウトを開いたページに フォールバックし、?session_id=…&status=success|cancel を付加します

popup と embed モードではページ遷移がありません — 制御は onSuccess / onCancel 経由で自社ページに戻ります。これらを使って 次に表示する UI を決定してください。

CSP と埋め込み

embed モードを使う場合、CSP の frame-src に当方のオリジンを 許可する必要があります:

Content-Security-Policy:
  frame-src https://checkout.infraio.xyz https://checkout-dev.infraio.xyz;

iframe にはパーミッションポリシー allow="payment; clipboard-write" が付与されます — 呼び出せるのは Payment Request API とクリップボード 書き込みだけで、それ以上のことはできません。HTML の sandbox 属性 は 付いていません。チェックアウトページはウォレット接続を行う フル機能のアプリであり、その postMessage セキュリティ（両側でのオリジン チェック）とサードパーティのウォレット SDK（WalletConnect、Coinbase、 MetaMask）は実際の同一オリジンのスクリプティングコンテキストを必要と するため、HTML sandbox 属性を付けるとわずかな分離効果と引き換えに ウォレット接続が壊れてしまいます。分離はクロスオリジン境界、厳格な postMessage オリジンチェック、そして自社の frame-src CSP によって 代わりに担保されています。

モバイルでの考慮事項

モバイル Safari ではポップアップが積極的にブロックされます。トラフィック の大半がモバイルの場合は mode: "redirect" をデフォルトにしてください。 ポップアップオーバーレイは小画面ではキーボード領域も覆います — 金額入力 には問題ありませんが、アセット選択にはやや扱いにくいです。

ブランディング（ホワイトラベルを求める場合）

完全なホワイトラベル化には以下が必要です:

  1. SDK で hideHeader: true
  2. walletAddress を事前接続（バイヤーには WalletConnect が表示されません）
  3. マーチャントダッシュボードの branding で自社ロゴ + ブランドカラーを設定
  4. （任意）チェックアウトページのカスタムドメイン — checkout.infraio.xyz の代わりに pay.your-shop.com。CNAME を検証すればダッシュボードから セルフサーブで設定できます。

次に

対応チェーン・資産概要