<!-- Source: https://docs.infraio.xyz/ja/checkout/overview -->
<!-- Last updated: 2026-10-04 -->

# チェックアウト — 概要

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

## 3 つのモード

- [Popup](https://docs.infraio.xyz/ja/sdks/javascript#popup) — 中央寄せのオーバーレイポップアップ、デフォルトで約 560×780。 ストアフロントはそのまま維持されます。決済後にポップアップが 閉じると `onSuccess` が発火します。デフォルトモードです。
- [Redirect](https://docs.infraio.xyz/ja/sdks/javascript#redirect) — チェックアウトへのハードナビゲーションです。ポップアップが ブロックされるブラウザや、オーバーレイが違和感を生むモバイル Web に最適です。バイヤーはセッションの `success_url` / `cancel_url` 経由で戻ってきます。
- [Embed](https://docs.infraio.xyz/ja/sdks/javascript#embed) — 自社ページ内の iframe です。レイアウトをエンドツーエンドで 自社が制御し、コンテキストの切り替えをゼロにしたい場合に 最適です。postMessage 経由で自動リサイズします。

## モードの選び方の目安

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

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

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

1. **注文サマリー**（行明細、合計、通貨）。自社側で既にこれを表示
   している場合は `hideSummary` で非表示にできます。
2. **アセット選択** — マーチャント設定で有効化したチェーン × アセットの
   組み合わせの一覧。バイヤーがその中から 1 つを選びます。
3. 選択した組み合わせに対応する **入金先アドレス + QR + 金額**。
   バイヤーはスキャンするか、ウォレットを接続する（WalletConnect
   ボタン）か、SDK 経由で渡した事前接続済みウォレットから支払います。TRON、Solana、TON では、バイヤーがマーチャントのトレジャリーウォレットへ直接支払います。[ウォレット直接決済ネットワーク](https://docs.infraio.xyz/ja/concepts/chains#ウォレット直接決済ネットワーク) を参照してください。
4. **ステータス表示** — 「送金を待機中」、「Tx 検出済み（3/12 確認）」、
   「支払い完了」。
5. **キャンセル** ボタン（常に表示）→ `onCancel` をトリガーします。

## ページのカスタマイズ

| 項目 | 方法 | 制限 |
| --- | --- | --- |
| 注文サマリーを非表示 | SDK で `hideSummary: true` | バイヤーはデポジットパネルで合計を引き続き確認できます |
| InfraIO Pay ヘッダーを非表示 | SDK で `hideHeader: true` | 完全なホワイトラベル化には `walletAddress` と組み合わせます |
| ウォレットを事前接続 | `walletAddress` + `walletChainId` + `onSignRequest` | WalletConnect モーダルをバイパスします |
| ロケール | 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` に当方のオリジンを
許可する必要があります:

```http
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 を検証したら、ダッシュボードで
   設定します。

## 次に

- [SDK → JavaScript](https://docs.infraio.xyz/ja/sdks/javascript) — モードごとの完全な
  オプションリファレンス。
- [コンセプト → セッション](https://docs.infraio.xyz/ja/concepts/sessions) — バイヤーがページを
  開いている間、サーバー側で何が起きているか。
- [コンセプト → チェーン & アセット](https://docs.infraio.xyz/ja/concepts/chains) — 選択画面で
  利用可能なチェーン × アセットの組み合わせ。