> ## Documentation Index
> Fetch the complete documentation index at: https://waffo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Checkout 連携 - 連携手順
> Waffo ホスト型 Checkout を使用した決済連携の完全な手順。
Checkout は最もシンプルな連携方法です。ユーザーを Waffo ホスト型の決済ページへリダイレクトするだけで、機微なカード情報を取り扱う必要はありません。
本ページは**サーバー側**の責務（注文の作成、Webhook コールバックの受信）と**フロントエンド**の責務（orderAction の解析、リダイレクト、iframe / window\.open / WebView 埋め込み）の両方を扱います。役割に応じて該当箇所をお読みください。
## ワークフロー
```mermaid theme={null}
sequenceDiagram
participant M as Merchant server
participant W as Waffo
participant U as User
M->>W: 1. Create order (API)
W-->>M: 2. Return orderAction
M->>U: 3. Redirect user
U->>W: 4. User completes payment
W-->>M: 5. Webhook notification
W->>U: 6. Redirect back to merchant
```
決済作成 API を呼び出して、レスポンス内の `orderAction`（JSON文字列）を取得します。
`orderAction` を解析し、`actionType` に応じて `webUrl` または `deeplinkUrl` を使用します。ユーザーは Waffo の Checkout ページで決済を完了します。
* **Webhook**（推奨）：Waffo が `notifyUrl` に決済結果通知を送信します
* **リダイレクト**：決済成功時は `successRedirectUrl`、事前検証失敗または決済失敗時は `failedRedirectUrl`、ユーザーが決済を中止して継続しない場合は `cancelRedirectUrl` にリダイレクトされます
* **能動的な照会**：決済照会 API を呼び出します
リダイレクトはユーザーが加盟店サイトに戻ったことを示すに過ぎず、決済成功を意味するものではありません。必ず Webhook または能動的な照会結果を信頼してください。
### Checkout URL を取得する
`orderAction` は JSON 文字列です。先に解析し、`actionType` に応じて URL を選択します：
`payMethodType` と `payMethodName` の値によって、最初に Waffo の決済手段選択ページへ入るかどうかが変わります。詳しくは [Cashier 連携 - カスタマイズオプション](/docs/ja/developer-docs/integration/checkout/customization) を参照してください。
```typescript theme={null}
const orderAction = JSON.parse(response.data.orderAction);
const checkoutUrl = orderAction.actionType === 'DEEPLINK'
? orderAction.deeplinkUrl
: orderAction.webUrl;
```
### 決済手段の事前設定
* **WeChat Pay**: 本番環境でWeChat Payを有効化する場合は、事前に本番ドメインをWaffoへ提出してください。Waffoが決済チャネル側に申請します。
***
## iframe 埋め込み時の注意事項
Waffo Checkout を iframe 内に埋め込む場合、以下に注意してください：
### 必須設定
* **`allow="payment"` 属性**：iframe タグには `allow="payment"` を含める必要があります。含めない場合、Android 端末で Google Pay などの決済手段が動作しません。
* **Referrer Policy**：`strict-origin-when-cross-origin` に設定する必要があります。設定しないと WeChat Pay が失敗します。
```html theme={null}
```
### レスポンシブ幅
固定幅（例：`width: 700px`）は使用しないでください。異なる端末でコンテンツが見切れます。代わりにレスポンシブレイアウトを使用してください：
```css theme={null}
.checkout-container {
overflow: scroll;
height: calc(100vh - 40px);
}
```
### 既知の制限事項
* **Apple Pay**：iframe 連携では Waffo フロントエンド SDK を必ず使用してください。事前に Waffo テクニカルサポートへ連絡し、ドメイン検証と申請を完了します。通常の iframe で `orderAction.webUrl` を直接読み込まないでください。[Apple Pay の連携](/docs/ja/developer-docs/integration/apple-pay/overview#方式-3iframe-で-waffo-apple-pay-checkout-を読み込む)を参照してください。
* **JKOPAY**：iframe 読み込みに対応していません。
* **モバイル**：iframe に固定サイズが設定されていると、モバイル上で PC の横向きページとして表示されないか確認してください。
* 決済手段または決済手段タイプごとの制限については、[決済手段別の連携注意事項](/docs/ja/developer-docs/tools-and-references/references/payment-method-integration-notes)を参照してください。
***
## `window.open` 埋め込み時の注意事項
`window.open` で Checkout を開く場合：
* **同期呼び出しは問題なし**：クリックイベントハンドラー内で `window.open()` を直接呼び出す場合は問題なく動作します。
* **非同期呼び出しはブロックされる**：`await` の後に `window.open()` を呼び出すと、ブラウザはポップアップをブロックします。回避策：先に `window.open()` で空のウィンドウを開いてから、非同期に取得した URL を代入する。または確認ダイアログを表示し、ユーザーがクリックして手動で開けるようにする。
* **Apple モバイル**：ユーザージェスチャーの検出が厳格で、非同期オープンはほぼ常にブロックされます。
***
## App WebView 連携時の注意事項
加盟店アプリが WebView 内で Checkout を読み込む場合：
* **外部起動機能**：App と WebView が外部 App または外部ブラウザページを開けることを確認してください。一部のウォレットは deeplink または外部ページで認可を完了します。これを制限すると決済フローを継続できません。
* **ダウンロードとコピー機能**：WebView は既定ではファイルダウンロード、コピー、長押し保存に対応していない場合があります。QR、OTC、銀行振込系の決済手段ではこれらの機能が必要になることがあります。
* **リダイレクト URL の完全性**：ネイティブ App と WebView の間で URL を受け渡す場合、URL を書き換えたり query パラメータを削除したりしないでください。一部の決済手段はリダイレクト URL に必須パラメータを追加します。
* **`userTerminal`**：`WEB` ではなく `APP` を渡して、アプリ環境向けに最適化されたリダイレクトリンクを受け取ってください。
* **決済手段固有の制限**：PayPay Smart Payment、Google Pay、Apple Pay、JKOPAY など環境ごとの制限については、[決済手段別の連携注意事項](/docs/ja/developer-docs/tools-and-references/references/payment-method-integration-notes)を参照してください。