提交 Turnstile 集成源文件改动

frontend/components/account/AccountCenter.tsx

@@ -51,6 +51,7 @@ import {
 } from "./constants";
 import { InfoRow, PlusIcon } from "./AccountInfoRow";
 import { AccountFeedbackPanel } from "./AccountFeedbackPanel";
+import { TurnstileWidget } from "@/components/security/TurnstileWidget";
 import {
   chainIdToDisplayName,
   clearStoredPaymentRecovery,
@@ -65,6 +66,7 @@ import {
   buildTrialValueReplaySummary,
   readTrialValueReplay,
 } from "@/lib/trial-value-replay";
+import { getTurnstileTokenForAction } from "@/lib/turnstile-client";
 
 // --- Main Component ---
 
@@ -90,9 +92,25 @@ export function AccountCenter() {
   const [backend, setBackend] = useState<AuthMeResponse | null>(null);
   const [referralCodeInput, setReferralCodeInput] = useState("");
   const [referralApplying, setReferralApplying] = useState(false);
+  const [paymentTurnstileToken, setPaymentTurnstileToken] = useState("");
+  const [paymentTurnstileResetKey, setPaymentTurnstileResetKey] = useState(0);
 
   const supabaseReady = hasSupabasePublicEnv();
   const walletConnectEnabled = Boolean(WALLETCONNECT_PROJECT_ID);
+  const resetPaymentTurnstile = useCallback(() => {
+    setPaymentTurnstileToken("");
+    setPaymentTurnstileResetKey((value) => value + 1);
+  }, []);
+  const getPaymentTurnstileToken = useCallback(
+    (
+      action: "payment_intent_create" | "payment_tx_submit",
+      options?: { optional?: boolean },
+    ) => {
+      if (options?.optional && !paymentTurnstileToken) return undefined;
+      return getTurnstileTokenForAction(paymentTurnstileToken, action);
+    },
+    [paymentTurnstileToken],
+  );
 
   // ── Hook ────────────────────────────────────────────────
   const {
@@ -189,6 +207,8 @@ export function AccountCenter() {
     setUpdatedAt,
     usePoints,
     setUsePoints,
+    getPaymentTurnstileToken,
+    resetPaymentTurnstile,
   });
 
   // ── Auth analytics effect ──────────────────────────────
@@ -1370,6 +1390,12 @@ export function AccountCenter() {
                       </div>
                     )}
 
+                    <TurnstileWidget
+                      action="payment_intent_create"
+                      onToken={setPaymentTurnstileToken}
+                      resetKey={paymentTurnstileResetKey}
+                    />
+
                     {/* Payment Method Tabs */}
                     <div className="border-t border-slate-200 pt-5">
                       <p className="mb-3 text-[10px] font-semibold uppercase text-slate-500">

frontend/components/account/useAccountPayment.ts

@@ -56,6 +56,11 @@ export interface UseAccountPaymentParams {
   setUpdatedAt: (text: string) => void;
   usePoints: boolean;
   setUsePoints: (v: boolean) => void;
+  getPaymentTurnstileToken?: (
+    action: "payment_intent_create" | "payment_tx_submit",
+    options?: { optional?: boolean },
+  ) => string | undefined;
+  resetPaymentTurnstile?: () => void;
 }
 
 // ============================================================
@@ -73,6 +78,8 @@ export function useAccountPayment(params: UseAccountPaymentParams) {
     setUpdatedAt,
     usePoints,
     setUsePoints,
+    getPaymentTurnstileToken,
+    resetPaymentTurnstile,
   } = params;
 
   // ── Base payment state (from usePaymentState) ──────────────
@@ -532,6 +539,8 @@ export function useAccountPayment(params: UseAccountPaymentParams) {
     allowedPaymentHosts: billing.allowedPaymentHosts,
     authIsAuthenticated,
     hasPayingWallet: walletBind.hasPayingWallet,
+    getPaymentTurnstileToken,
+    resetPaymentTurnstile,
     getValidAccessToken,
     buildAuthedHeaders,
     loadSnapshot,

frontend/components/account/usePaymentFlow.ts

@@ -32,9 +32,12 @@ import {
   assertExpectedPaymentReceiver,
   EXPECTED_PAYMENT_RECEIVER_ADDRESS,
 } from "@/lib/payment-receiver";
+import { getTurnstileTokenForAction } from "@/lib/turnstile-client";
 import type { PaymentTxValidationState } from "./usePaymentState";
 
 // ============================================================
+type PaymentTurnstileAction = "payment_intent_create" | "payment_tx_submit";
+
 export interface UsePaymentFlowParams {
   isEn: boolean;
   copy: Record<string, string>;
@@ -97,6 +100,11 @@ export interface UsePaymentFlowParams {
   allowedPaymentHosts: string[];
   authIsAuthenticated: boolean;
   hasPayingWallet: boolean;
+  getPaymentTurnstileToken?: (
+    action: PaymentTurnstileAction,
+    options?: { optional?: boolean },
+  ) => string | undefined;
+  resetPaymentTurnstile?: () => void;
 
   // Callbacks from master
   getValidAccessToken: () => Promise<string>;
@@ -159,6 +167,8 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
     allowedPaymentHosts,
     authIsAuthenticated,
     hasPayingWallet,
+    getPaymentTurnstileToken,
+    resetPaymentTurnstile,
     getValidAccessToken,
     buildAuthedHeaders,
     loadSnapshot,
@@ -184,6 +194,16 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
     trackAppEvent("payment_success", payload);
   }, []);
 
+  const buildPaymentTurnstilePayload = useCallback(
+    (action: PaymentTurnstileAction, optional = false) => {
+      const turnstile_token =
+        getPaymentTurnstileToken?.(action, { optional }) ||
+        (optional ? undefined : getTurnstileTokenForAction("", action));
+      return turnstile_token ? { turnstile_token } : {};
+    },
+    [getPaymentTurnstileToken],
+  );
+
   const verifyPaymentAuthReady = useCallback(async () => {
     const accessToken = await getValidAccessToken();
     const authHeaders: Record<string, string> = {
@@ -499,6 +519,7 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
         method: "POST",
         headers: authHeaders,
         body: JSON.stringify({
+          ...buildPaymentTurnstilePayload("payment_intent_create"),
           plan_code: selectedPlan?.plan_code || "pro_monthly",
           payment_mode: "strict",
           allowed_wallet: payingWallet,
@@ -514,6 +535,7 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
           },
         }),
       });
+      resetPaymentTurnstile?.();
       if (!createRes.ok) {
         const raw = await readPaymentApiErrorMessage(
           createRes,
@@ -596,7 +618,13 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
       await waitForReceipt(txHashNorm, eth);
 
       const submitRes = await fetch(`/api/payments/intents/${intentId}/submit`, {
-        method: "POST", headers: authHeaders, body: JSON.stringify({ tx_hash: txHashNorm, from_address: payingWallet }),
+        method: "POST",
+        headers: authHeaders,
+        body: JSON.stringify({
+          ...buildPaymentTurnstilePayload("payment_tx_submit", true),
+          tx_hash: txHashNorm,
+          from_address: payingWallet,
+        }),
       });
       if (!submitRes.ok) {
         const raw = await readPaymentApiErrorMessage(
@@ -692,6 +720,7 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
         method: "POST",
         headers: authHeaders,
         body: JSON.stringify({
+          ...buildPaymentTurnstilePayload("payment_intent_create"),
           plan_code: selectedPlan?.plan_code || "pro_monthly",
           payment_mode: "direct",
           chain_id: effectivePaymentChainId,
@@ -705,6 +734,7 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
           },
         }),
       });
+      resetPaymentTurnstile?.();
       if (!createRes.ok) {
         const raw = await readPaymentApiErrorMessage(
           createRes,
@@ -765,7 +795,12 @@ export function usePaymentFlow(params: UsePaymentFlowParams) {
     try {
       const authHeaders = await buildAuthedHeaders(true, true);
       const submitRes = await fetch(`/api/payments/intents/${intentIdVal}/submit`, {
-        method: "POST", headers: authHeaders, body: JSON.stringify({ tx_hash: txHashNorm }),
+        method: "POST",
+        headers: authHeaders,
+        body: JSON.stringify({
+          ...buildPaymentTurnstilePayload("payment_tx_submit", true),
+          tx_hash: txHashNorm,
+        }),
       });
       if (!submitRes.ok) {
         const raw = await readPaymentApiErrorMessage(