> ## Documentation Index
> Fetch the complete documentation index at: https://docs.waffo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# チェックアウト

> コンバージョン最適化された2ステップチェックアウトフロー

## チェックアウト概要

Waffo Pancake は、コンバージョン最適化された**2ステップチェックアウトフロー**を採用しています。顧客情報を先に収集し、次に支払い情報を入力するこの設計により、離脱率を低減し、正確な税計算をサポートします。

***

## チェックアウト URL

チェックアウトページはセッションベースの URL 構造を使用します：

```
https://checkout.waffo.ai/{store-slug}/{product-slug}
```

| コンポーネント      | 説明                                    |
| ------------ | ------------------------------------- |
| `store-slug` | ストアの一意な URL スラッグ                      |
| `sessionId`  | 顧客がチェックアウトを開始した際に作成されるチェックアウトセッション識別子 |

<Note>
  チェックアウトセッションはサーバー側で生成され、商品、価格、通貨情報を含みます。
</Note>

***

## 2ステップフロー

<Steps>
  <Step title="消費者情報" icon="user">
    メールアドレス、国、請求情報を収集。税計算と注文処理に使用。
  </Step>

  <Step title="決済" icon="credit-card">
    カード情報を入力、または Apple Pay / Google Pay で決済を完了。
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/waffo/fAGQ8sa2qycWEk2d/images/checkout/checkout-step1.png?fit=max&auto=format&n=fAGQ8sa2qycWEk2d&q=85&s=e7454a2c64f08d42fe0fa1ac4084b712" alt="チェックアウトページ — 消費者情報" width="1440" height="900" data-path="images/checkout/checkout-step1.png" />
</Frame>

### ステップ1：消費者情報

税計算と注文処理に必要な情報を収集します。

**必須項目：**

| フィールド   | 用途                          |
| ------- | --------------------------- |
| メールアドレス | 領収書、アカウント作成、カスタマーポータルへのアクセス |
| 国       | 税管轄の判定                      |

**条件付きフィールド（国に基づく）：**

| フィールド | 表示される場合                     |
| ----- | --------------------------- |
| 郵便番号  | ほとんどの国（米国、カナダ、英国など）         |
| 州/地方  | 米国、カナダ、オーストラリア、インド、その他該当する国 |

**法人購入オプション：**
顧客は「法人として購入」を切り替えることで以下を入力できます：

* 会社名
* Tax ID（VAT/税免除用）

### ステップ2：お支払い

<Frame>
  <img src="https://mintcdn.com/waffo/YbM_n4_eoBfrCsTT/images/checkout/checkout-step2.png?fit=max&auto=format&n=YbM_n4_eoBfrCsTT&q=85&s=e424a83d42c68d5946214be7f18cbbb7" alt="チェックアウト — 決済" width="1440" height="900" data-path="images/checkout/checkout-step2.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="カード決済" icon="credit-card">
    * カード番号
    * 有効期限（MM/YY）
    * CVC/CVV
    * カード名義人
  </Card>

  <Card title="デジタルウォレット" icon="wallet">
    * Apple Pay（iOS、Safari）
    * Google Pay（Android、Chrome）
    * 生体認証によるワンクリック決済
  </Card>
</CardGroup>

**注文概要**は支払いフォームの横に表示され、商品名、画像、小計、税額、合計金額が含まれます。

***

## サブスクリプションのチェックアウト

サブスクリプション商品の場合、追加の請求情報が表示されます：

| 要素      | 例                            |
| ------- | ---------------------------- |
| 請求頻度    | 「月額請求」                       |
| 継続金額    | 「\$29.00/月」                  |
| 次回請求日   | 本日から計算                       |
| トライアル期間 | 「7日間無料トライアル」（商品にトライアルが有効な場合） |

***

## カスタマイズ

ダッシュボードのチェックアウト設定から、チェックアウトページをブランドに合わせてカスタマイズできます。

### ロゴ

チェックアウトページに表示されるカスタムロゴをアップロードできます。対応フォーマットは PNG、JPG、SVG です。

### テーマモード

<CardGroup cols={2}>
  <Card title="ライトモード" icon="sun">
    白背景、ダークテキスト。ほとんどのブランドに最適。
  </Card>

  <Card title="ダークモード" icon="moon">
    暗い背景、明るいテキスト。モダンな外観。
  </Card>
</CardGroup>

ライトモードとダークモードのプリセットを切り替えられます。各モードは独自のカラー値セットを保持します。

### カラー設定

| 設定           | フィールド名                    | デフォルト（ライト） | デフォルト（ダーク） |
| ------------ | ------------------------- | ---------- | ---------- |
| **プライマリカラー** | `checkoutColorPrimary`    | #7CCB02    | #ADFF85    |
| **背景色**      | `checkoutColorBackground` | #FFFFFF    | #0A1A1F    |
| **カードカラー**   | `checkoutColorCard`       | #F3F4F6    | #0A1A1F    |
| **テキストカラー**  | `checkoutColorText`       | #111827    | #FFFFFF    |

### 角丸

`checkoutBorderRadius` 設定で UI 要素の角丸を調整できます。デフォルトは `8px` です。0px（角丸なし）から 16px（大きな角丸）まで設定できます。

<Note>
  アクセシビリティのため、テキストと背景色の間に十分なコントラストを確保してください。WCAG では 4.5:1 以上のコントラスト比を推奨しています。
</Note>

### ストア情報

| オプション     | 説明                  |
| --------- | ------------------- |
| ストア名      | ヘッダーに表示             |
| サポートメール   | 顧客からの問い合わせ用         |
| 利用規約リンク   | 利用規約へのリンク（必須）       |
| プライバシーリンク | プライバシーポリシーへのリンク（必須） |

***

## 多言語サポート

チェックアウトは顧客のブラウザ言語に合わせて自動的に表示されます：

| 言語       | コード |
| -------- | --- |
| 英語       | en  |
| 中国語（簡体字） | zh  |
| 日本語      | ja  |

***

## 処理と結果

支払い送信後：

1. **カード検証** -- Luhn チェック、有効期限、CVC 検証
2. **3D セキュア** -- 銀行認証（発行銀行が要求する場合）
3. **オーソリゼーション** -- カードへの課金
4. **注文作成** -- システムへの記録

**成功ページ：** 注文確認番号、領収メール通知、次のステップ、カスタマーポータルリンク。

**失敗ページ：** 明確なエラー説明、推奨アクション、再試行ボタン、サポート連絡オプション。

***

## エラー処理

| エラー     | 原因               | 顧客のアクション  |
| ------- | ---------------- | --------- |
| カード拒否   | 残高不足または銀行によるブロック | 別のカードを試す  |
| 無効なカード  | カード番号の誤り         | 確認して再入力   |
| 有効期限切れ  | カードの有効期限超過       | 有効なカードを使用 |
| CVC 不一致 | セキュリティコードの誤り     | CVC を再入力  |
| 3DS 失敗  | 銀行認証失敗           | 銀行に連絡     |

***

## テストチェックアウト

[テストモード](/ja/features/test-mode)を使用して、実際の課金なしでチェックアウトフローを試すことができます。

| タイプ              | 番号                    | 結果 |
| ---------------- | --------------------- | -- |
| Visa クレジット       | `4576 7500 0000 0110` | 成功 |
| Mastercard クレジット | `2226 9000 0000 0110` | 成功 |
| Visa クレジット       | `4576 7500 0000 0220` | 拒否 |

<Note>
  テストモードはバナーで示されます：「テストモード - 実際の課金は行われません」
</Note>

***

## 記録商の通知

チェックアウトのフッターに、顧客は以下の表示を確認します：

> 「この注文は、当社のオンラインリセラーおよび記録商である Waffo Pancake によって処理されます。注文関連のお問い合わせや返品も Waffo Pancake が対応いたします。」

この開示は MoR コンプライアンスのために必要であり、顧客が支払い関係を理解するのに役立ちます。