feat(payment): connect payment service flow

src/app/api/payment/create-checkout-session/route.ts

@@ -1,105 +0,0 @@
-/**
- * POST /api/payment/create-checkout-session
- *
- * 创建 Stripe Checkout Session（订阅模式）→ 返回 URL 给前端
- * 前端接到后 `window.location.href = url` 跳转到 Stripe 托管页
- *
- * 业务流程：
- *   1. 前端用户点 "Confirm the agreement and Activate"
- *   2. 前端 POST `{ planId, successUrl, cancelUrl }` 到本端点
- *   3. 本端调 `stripe.checkout.sessions.create({...})` 创建 session
- *   4. 返回 `{ url: session.url }` 给前端
- *   5. 前端 `window.location.href = url` 跳转
- *   6. Stripe 收银台结束后回跳到 success_url / cancel_url
- *   7. 同时 Stripe 发送 `checkout.session.completed` webhook → 后端设置 user.isVip + voiceMinutes
- */
-import { NextRequest, NextResponse } from "next/server";
-
-import { SUBSCRIPTION_PLANS } from "@/data/constants/subscription-plans";
-import type { SubscriptionPlanId } from "@/data/constants/subscription-plans";
-import { getPlanPriceId } from "@/lib/stripe/stripe-products";
-import { getStripeClient } from "@/lib/stripe/stripe-client";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppApiPaymentCreateCheckoutSessionRoute");
-
-interface CreateCheckoutRequestBody {
-  planId: SubscriptionPlanId;
-  successUrl: string;
-  cancelUrl: string;
-}
-
-export async function POST(req: NextRequest) {
-  let body: CreateCheckoutRequestBody;
-  try {
-    body = (await req.json()) as CreateCheckoutRequestBody;
-  } catch {
-    return NextResponse.json(
-      { error: "Invalid JSON body" },
-      { status: 400 },
-    );
-  }
-
-  // 入参验证
-  if (!body.planId || !body.successUrl || !body.cancelUrl) {
-    return NextResponse.json(
-      { error: "Missing required fields: planId, successUrl, cancelUrl" },
-      { status: 400 },
-    );
-  }
-  if (!SUBSCRIPTION_PLANS.find((p) => p.id === body.planId)) {
-    return NextResponse.json(
-      { error: `Unknown planId: ${body.planId}` },
-      { status: 400 },
-    );
-  }
-
-  // 验证 successUrl / cancelUrl 来自同源（防 open redirect）
-  // 注：本轮先不做验证（前端和后端同源）—— 未来如果要开放给第三方请加 `same-origin` 检查
-
-  // 拿到 Stripe Price ID（从 env）
-  let priceId: string;
-  try {
-    priceId = getPlanPriceId(body.planId);
-  } catch (e) {
-    return NextResponse.json(
-      { error: (e as Error).message },
-      { status: 500 },
-    );
-  }
-
-  // 调 Stripe API 创建 Checkout Session
-  const stripe = getStripeClient();
-  try {
-    const session = await stripe.checkout.sessions.create({
-      mode: "subscription",
-      line_items: [{ price: priceId, quantity: 1 }],
-      success_url: body.successUrl,
-      cancel_url: body.cancelUrl,
-      // 让 webhook 能识别用户 + 套餐（后端接收 webhook 时从 metadata 取）
-      metadata: {
-        planId: body.planId,
-        // TODO: 加 userId（如果已知）—— 前端可在 body 传 userId
-      },
-      // 允许 promo codes（如果 Stripe dashboard 开了）
-      allow_promotion_codes: true,
-      // billing_address_collection: "auto" —— 根据 Stripe dashboard 配置
-    });
-
-    return NextResponse.json({ url: session.url });
-  } catch (e) {
-    const err = e as { message?: string; type?: string; code?: string };
-    log.error("[api/create-checkout-session] Stripe error", {
-      message: err.message,
-      type: err.type,
-      code: err.code,
-    });
-    return NextResponse.json(
-      {
-        error: err.message ?? "Failed to create checkout session",
-        type: err.type,
-      },
-      { status: 500 },
-    );
-  }
-}

src/app/api/payment/customer-portal/route.ts

@@ -1,76 +0,0 @@
-/**
- * POST /api/payment/customer-portal
- *
- * 创建 Stripe Customer Portal Session → 返回 URL 给前端
- *
- * 为什么需要 Customer Portal：
- *   - Stripe 托管的"用户自助管理"页（取消 / 换 plan / 查看账单 / 更新卡）
- *   - 不需要我们自己写 UI
- *   - 最常用的就是 "取消订阅"（避免客服）
- *
- * 需要的参数：`customerId`（从 User.stripeCustomerId 取）—— webhook 会设置
- *   - 如果为 null：返错（"先购买"）
- */
-import { NextRequest, NextResponse } from "next/server";
-
-import { getStripeClient } from "@/lib/stripe/stripe-client";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppApiPaymentCustomerPortalRoute");
-
-interface CreatePortalRequestBody {
-  customerId: string | null;
-  returnUrl: string;
-}
-
-export async function POST(req: NextRequest) {
-  let body: CreatePortalRequestBody;
-  try {
-    body = (await req.json()) as CreatePortalRequestBody;
-  } catch {
-    return NextResponse.json(
-      { error: "Invalid JSON body" },
-      { status: 400 },
-    );
-  }
-
-  // 入参验证
-  if (!body.customerId) {
-    return NextResponse.json(
-      { error: "Missing customerId. Please subscribe first before managing subscription." },
-      { status: 400 },
-    );
-  }
-  if (!body.returnUrl) {
-    return NextResponse.json(
-      { error: "Missing returnUrl" },
-      { status: 400 },
-    );
-  }
-
-  // 调 Stripe API 创建 Customer Portal Session
-  const stripe = getStripeClient();
-  try {
-    const session = await stripe.billingPortal.sessions.create({
-      customer: body.customerId,
-      return_url: body.returnUrl,
-    });
-
-    return NextResponse.json({ url: session.url });
-  } catch (e) {
-    const err = e as { message?: string; type?: string; code?: string };
-    log.error("[api/customer-portal] Stripe error", {
-      customerId: body.customerId,
-      message: err.message,
-      type: err.type,
-      code: err.code,
-    });
-    return NextResponse.json(
-      {
-        error: err.message ?? "Failed to create customer portal session",
-        type: err.type,
-      },
-      { status: 500 },
-    );
-  }
-}

src/app/api/payment/webhook/route.ts

@@ -1,103 +0,0 @@
-/**
- * POST /api/payment/webhook
- *
- * 接收 Stripe webhook → 验签 → 分发到 handler
- *
- * 关键设计：
- *   - 必须用 raw body 验签（不能让 Next.js 解析 JSON，所以用 `request.text()` 取原文）
- *   - 校验 `stripe-signature` 头（用 `STRIPE_WEBHOOK_SECRET`）
- *   - `stripe.webhooks.constructEvent(rawBody, sigHeader, secret)` 会抛错（如果签名不匹配）
- *   - 分发到 `dispatchStripeEvent()` → 4 个 handler 之一
- *
- * 配置 Stripe webhook 端点：
- *   - URL：https://cozsweet.com/api/payment/webhook
- *   - 监听的事件：
- *     - checkout.session.completed
- *     - customer.subscription.created
- *     - customer.subscription.updated
- *     - customer.subscription.deleted
- *     - invoice.payment_succeeded
- *
- * 本地开发用 Stripe CLI 转发：
- *   stripe listen --forward-to localhost:3000/api/payment/webhook
- *   输出的 `whsec_xxx` → 写到 .env.local 的 `STRIPE_WEBHOOK_SECRET`
- */
-import { NextRequest, NextResponse } from "next/server";
-import type Stripe from "stripe";
-
-import { dispatchStripeEvent } from "@/lib/stripe/stripe-events";
-import { getStripeClient } from "@/lib/stripe/stripe-client";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppApiPaymentWebhookRoute");
-
-export async function POST(req: NextRequest) {
-  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
-  if (!webhookSecret) {
-    log.error("[api/webhook] STRIPE_WEBHOOK_SECRET is not set");
-    return NextResponse.json(
-      { error: "Webhook secret not configured" },
-      { status: 500 },
-    );
-  }
-
-  // 取 raw body（验签用 raw bytes，不能 JSON.parse 后再 stringify —— 会丢空格、字节顺序等）
-  const rawBody = await req.text();
-  const sigHeader = req.headers.get("stripe-signature");
-  if (!sigHeader) {
-    log.error("[api/webhook] Missing stripe-signature header");
-    return NextResponse.json(
-      { error: "Missing stripe-signature header" },
-      { status: 400 },
-    );
-  }
-
-  // 校验签名（不匹配会抛错）
-  const stripe = getStripeClient();
-  let event: Stripe.Event;
-  try {
-    event = stripe.webhooks.constructEvent(rawBody, sigHeader, webhookSecret);
-  } catch (e) {
-    const err = e as Error;
-    log.error("[api/webhook] Signature verification failed", {
-      message: err.message,
-    });
-    return NextResponse.json(
-      { error: `Webhook signature verification failed: ${err.message}` },
-      { status: 400 },
-    );
-  }
-
-  // 分发到 handler
-  log.debug("[api/webhook] Received event", {
-    eventId: event.id,
-    type: event.type,
-    created: new Date(event.created * 1000).toISOString(),
-  });
-
-  try {
-    const handled = await dispatchStripeEvent(event);
-    if (!handled) {
-      log.debug(`[api/webhook] Ignored event type: ${event.type}`);
-    }
-  } catch (e) {
-    const err = e as Error;
-    log.error("[api/webhook] Handler error", {
-      eventId: event.id,
-      type: event.type,
-      message: err.message,
-      stack: err.stack,
-    });
-    // 返 500 让 Stripe 重试（幂等保护：handler 自己用 event.id 去重）
-    return NextResponse.json(
-      { error: "Handler error" },
-      { status: 500 },
-    );
-  }
-
-  // 返 200 让 Stripe 标记为已接收（即使 handler 没做什么也返 200 —— 避免无谓重试）
-  return NextResponse.json({ received: true });
-}
-
-/** 关闭 body parser 验签 raw body 需要 raw text（不能被 Next.js 的 bodyParser 解析）*/
-export const dynamic = "force-dynamic"; // 关闭静态优化（避免 body 被缓存）

src/app/subscription/cancel/page.tsx

@@ -3,8 +3,8 @@
  * 订阅取消回跳页
  *
  * 流程：
- *   1. 用户在 Stripe 托管页点 "Cancel" / 关闭页面
- *   2. Stripe 重定向到 `/subscription/cancel`
+ *   1. 用户在支付服务托管页点 "Cancel" / 关闭页面
+ *   2. 支付服务重定向到 `/subscription/cancel`
  *   3. 这个页面显示 "已取消" + 跳回 `/subscription`
  *
  * 不需要任何后端逻辑（没付款发生）

src/app/subscription/components/index.ts

@@ -7,6 +7,5 @@ export * from "./subscription-banner";
 export * from "./subscription-benefits-card";
 export * from "./subscription-checkout-button";
 export * from "./subscription-cta-button";
-export * from "./subscription-manage-button";
 export * from "./subscription-plan-card";
 export * from "./subscription-user-row";

src/app/subscription/components/subscription-checkout-button.tsx

@@ -2,75 +2,63 @@
 /**
  * 订阅 checkout 触发按钮
  *
- * 包装 `SubscriptionCtaButton` —— 加上调 `/api/payment/create-checkout-session` 的逻辑
- *
- * 流程：
- *   1. 用户点 "Confirm the agreement and Activate"
- *   2. fetch POST /api/payment/create-checkout-session { planId, successUrl, cancelUrl }
- *   3. 拿到 `{ url }` → `window.location.href = url` 跳转到 Stripe 托管页
- *   4. 用户结账 → Stripe 回跳到 successUrl / cancelUrl
- *   5. 同时发 webhook → 后端设置 user.isVip + voiceMinutes
+ * 包装 `SubscriptionCtaButton` —— 通过 payment 状态机创建后端订单并拉起支付。
  */
-import { useState } from "react";
+import { useEffect, useRef } from "react";
 
-import type { SubscriptionPlanId } from "@/data/constants/subscription-plans";
-import { ROUTES } from "@/router/routes";
+import {
+  usePaymentDispatch,
+  usePaymentState,
+} from "@/stores/payment/payment-context";
 
 import { SubscriptionCtaButton } from "./subscription-cta-button";
 import styles from "./subscription-cta-button.module.css";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppSubscriptionComponentsSubscriptionCheckoutButton");
 
 export interface SubscriptionCheckoutButtonProps {
-  planId: SubscriptionPlanId;
   /** 是否可用（未选套餐 / 未勾选协议 → false） */
   disabled?: boolean;
 }
 
 export function SubscriptionCheckoutButton({
-  planId,
   disabled = false,
 }: SubscriptionCheckoutButtonProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const payment = usePaymentState();
+  const paymentDispatch = usePaymentDispatch();
+  const launchedNonceRef = useRef(0);
 
-  const handleClick = async () => {
-    if (disabled || isLoading) return;
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // success / cancel URL —— 走当前 origin 的绝对路径
-      const origin = window.location.origin;
-      const res = await fetch("/api/payment/create-checkout-session", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          planId,
-          successUrl: `${origin}${ROUTES.subscription}/success?session_id={CHECKOUT_SESSION_ID}`,
-          cancelUrl: `${origin}${ROUTES.subscription}/cancel`,
-        }),
-      });
-
-      if (!res.ok) {
-        const data = (await res.json().catch(() => ({}))) as { error?: string };
-        throw new Error(data.error ?? `HTTP ${res.status}`);
-      }
-
-      const { url } = (await res.json()) as { url: string };
-      if (!url) {
-        throw new Error("No checkout URL returned");
-      }
-
-      // 跳转到 Stripe 托管页
-      window.location.href = url;
-    } catch (e) {
-      const err = e as Error;
-      log.error("[subscription-checkout-button] error", err);
-      setError(err.message);
-      setIsLoading(false);
+  useEffect(() => {
+    if (!payment.payParams || payment.launchNonce <= launchedNonceRef.current) {
+      return;
     }
+
+    launchedNonceRef.current = payment.launchNonce;
+    const paymentUrl = getPaymentUrl(payment.payParams);
+    if (!paymentUrl) {
+      paymentDispatch({
+        type: "PaymentLaunchFailed",
+        errorMessage: "Payment parameters did not include a supported URL.",
+      });
+      return;
+    }
+
+    window.location.href = paymentUrl;
+  }, [payment.launchNonce, payment.payParams, paymentDispatch]);
+
+  const isLoading =
+    payment.isCreatingOrder ||
+    payment.isPollingOrder ||
+    payment.isCheckingVipStatus;
+  const label = payment.isPaid
+    ? "Activated"
+    : payment.isPollingOrder
+      ? "Processing payment..."
+      : payment.isCreatingOrder
+        ? "Creating order..."
+        : "Confirm the agreement and Activate";
+
+  const handleClick = () => {
+    if (disabled || isLoading) return;
+    paymentDispatch({ type: "PaymentCreateOrderSubmitted" });
   };
 
   return (
@@ -82,9 +70,9 @@ export function SubscriptionCheckoutButton({
         onClick={handleClick}
         className={styles.button}
       >
-        Confirm the agreement and Activate
+        {label}
       </SubscriptionCtaButton>
-      {error ? (
+      {payment.errorMessage ? (
         <p
           role="alert"
           style={{
@@ -94,9 +82,28 @@ export function SubscriptionCheckoutButton({
             textAlign: "center",
           }}
         >
-          {error}
+          {payment.errorMessage}
         </p>
       ) : null}
     </>
   );
 }
+
+function getPaymentUrl(payParams: Record<string, unknown>): string | null {
+  const keys = [
+    "url",
+    "checkoutUrl",
+    "checkout_url",
+    "paymentUrl",
+    "payment_url",
+    "redirectUrl",
+    "redirect_url",
+  ];
+
+  for (const key of keys) {
+    const value = payParams[key];
+    if (typeof value === "string" && value.length > 0) return value;
+  }
+
+  return null;
+}

src/app/subscription/components/subscription-manage-button.tsx

@@ -1,101 +0,0 @@
-"use client";
-/**
- * "Manage VIP" 按钮组件（取消订阅 / 换 plan / 查看账单）
- *
- * 点击后调 `/api/payment/customer-portal` 拿到 Stripe Customer Portal 页面的 URL
- *
- * 业务事实：
- *   - 不自己写 "取消订阅" UI —— 跳到 Stripe 自己的 Customer Portal
- *   - 要 `customerId` —— webhook 会设置到 User.stripeCustomerId
- *   - 如果为 null（用户从未购买）→ 提示 "先购买"（"Get VIP" 路径走过来就是这个）
- */
-import { useState } from "react";
-
-import { ROUTES } from "@/router/routes";
-
-import { SubscriptionCtaButton } from "./subscription-cta-button";
-import styles from "./subscription-cta-button.module.css";
-import { Logger } from "@/utils";
-
-const log = new Logger("AppSubscriptionComponentsSubscriptionManageButton");
-
-export interface SubscriptionManageButtonProps {
-  /** 从 User.stripeCustomerId 取（webhook 设置） */
-  customerId: string | null;
-}
-
-export function SubscriptionManageButton({ customerId }: SubscriptionManageButtonProps) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleClick = async () => {
-    if (isLoading) return;
-
-    // 没有 customerId → 不该出现这个按钮（sidebar 根据 isVip + stripeCustomerId 控制展示）
-    // 防御性检查：如果走到这里没有 customerId，提示用户联系客服
-    if (!customerId) {
-      setError("Please subscribe first before managing your subscription.");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const origin = window.location.origin;
-      const res = await fetch("/api/payment/customer-portal", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          customerId,
-          returnUrl: `${origin}${ROUTES.subscription}`,
-        }),
-      });
-
-      if (!res.ok) {
-        const data = (await res.json().catch(() => ({}))) as { error?: string };
-        throw new Error(data.error ?? `HTTP ${res.status}`);
-      }
-
-      const { url } = (await res.json()) as { url: string };
-      if (!url) {
-        throw new Error("No portal URL returned");
-      }
-
-      // 跳转到 Stripe Customer Portal
-      window.location.href = url;
-    } catch (e) {
-      const err = e as Error;
-      log.error("[subscription-manage-button] error", err);
-      setError(err.message);
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <SubscriptionCtaButton
-        type="button"
-        disabled={!customerId}
-        isLoading={isLoading}
-        onClick={handleClick}
-        className={styles.button}
-      >
-        Manage VIP
-      </SubscriptionCtaButton>
-      {error ? (
-        <p
-          role="alert"
-          style={{
-            color: "#c0392b",
-            fontSize: "0.875rem",
-            marginTop: "0.5rem",
-            textAlign: "center",
-          }}
-        >
-          {error}
-        </p>
-      ) : null}
-    </>
-  );
-}

src/app/subscription/components/subscription-plan-card.tsx

@@ -9,20 +9,31 @@
  *   - 选中/高亮：2px 粉色边框 + 浅粉阴影
  *   - 三个卡片底部渐变不同：粉 → 紫红 → 紫
  */
-import type { SubscriptionPlan, SubscriptionPlanId } from "@/data/constants/subscription-plans";
 
 import styles from "./subscription-plan-card.module.css";
 
-const PER_DAY_GRADIENTS: Record<SubscriptionPlanId, string> = {
-  monthly: "linear-gradient(90deg, #ff7ab8 0%, #ff5d9c 100%)",
-  quarterly: "linear-gradient(90deg, #d16bff 0%, #ff5da3 100%)",
-  annual: "linear-gradient(90deg, #9a4dff 0%, #c44dff 100%)",
-};
+const PER_DAY_GRADIENTS = [
+  "linear-gradient(90deg, #ff7ab8 0%, #ff5d9c 100%)",
+  "linear-gradient(90deg, #d16bff 0%, #ff5da3 100%)",
+  "linear-gradient(90deg, #9a4dff 0%, #c44dff 100%)",
+  "linear-gradient(90deg, #32c7b5 0%, #2f8fd8 100%)",
+] as const;
+
+export interface SubscriptionPlanView {
+  id: string;
+  name: string;
+  price: string;
+  originalPrice: string | null;
+  perDay: string;
+  highlight: boolean;
+  currencySymbol: string;
+}
 
 export interface SubscriptionPlanCardProps {
-  plan: SubscriptionPlan;
+  plan: SubscriptionPlanView;
   selected: boolean;
   onClick: () => void;
+  gradientIndex?: number;
   className?: string;
 }
 
@@ -30,6 +41,7 @@ export function SubscriptionPlanCard({
   plan,
   selected,
   onClick,
+  gradientIndex = 0,
   className,
 }: SubscriptionPlanCardProps) {
   const classes = [
@@ -41,22 +53,26 @@ export function SubscriptionPlanCard({
     .filter(Boolean)
     .join(" ");
 
-  const perDayStyle = { background: PER_DAY_GRADIENTS[plan.id] };
+  const perDayStyle = {
+    background: PER_DAY_GRADIENTS[gradientIndex % PER_DAY_GRADIENTS.length],
+  };
 
   return (
     <button
       type="button"
       onClick={onClick}
       aria-pressed={selected}
-      aria-label={`${plan.name} plan, $${plan.price}`}
+      aria-label={`${plan.name} plan, ${plan.currencySymbol}${plan.price}`}
       className={classes}
     >
       <p className={styles.name}>{plan.name}</p>
       <div className={styles.priceBlock}>
-        <span className={styles.currency}>$</span>
+        <span className={styles.currency}>{plan.currencySymbol}</span>
         <span className={styles.price}>{plan.price}</span>
       </div>
-      <p className={styles.originalPrice}>${plan.originalPrice}</p>
+      <p className={styles.originalPrice}>
+        {plan.originalPrice ? `${plan.currencySymbol}${plan.originalPrice}` : "\u00a0"}
+      </p>
       <div className={styles.perDayBar} style={perDayStyle}>
         {plan.perDay}
       </div>

src/app/subscription/components/subscription-screen.module.css

@@ -28,11 +28,21 @@
 
 .plansRow {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
   gap: var(--spacing-sm);
   margin-top: var(--spacing-xl);
 }
 
+.plansStatus {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: var(--spacing-md) var(--spacing-xs);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  line-height: 1.5;
+}
+
 .autoRenewCaption {
   margin: var(--spacing-md) 0 0;
   padding: 0 var(--spacing-xs);

src/app/subscription/subscription-screen.tsx

@@ -14,48 +14,110 @@
  *   7. 主操作按钮
  *   8. 协议复选框
  */
-import { useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import { Checkbox, MobileShell } from "@/app/_components/core";
 import { AppConstants } from "@/core/app_constants";
-import {
-  SUBSCRIPTION_PLANS,
-  type SubscriptionPlanId,
-} from "@/data/constants/subscription-plans";
+import type { PaymentPlan } from "@/data/dto/payment";
 import { VIP_BENEFITS } from "@/data/constants/vip-benefits";
-import { useUserState } from "@/stores/user/user-context";
+import {
+  usePaymentDispatch,
+  usePaymentState,
+} from "@/stores/payment/payment-context";
+import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
 import {
   SubscriptionBackLink,
   SubscriptionBanner,
   SubscriptionBenefitsCard,
   SubscriptionCheckoutButton,
-  SubscriptionManageButton,
+  SubscriptionCtaButton,
   SubscriptionPlanCard,
   SubscriptionUserRow,
 } from "./components";
 import styles from "./components/subscription-screen.module.css";
+import type { SubscriptionPlanView } from "./components/subscription-plan-card";
 
 const FALLBACK_USERNAME = "User name";
 
+function isVipPlan(plan: PaymentPlan): boolean {
+  return plan.orderType.startsWith("vip_") || plan.planId.startsWith("vip_");
+}
+
+function currencySymbol(currency: string): string {
+  if (currency === "CNY") return "¥";
+  if (currency === "USD") return "$";
+  return `${currency} `;
+}
+
+function formatAmount(amountCents: number): string {
+  return (amountCents / 100).toFixed(2).replace(/\.00$/, "");
+}
+
+function planCaption(plan: PaymentPlan): string {
+  if (plan.vipDays === null) return "Lifetime";
+  const perDay = plan.amountCents / 100 / Math.max(plan.vipDays, 1);
+  return `${currencySymbol(plan.currency)}${perDay.toFixed(2)}/day`;
+}
+
+function toPlanView(plan: PaymentPlan, index: number): SubscriptionPlanView {
+  return {
+    id: plan.planId,
+    name: plan.planName,
+    price: formatAmount(plan.amountCents),
+    originalPrice: null,
+    perDay: planCaption(plan),
+    highlight: plan.planId === "vip_monthly" || index === 0,
+    currencySymbol: currencySymbol(plan.currency),
+  };
+}
+
 export function SubscriptionScreen() {
   const user = useUserState();
+  const userDispatch = useUserDispatch();
+  const payment = usePaymentState();
+  const paymentDispatch = usePaymentDispatch();
+  const refreshedPaidOrderRef = useRef<string | null>(null);
 
-  const initialPlanId =
-    SUBSCRIPTION_PLANS.find((p) => p.highlight)?.id ?? null;
+  useEffect(() => {
+    if (payment.status === "idle") {
+      paymentDispatch({ type: "PaymentInit" });
+    }
+  }, [payment.status, paymentDispatch]);
 
-  // 强制类型为 `SubscriptionPlanId` —— 套餐表只有 3 个 id，不会越界
-  const [selectedPlanId, setSelectedPlanId] = useState<SubscriptionPlanId | null>(
-    initialPlanId as SubscriptionPlanId | null,
+  useEffect(() => {
+    if (!payment.isPaid || !payment.currentOrderId) return;
+    if (refreshedPaidOrderRef.current === payment.currentOrderId) return;
+    refreshedPaidOrderRef.current = payment.currentOrderId;
+    userDispatch({ type: "UserFetch" });
+  }, [payment.currentOrderId, payment.isPaid, userDispatch]);
+
+  const vipPlans = useMemo(
+    () =>
+      payment.plans
+        .filter(isVipPlan)
+        .map((plan, index) => toPlanView(plan, index)),
+    [payment.plans],
   );
-  const [agreed, setAgreed] = useState(false);
 
-  const canActivate = selectedPlanId !== null && agreed;
-  const isVip = user.currentUser?.isVip ?? false;
-  const stripeCustomerId = user.currentUser?.stripeCustomerId ?? null;
+  const selectedPlan =
+    vipPlans.find((plan) => plan.id === payment.selectedPlanId) ?? null;
+  const isPaymentBusy =
+    payment.isCreatingOrder ||
+    payment.isPollingOrder ||
+    payment.isCheckingVipStatus;
+  const canActivate =
+    selectedPlan !== null && payment.agreed && !isPaymentBusy;
+  const isVip =
+    user.currentUser?.isVip === true ||
+    payment.vipStatus?.isVip === true ||
+    payment.isPaid;
 
   const name = user.currentUser?.username ?? FALLBACK_USERNAME;
   const avatarUrl = user.currentUser?.avatarUrl ?? null;
+  const autoRenewCaption = payment.autoRenew
+    ? "It will automatically renew upon expiration, and can be canceled at any time"
+    : "This plan is a one-time purchase and will not automatically renew";
 
   return (
     <MobileShell>
@@ -76,20 +138,31 @@ export function SubscriptionScreen() {
           className={styles.plansRow}
           aria-label="Choose a subscription plan"
         >
-          {SUBSCRIPTION_PLANS.map((plan) => (
-            <SubscriptionPlanCard
-              key={plan.id}
-              plan={plan}
-              selected={selectedPlanId === plan.id}
-              onClick={() => setSelectedPlanId(plan.id)}
-            />
-          ))}
+          {vipPlans.length > 0 ? (
+            vipPlans.map((plan, index) => (
+              <SubscriptionPlanCard
+                key={plan.id}
+                plan={plan}
+                gradientIndex={index}
+                selected={payment.selectedPlanId === plan.id}
+                onClick={() =>
+                  paymentDispatch({
+                    type: "PaymentPlanSelected",
+                    planId: plan.id,
+                  })
+                }
+              />
+            ))
+          ) : (
+            <p className={styles.plansStatus}>
+              {payment.isLoadingPlans
+                ? "Loading membership plans..."
+                : payment.errorMessage ?? "Membership plans are unavailable."}
+            </p>
+          )}
         </section>
 
-        <p className={styles.autoRenewCaption}>
-          It will automatically renew upon expiration, and can be canceled at
-          any time
-        </p>
+        <p className={styles.autoRenewCaption}>{autoRenewCaption}</p>
 
         <section className={styles.benefitsSlot}>
           <SubscriptionBenefitsCard
@@ -99,15 +172,12 @@ export function SubscriptionScreen() {
         </section>
 
         <div className={styles.ctaSlot}>
-          {/*
-           * 已为 VIP 的用户 → 显示 Manage VIP 按钮（跳转到 Stripe Customer Portal）
-           * VIP 状态从 `user.isVip` 取（webhook 会设置）
-           */}
           {isVip ? (
-            <SubscriptionManageButton customerId={stripeCustomerId} />
+            <SubscriptionCtaButton type="button" disabled>
+              VIP Activated
+            </SubscriptionCtaButton>
           ) : (
             <SubscriptionCheckoutButton
-              planId={selectedPlanId ?? "monthly"}
               disabled={!canActivate}
             />
           )}
@@ -115,8 +185,13 @@ export function SubscriptionScreen() {
 
         <div className={styles.agreementSlot}>
           <Checkbox
-            checked={agreed}
-            onChange={setAgreed}
+            checked={payment.agreed}
+            onChange={(agreed) =>
+              paymentDispatch({
+                type: "PaymentAgreementChanged",
+                agreed,
+              })
+            }
             label={
               <>
                 I agree to the{" "}

src/app/subscription/success/page.tsx

@@ -3,13 +3,13 @@
  * 订阅成功回跳页
  *
  * 流程：
- *   1. 用户在 Stripe 托管页完成结账
- *   2. Stripe 重定向到 `/subscription/success?session_id=xxx`
+ *   1. 用户在支付服务托管页完成结账
+ *   2. 支付服务重定向到 `/subscription/success`
  *   3. 这个页面显示 "购买成功" + 调 `getCurrentUser` 刷新 user
  *   4. 点 "返回订阅页" 跳回 `/subscription`
  *
- * 注意：webhook 会异步触发 + 更新 user.isVip + voiceMinutes
- *   此页面拿到 session_id 后 轮询几次 getCurrentUser 等待 webhook 完成（避免 webhook 还没到 user 就还没更新的情况）
+ * 注意：权益发放由后端支付服务链路异步完成。
+ *   此页面轮询几次 getCurrentUser 等待 user 状态完成更新。
  */
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
@@ -25,7 +25,7 @@ export default function SubscriptionSuccessPage() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const hasRefreshed = useRef(false);
 
-  // 轮询 getCurrentUser 等待 webhook 完成
+  // 轮询 getCurrentUser 等待后端权益发放完成
   useEffect(() => {
     if (hasRefreshed.current) return;
     hasRefreshed.current = true;