feat: integrate Stripe payment with subscription plans

Add Stripe payment integration across the project: - Add @stripe/stripe-js dependency - Configure Stripe environment variables (secret key, publishable key, webhook secret) for dev, local, and production environments - Add Product/Price IDs for monthly, quarterly, and annual subscription tiers - Extend subscription plan data with voiceMinutesPerDay quotas (30/45/60 minutes per tier) - Update .gitignore to exclude implementation_plan.md
2026-06-16 10:21:02 +08:00
parent 17741320ff
commit 0548a08cbb
25 changed files with 1220 additions and 26 deletions
@@ -0,0 +1,99 @@
+"use client";
+/**
+ * 订阅 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
+ */
+import { useState } from "react";
+
+import type { SubscriptionPlanId } from "@/data/constants/subscription-plans";
+import { ROUTES } from "@/router/routes";
+
+import { SubscriptionCtaButton } from "./subscription-cta-button";
+import styles from "./subscription-cta-button.module.css";
+
+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 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;
+      console.error("[subscription-checkout-button] error", err);
+      setError(err.message);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <SubscriptionCtaButton
+        type="button"
+        disabled={disabled}
+        isLoading={isLoading}
+        onClick={handleClick}
+        className={styles.button}
+      >
+        Confirm the agreement and Activate
+      </SubscriptionCtaButton>
+      {error ? (
+        <p
+          role="alert"
+          style={{
+            color: "#c0392b",
+            fontSize: "0.875rem",
+            marginTop: "0.5rem",
+            textAlign: "center",
+          }}
+        >
+          {error}
+        </p>
+      ) : null}
+    </>
+  );
+}