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

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

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個単位等）の最終バリデーション。
• Product custom field (purchasableFrom / purchasableTo) に基づき、購入可能期間外の商品は数量変更を不可にし、サーバー側の再判定と同じ理由を画面へ表示する。
• CommercialRulesPlugin による最新価格・特典・注文調整の計算。
• reservationOrderType などの reservation custom field に基づき、予約商品を checkout 全体で判定する。

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

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

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

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

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

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

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

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

• 表示内容:
• 配送方法: 配送モード（通常/直送）および顧客ステータスに基づき、利用可能な方法を表示する。既定値は SMILE 顧客情報の shippingCompanyCode と ShippingMethod のマッピングから自動選択する。
• 配送希望日: 通常商品のみの注文では、先頭に「最短日出荷」を置き、続けて選択中の配送方法に紐づく配送キャリア設定、SMILE 連携設定の締め時刻、チャネルの営業スケジュールに基づく候補日を select box で表示する。未保存の注文では「最短日出荷」を初期選択とし、保存済みの有効な日付指定がある場合は復元する。予約商品を含む注文では入力を無効化する。
• 配送希望時間帯: 選択中の配送方法で許可された時間帯候補を select box で表示し、「指定なし」を先頭候補・初期選択とする。配送方法側の deliveryTimeSlots に「指定なし」が含まれない場合も checkout では補完する。保存済みの有効な時間帯指定がある場合は復元する。
• 支払方法: 売掛（SMILE連動）、代引き、銀行振込等。顧客ステータスにより制限（例：新規顧客は売掛不可）。
• 備考欄: 定型文の複数選択と自由入力補足。
• ユーザーアクション:
• 配送方法の選択。
• 支払方法の選択。
• （任意）備考の入力。
• システム挙動:
• ShippingCalculatorPlugin によるキャリア × 都道府県別送料の計算（ProvinceDeliveryProfile）。
• 直送モード時は「代引き」を自動的に除外し、商品上代の 10% を直送手数料として加算する（代引き手数料そのものは顧客から徴収しない方針＝Issue #821）。
• 既定配送方法は原則 Customer.customFields.shippingCompanyCode と ShippingMethod.customFields.smileShippingCompanyCodes に照合して決定する。shippingCompanyCode が未設定でも checkout 時点の候補が 1 件に確定している場合はその 1 件を採用し、それ以外で一致しない場合は checkout を進めず、お問い合わせ導線を表示する。shippingCompanyCode が未設定で解決に失敗した場合は Sentry に warning レベルで通知し、データ不備を早期検出できるようにしている（checkout: shipping method resolution failed）。
• checkoutDeliverySettings query は defaultCutoffTime とチャネル単位の補助設定を返す。defaultCutoffTime は SMILE Export Settings の保存値を正本とし、未保存時は共有定数 DEFAULT_CUTOFF_TIME ("14:00") にフォールバックする（checkout の配送日 selector を silent hide させないため）。実際の配送希望日レンジと時間帯候補は選択中 ShippingMethod.customFields を正本として解決する。
• 締め時刻超過時は最短配送希望日を 1 営業日後ろ倒しし、日付指定候補は 最短配達可能日 + 開始オフセット から + 終了オフセット までの営業日だけを表示する。これとは別に「最短日出荷」を常に選択可能にする。
• 運用担当者は Vendure Dashboard の ShippingMethod 詳細でキャリア別の配送希望日候補と配送時間帯候補を更新し、Channel 詳細では締め時刻と営業スケジュール（休業曜日・休業日）を更新する。
• 配送希望日または配送希望時間帯の設定が未入力の配送方法では、該当する selector を checkout に表示しない。
• 予約商品が 1 行でも含まれる場合は、配送希望日を保存せず、配送時間帯のみを受け付ける。
• ご要望事項は定型文の複数選択と自由入力補足を併用できる。定型文候補は Vendure Dashboard の Channel 設定を正本とし、保存時は Order.customFields.specialInstructions へ改行区切りで統合する。

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

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

• 表示内容:
• 注文商品の最終リスト。予約商品を含む場合は通常商品と予約商品を分けて表示する。
• 価格計算の可視化: 通常商品小計、予約商品小計、各レーンの送料、直送手数料、消費税、合計金額を明示。
• 価格計算のステップ（掛率適用、キャンペーン割引等）の注釈。
• 予約注文を含む場合の注意文。
• ユーザーアクション:
• 「注文を確定する」ボタンのクリック。
• システム挙動:
• transitionOrderToState による受注ステータスの更新。
• checkout で日付候補を選択した場合は注文 custom field の deliveryDate に保存し、配送希望時間帯は deliveryTimeSlot に保存する。「最短日出荷」を選択した場合は deliveryDate を保存せず、specialInstructions に 最短日出荷 を付与して帳票・SMILE 連携へ渡す。
• 予約商品を含む注文では aggregate 親注文を起点に通常受注と予約受注の seller order を生成し、予約受注は releaseGroupKey と出荷予定日ごとに分割・統合する。
• InventoryManagementPlugin が注文確定直前に各商品の購入可能期間を再判定し、期間外の商品が含まれる場合はサーバー側で遷移を拒否する。
• 外部決済（クレジットカード等）の場合は決済ゲートウェイへリダイレクト。

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

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

• 表示内容:
• 注文完了メッセージ。
• 注文番号。予約商品を含む場合は関連する通常受注/予約受注の番号一覧も併記する。
• 購入完了メールの送信通知。
• ユーザーアクション:
• 「トップページへ戻る」または「注文履歴を確認する」。
• システム挙動:
• SmileIntegrationPlugin により SMILE 連携用 CSV データの元となる注文レコードを確定。
• 予約商品を含む場合は、注文履歴から関連する seller order を辿れる状態で完了画面へ遷移する。

4. 特記事項

• 直送モード: 直送モード選択時は、店販用商品以外がカートに含まれている場合に警告を表示し、購入を制限する。
• 商品購入可能期間: 商品詳細・カート・注文確定は同じ Product custom field を参照し、UI 側の案内と Vendure Server 側の拒否理由を一致させる。
• 配送希望日: 日付候補は JST 日付ベースで保存し、最短選択日は SMILE 連携設定の締め時刻を基準に決定する。未保存の注文では「最短日出荷」を初期選択とし、この場合は日付ではなく備考として保存する。
• エラーハンドリング: 在庫切れや価格変動が発生した場合は、カート画面に戻し、エラーメッセージを表示する。
• 予約注文: 予約商品を含む注文は checkout 中は 1 注文として扱うが、確定後は通常受注と予約受注の seller order に分離する。
• 分析: begin_checkout (ステップ 3開始時) および purchase (ステップ 6到達時) の GA4 イベントを発行。