Miss World Japan 2026 - Kiro Docs

テーマ

Requirements: 投票券購入フロー ​

概要 ​

有料投票を行うために投票券（クレジット）パッケージを選択し、Stripe決済を経て購入する一連のフロー。投票券購入モーダルでパッケージを選択し、決済モーダルで決済を行い、決済成功後に該当候補者へ購入クレジット数分の投票が一括で投入される。

関連UI ​

  • 投票券購入モーダル（パッケージ選択）
  • 決済モーダル（カード情報入力 + 決済）

ファイル配置・型定義・実装詳細は design.md、ビジュアル仕様は ui-design.md を参照。

機能仕様 ​

Feature 1: 投票券購入モーダルの表示 ​

Purpose: 候補者を選択した状態で有料投票を要求されたとき、購入モーダルを起動し、閉じた際は選択状態を確実にリセットする。 Scope: 投票券購入モーダルの開閉制御。

Acceptance Criteria (EARS) ​

  • WHEN ユーザーが有料投票を要求した AND 候補者が選択されている THEN システムは投票券購入モーダルを表示する
  • WHEN ユーザーがモーダルを閉じる操作をした THEN システムはモーダルを閉じ、選択中候補者をリセットする

Feature 2: 投票券購入モーダルのコンテンツ ​

Purpose: 購入対象候補者と選択可能なパッケージを一画面で完結して提示する。 Scope: 投票券購入モーダル内コンテンツ。

Acceptance Criteria (EARS) ​

  • THE SYSTEM SHALL モーダル内に以下の情報を含める:
    • 対象候補者名と購入対象であることが分かる見出し
    • 投票券パッケージ一覧とそれぞれの購入アクション

Feature 3: 投票券パッケージ定義 ​

Purpose: 提供する投票券パッケージの票数・価格・推奨表示の対応関係を仕様として固定する。 Scope: 投票券パッケージ一覧のデータ定義。

Acceptance Criteria (EARS) ​

  • THE SYSTEM SHALL 以下の投票券パッケージを提供する:
票数価格(税込)識別
10票¥1,000–
35票¥3,000人気として強調
60票¥5,000–
150票¥10,000–

Feature 4: パッケージ選択と認証連携 ​

Purpose: 未認証ユーザーが購入を試みた場合に選択を保留してログインに誘導し、認証成功後に購入フローを中断なく継続する。 Scope: パッケージ選択時の状態遷移。

Acceptance Criteria (EARS) ​

  • WHEN ユーザーが任意のパッケージを選択した AND 未認証 THEN システムは選択したパッケージを保留状態として保存し、ログインモーダルを開く
  • WHEN ユーザーが任意のパッケージを選択した AND 認証済み THEN システムは決済モーダルを開く
  • WHEN ログイン成功後に保留中のパッケージが存在する THEN システムは決済モーダルを自動で開き、保留中の購入を継続する

Feature 5: 決済モーダル: フォーム ​

Purpose: 決済に必要なカード情報入力UIを提供し、入力中の整形・桁数制限により誤入力を抑制する。 Scope: 決済モーダルの入力フィールド。

Acceptance Criteria (EARS) ​

  • WHEN 決済モーダルが開く THEN システムは以下の入力フィールドを提示する:
    • カード番号
    • 有効期限
    • CVC
    • カード名義
  • THE SYSTEM SHALL カード番号を 16 桁に制限し、入力中に 4 桁ごとのスペース区切り表記に整形する
  • THE SYSTEM SHALL 有効期限を MM/YY 形式に整形する
  • THE SYSTEM SHALL CVC を 3 桁に制限する
  • WHEN ユーザーが数字専用フィールドに数字以外を入力した THEN システムは入力を無視する

Feature 6: 決済モーダル: 決済情報の提示 ​

Purpose: 決済金額と購入対象、安全性の根拠をユーザーへ明示する。 Scope: 決済モーダルの情報表示領域。

Acceptance Criteria (EARS) ​

  • THE SYSTEM SHALL 決済金額（円表記）と購入アイテム名を明示する
  • THE SYSTEM SHALL Stripe による安全な決済であることをユーザーに伝達する

Feature 7: 決済実行 ​

Purpose: 擬似処理で決済成功までの状態遷移を再現し、成功時に投票加算とモーダルクローズを連動させる。 Scope: 決済シーケンス。

Acceptance Criteria (EARS) ​

  • WHEN ユーザーが決済確定を要求した THEN システムは決済処理中状態に遷移し、追加入力を受け付けない
  • WHEN 擬似処理が完了した THEN システムは決済成功状態に遷移し、成功フィードバックを一定時間表示する
  • WHEN 成功表示が完了した THEN システムは投票数を加算しモーダルを閉じる

Feature 8: 決済成功後の処理 ​

Purpose: 決済成功時に投票加算・残数更新・成功表示・モーダルクローズ・選択リセットを一連のフローとして完了させる。 Scope: 決済成功後の後処理シーケンス。

Acceptance Criteria (EARS) ​

  • WHEN 決済が成功した THEN システムは以下を順次実行する:
    1. 購入クレジット数分の投票を該当候補者に加算する
    2. ユーザーの投票券残数を加算する
    3. ユーザーに視覚的な成功フィードバックを一定時間提示する
    4. 投票券購入モーダルを閉じる
    5. 選択中候補者をリセットする

Feature 9: モーダル閉じ時のリセット ​

Purpose: 決済モーダルを閉じる際に入力値と状態をリセットし、処理中の意図しない中断を防ぐ。 Scope: 決済モーダルのライフサイクル管理。

Acceptance Criteria (EARS) ​

  • WHEN ユーザーが決済モーダルを閉じた THEN システムは入力フィールド（カード番号、有効期限、CVC、カード名義）と決済状態をリセットする
  • WHEN 決済処理中 THEN システムは閉じる操作を無効化する

非機能要件 ​

  • 税表示: 価格は税込み表記とし、明示する

セキュリティ（PCI DSS、Webhook署名検証、冪等性等）は steering/tech.md の「セキュリティポリシー（全画面共通）」を参照。

エッジケース ​

  • 決済処理中のモーダル閉じ操作: 処理中は閉じる操作を無効化する

依存仕様 ​

  • social-login/requirements.md（未認証時の連携）
  • voting-flow/requirements.md（投票数加算ルール）