コンテンツにスキップ

チェックアウト〜購入完了 Page Story

最終更新日: 2026年1月15日
ステータス: 草案
対象範囲: カート確認から注文完了までのユーザー体験とシステム挙動

1. 概要

本ドキュメントは、リツビ BtoB ECサイトにおける「チェックアウトから購入完了」までの画面遷移、ユーザーアクション、および背面で実行されるビジネスロジック（同意制御、価格計算、直送モード判定等）を記述した Page Story です。

2. 全体フロー図 (Mermaid)

graph TD
    Cart[1. カート画面] -->|レジに進む| Consent{同意が必要な商品?}
    Consent -->|Yes| ConsentPage[2. 同意事項確認]
    Consent -->|No| Shipping[3. 配送先選択]
    ConsentPage -->|同意する| Shipping
    Shipping -->|次へ| ShipPay[4. 配送・支払方法選択]
    ShipPay -->|次へ| Confirm[5. 注文内容確認]
    Confirm -->|注文確定| Processing{決済処理}
    Processing -->|成功| Success[6. 注文完了]
    Processing -->|失敗| Confirm

3. 各ステップの詳細

ステップ 1: カート画面 (/cart)

ユーザーが購入を決定した商品の一覧を確認する。

  • 表示内容:
  • 商品名、数量、単価、小計
  • 配送モード（通常/直送）の明示
  • 現在の掛率・特別価格の適用状態
  • ユーザーアクション:
  • 数量の最終調整
  • 「ご注文手続きへ」ボタンのクリック
  • システム挙動:
  • InventoryManagementPlugin による購入単位（5個単位等）の最終バリデーション。
  • PricingSystemPlugin による最新価格の計算。

ステップ 2: 同意事項確認 (必要時のみ)

ピール系商品や iMeso シリーズなど、特定の同意が必要な商品がカートに含まれる場合に表示。

  • 表示内容:
  • ピール系: 医師の指導下での使用、トラブル時の責任、パッチテスト実施に関するチェックボックス。
  • iMeso: 電子署名（氏名入力）を伴う誓約事項。
  • ユーザーアクション:
  • 各項目へのチェックおよび署名。
  • システム挙動:
  • ConsentSystemPlugin により同意履歴を保存。
  • 同意が完了しない限り、次のステップへの遷移を阻止。

ステップ 3: 配送先選択 (Checkout Step 1: /checkout)

商品の届け先を決定する。

  • 表示内容:
  • 既定の配送先および過去に使用した住所一覧。
  • 新規配送先の入力フォーム。
  • ユーザーアクション:
  • 既存住所の選択または新規住所の入力。
  • システム挙動:
  • setOrderShippingAddress 時に SmileIntegrationPlugin が納品先番号を判定/採番。

ステップ 4: 配送・支払方法選択 (Checkout Step 2: /checkout)

配送手段と決済手段を選択し、要望を入力する。

  • 表示内容:
  • 配送方法: 配送モード（通常/直送）および顧客ステータスに基づき、利用可能な方法（ヤマト、佐川、自社配送等）を表示。
  • 支払方法: 売掛（SMILE連動）、代引き、銀行振込等。顧客ステータスにより制限（例：新規顧客は売掛不可）。
  • 備考欄: 自由入力。
  • ユーザーアクション:
  • 配送方法の選択。
  • 支払方法の選択。
  • （任意）備考の入力。
  • システム挙動:
  • ShippingCalculatorPlugin によるブランド別送料の計算。
  • 直送モード時は「代引き」を自動的に除外し、10%手数料を加算。

ステップ 5: 注文内容確認 (Checkout Step 3: /checkout)

すべての情報を最終確認し、注文を確定する。

  • 表示内容:
  • 注文商品の最終リスト。
  • 価格計算の可視化: 商品小計、ブランド別送料、直送手数料、消費税、合計金額を明示。
  • 価格計算のステップ（掛率適用、キャンペーン割引等）の注釈。
  • ユーザーアクション:
  • 「注文を確定する」ボタンのクリック。
  • システム挙動:
  • transitionOrderToState による受注ステータスの更新。
  • 外部決済（クレジットカード等）の場合は決済ゲートウェイへリダイレクト。

ステップ 6: 注文完了 (/checkout/complete)

注文が正常に受理されたことを通知する。

  • 表示内容:
  • 注文完了メッセージ。
  • 注文番号（NetB2B_XXXXXXXX）。
  • 購入完了メールの送信通知。
  • ユーザーアクション:
  • 「トップページへ戻る」または「注文履歴を確認する」。
  • システム挙動:
  • SmileIntegrationPlugin により SMILE 連携用 CSV データの元となる注文レコードを確定。

4. 特記事項

  • 直送モード: 直送モード選択時は、店販用商品以外がカートに含まれている場合に警告を表示し、購入を制限する。
  • エラーハンドリング: 在庫切れや価格変動が発生した場合は、カート画面に戻し、エラーメッセージを表示する。
  • 分析: begin_checkout (ステップ 3開始時) および purchase (ステップ 6到達時) の GA4 イベントを発行。