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

チェックアウト — 概要

ホスト型チェックアウト は、バイヤーが実際に資金を送るページです。 アセット選択、入金先アドレス、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 経由で渡した事前接続済みウォレットから支払います。TRON、Solana、TON では、バイヤーがマーチャントのトレジャリーウォレットへ直接支払います。ウォレット直接決済ネットワーク を参照してください。
  4. ステータス表示 — 「送金を待機中」、「Tx 検出済み（3/12 確認）」、 「支払い完了」。
  5. キャンセル ボタン（常に表示）→ onCancel をトリガーします。

ページのカスタマイズ

項目方法制限
注文サマリーを非表示SDK で hideSummary: trueバイヤーはデポジットパネルで合計を引き続き確認できます
InfraIO Pay ヘッダーを非表示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 とクリップボード 書き込みだけで、それ以上のことはできません。iframe に HTML の sandbox 属性を付けないでください。ウォレット接続が壊れてしまいます。iframe は クロスオリジン境界と自社の frame-src CSP によって分離されています。

モバイルでの考慮事項

モバイルブラウザ、特に Safari ではポップアップがブロックされることが よくあります。トラフィックの大半がモバイルの場合は mode: "redirect" を 使用してください。小画面ではポップアップオーバーレイがキーボード領域も 覆うため、アセット選択が扱いにくくなります。

ホワイトラベルのブランディング

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

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

次に

前払いクレジット概要