チェックアウト概要
Waffo Pancake は、コンバージョン最適化された2ステップチェックアウトフローを採用しています。顧客情報を先に収集し、次に支払い情報を入力するこの設計により、離脱率を低減し、正確な税計算をサポートします。
チェックアウト URL
チェックアウトページはセッションベースの URL 構造を使用します：
https://your-domain.com/store/{store-slug}/checkout/{sessionId}
| コンポーネント | 説明 |
|---|
store-slug | ストアの一意な URL スラッグ |
sessionId | 顧客がチェックアウトを開始した際に作成されるチェックアウトセッション識別子 |
チェックアウトセッションはサーバー側で生成され、商品、価格、通貨情報を含みます。
2ステップフロー
ステップ1：顧客情報
税計算と注文処理に必要な情報を収集します。
必須項目：
| フィールド | 用途 |
|---|
| メールアドレス | 領収書、アカウント作成、カスタマーポータルへのアクセス |
| 国 | 税管轄の判定 |
| フィールド | 表示される場合 |
|---|
| 郵便番号 | ほとんどの国（米国、カナダ、英国など） |
| 州/地方 | 米国、カナダ、オーストラリア、インド、その他該当する国 |
ステップ2：お支払い
カード決済
- カード番号
- 有効期限（MM/YY）
- CVC/CVV
- カード名義人
デジタルウォレット
- Apple Pay（iOS、Safari）
- Google Pay（Android、Chrome）
- 生体認証によるワンクリック決済
サブスクリプションのチェックアウト
サブスクリプション商品の場合、追加の請求情報が表示されます：
| 要素 | 例 |
|---|
| 請求頻度 | 「月額請求」 |
| 継続金額 | 「$29.00/月」 |
| 次回請求日 | 本日から計算 |
| トライアル期間 | 「7日間無料トライアル」（商品にトライアルが有効な場合） |
カスタマイズ
ダッシュボードのチェックアウト設定から、チェックアウトページをブランドに合わせてカスタマイズできます。
チェックアウトページに表示されるカスタムロゴをアップロードできます。対応フォーマットは PNG、JPG、SVG です。
テーマモード
ライトモード
白背景、ダークテキスト。ほとんどのブランドに最適。
ダークモード
暗い背景、明るいテキスト。モダンな外観。
カラー設定
| 設定 | フィールド名 | デフォルト（ライト） | デフォルト（ダーク） |
|---|
| プライマリカラー | checkoutColorPrimary | #7CCB02 | #ADFF85 |
| 背景色 | checkoutColorBackground | #FFFFFF | #0A1A1F |
| カードカラー | checkoutColorCard | #F3F4F6 | #0A1A1F |
| テキストカラー | checkoutColorText | #111827 | #FFFFFF |
| セカンダリテキストカラー | checkoutColorTextSecondary | #8C8C8C | #8C8C8C |
checkoutBorderRadius 設定で UI 要素の角丸を調整できます。デフォルトは 8px です。0px（角丸なし）から 16px（大きな角丸）まで設定できます。
アクセシビリティのため、テキストと背景色の間に十分なコントラストを確保してください。WCAG では 4.5:1 以上のコントラスト比を推奨しています。
ストア情報
| オプション | 説明 |
|---|
| ストア名 | ヘッダーに表示 |
| サポートメール | 顧客からの問い合わせ用 |
| 利用規約リンク | 利用規約へのリンク（必須） |
| プライバシーリンク | プライバシーポリシーへのリンク（必須） |
多言語サポート
チェックアウトは顧客のブラウザ言語に合わせて自動的に表示されます：
処理と結果
支払い送信後：
- カード検証 — Luhn チェック、有効期限、CVC 検証
- 3D セキュア — 銀行認証（発行銀行が要求する場合）
- オーソリゼーション — カードへの課金
- 注文作成 — システムへの記録
成功ページ： 注文確認番号、領収メール通知、次のステップ、カスタマーポータルリンク。
失敗ページ： 明確なエラー説明、推奨アクション、再試行ボタン、サポート連絡オプション。
エラー処理
| エラー | 原因 | 顧客のアクション |
|---|
| カード拒否 | 残高不足または銀行によるブロック | 別のカードを試す |
| 無効なカード | カード番号の誤り | 確認して再入力 |
| 有効期限切れ | カードの有効期限超過 | 有効なカードを使用 |
| CVC 不一致 | セキュリティコードの誤り | CVC を再入力 |
| 3DS 失敗 | 銀行認証失敗 | 銀行に連絡 |
テストチェックアウト
テストモードを使用して、実際の課金なしでチェックアウトフローを試すことができます。
| カード | 番号 | 結果 |
|---|
| Visa 成功 | 4242 4242 4242 4242 | 成功 |
| 拒否 | 4000 0000 0000 0002 | 拒否 |
| 3DS 必須 | 4000 0027 6000 3184 | 3D セキュアフロー |
テストモードはバナーで示されます：「テストモード - 実際の課金は行われません」
記録商の通知
チェックアウトのフッターに、顧客は以下の表示を確認します：
「この注文は、当社のオンラインリセラーおよび記録商である Waffo Pancake によって処理されます。注文関連のお問い合わせや返品も Waffo Pancake が対応いたします。」
この開示は MoR コンプライアンスのために必要であり、顧客が支払い関係を理解するのに役立ちます。
