Customer Subscription Purchase Flow & Implementation Plan

This document defines the 4-step customer-side user journey, screen components, form fields, and the technical implementation plan for subscribing to a Yoyacoo Subscription-type service.

The purchase process follows a structured 4-Step Checkout Flow:

1. Form Input Screen (Step 1)
2. Credit Card Input Screen (Step 2)
3. Confirm Screen (Step 3)
4. Completion / Post-Purchase Content (Step 4)

1. Step 1: Form Input Screen

This screen allows the customer to review their selected plan and input their detailed personal and corporate information.

Visual Components & Data Display

• Progress Bar: Displays 01 お客様情報の入力 (Customer Information Input) as the active step.
• Selected Service Menu:
  • Displays the selected tier’s name, contract duration (e.g., 4 months), and free trial duration (e.g., 30 days).
  • Shows the monthly payment amount in JPY.
• Customer Information Form:
  • Name (姓・名) & Kana (セイ・メイ): Required text inputs.
  • Phone Number (電話番号): Required input (no hyphens).
  • Address (住所): Postal Code (with auto-fill address button), Prefecture dropdown, and Street Address. Required.
  • Date of Birth (生年月日) & Age (年齢): Required.
  • Gender (性別): Selectable options (Male, Female, Unanswered). Required.
  • Email Address (メールアドレス): Required email input.
  • Social IDs: LINE, Facebook, X (Twitter), Instagram IDs. Required.
  • Newsletter Opt-in (お知らせメール配信): Subscribe or Do Not Subscribe. Required.
  • Corporate Info: Company Name, Industry dropdown, Department Name, Website URL. Required.
• Navigation Actions: “支払方法選択へ進む” (Proceed to Payment Method) and “前の画面に戻る” (Back).

2. Step 2: Credit Card Input Screen

This screen collects the customer’s secure payment information.

Visual Components & Data Display

• Progress Bar: Displays 02 支払方法選択 (Select Payment Method) as the active step.
• Payment Summary:
  • Shows the monthly payment amount.
  • Displays a notice block indicating when the first payment will occur if a free trial is active (e.g., “After the 30-day free trial, automatic payments will start on March 16, 2026”).
• Stripe Secure Credit Card Form:
  • Card Number: Required.
  • Cardholder Name: Required.
  • Expiry Date (MM/YY): Required.
  • Security Code (CVC): Required.
  • Includes supported card brand logos (Visa, Mastercard, JCB, Amex, etc.).
• Navigation Actions: “確認画面へ進む” (Proceed to Confirmation) and “前の画面に戻る” (Back).

3. Step 3: Confirm Screen

This screen serves as the final confirmation of all entered details and requires the customer to agree to the terms before final submission.

Visual Components & Data Display

• Progress Bar: Displays 03 内容確認 (Confirm Content) as the active step.
• Warning Notice: Prominent alert reminding the user that the application is not yet complete.
• Service & Payment Summary:
  • Selected Plan, Duration, Trial Period, and Monthly Price.
  • Payment Method (Credit Card).
• Input Data Review: Displays all customer details entered in Step 1 as read-only text (Name, Kana, Phone, Address, Newsletter preference, etc.).
• Terms & Policies:
  • Link to specific commercial transaction laws and cancellation policies.
  • Agreement checklist containing links to the Terms of Use and Privacy Policy. The user must agree to these to proceed.
• Navigation Actions: “申し込みを確定する” (Confirm Application) and “入力内容の変更” (Change Input Details).

4. Step 4: Post-Purchase Content (Completion Screen)

This screen appears immediately after a successful transaction or application submission.

Visual Components & Data Display

• Progress Bar: Displays 04 完了 (Completion) as the active step.
• Transaction State Header:
  • Displays a success message such as “ご購入ありがとうございます！” (Thank you for subscribing!).
• Dynamic Post-Purchase Sections (Configured by Creator):
  • Welcome Videos: Embedded YouTube/Vimeo video players.
  • Digital Downloads: CTA buttons linking to materials provided as part of the subscription.
• Creator Contact / Support Details: Contact Name, Email, and Phone for support.

Implementation Plan

1. Frontend Architecture & Routing

• Page Structure: Build a wizard-like flow handling the 4 steps dynamically via URL parameters or local component state within the /subscription/[uuid]/purchase route.
• State Management (Jotai / React Context):
  • Implement a global store to persist form inputs across steps. This ensures data is not lost if the user navigates back from Step 3 to Step 1.
• Validation: Use react-hook-form combined with zod or yup for strict validation on Step 1 (email formats, required fields, postal code auto-fill logic).

2. Stripe & Payment Integration

• Stripe Elements: Wrap Step 2 (Credit Card Input) with the @stripe/react-stripe-js provider. Use Stripe Elements (CardNumberElement, CardExpiryElement, CardCvcElement) for secure input.
• Tokenization Strategy:
  • Do not charge the card in Step 2. Wait until the user clicks “Confirm Application” in Step 3.
  • Upon confirmation, call stripe.createPaymentMethod to tokenize the card.

3. Backend Integration (API Endpoints)

• Draft Order (Optional): Fire a PUT request after Step 1 to create a draft Order record, preventing concurrency issues if capacity is limited.
• Final Submission (POST /subscription/payment):
  • Payload: paymentMethodId, serviceMenuId, and all customer form data.
  • Backend logic: Creates a Stripe Customer (if new), attaches the payment method, and creates a Stripe Connect Subscription with transfer_data[destination] pointing to the Creator’s connected Stripe account.
  • Handle trial periods (trial_end) and billing anchors automatically based on the selected menu’s settings.

4. Webhook Handling

• Ensure platform webhooks (invoice.paid, invoice.payment_failed, customer.subscription.deleted) are configured to listen for recurring billing events and update the local Yoyacoo database status accordingly.