diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx index 545b1a4..f4ff642 100644 --- a/app/pricing/page.tsx +++ b/app/pricing/page.tsx @@ -30,6 +30,19 @@ function HomeModule5() { const [billingType, setBillingType] = useState<"month" | "year">("month"); const [plans, setPlans] = useState([]); const [loadingPlan, setLoadingPlan] = useState(null); // 跟踪哪个计划正在加载 + + // 监听支付完成消息 + useEffect(() => { + const handlePaymentResult = (ev: MessageEvent) => { + if (ev.data.type === 'payment-result') { + // 支付完成后清除loading状态 + setLoadingPlan(null); + } + }; + + window.addEventListener('message', handlePaymentResult); + return () => window.removeEventListener('message', handlePaymentResult); + }, []); // 从后端获取订阅计划数据 useEffect(() => { @@ -95,12 +108,13 @@ function HomeModule5() { if (!result.successful || !result.data) { throw new Error("create checkout session failed"); } - window.opener?.postMessage({ + // 通知当前窗口等待支付(显示loading模态框) + window.postMessage({ type: "waiting-payment", paymentType: "subscription" }, "*"); - // 2. 直接跳转到Stripe托管页面(就这么简单!) - window.location.href = result.data.checkout_url; + // 在新标签页中打开Stripe支付页面,保持当前定价页面不变 + window.open(result.data.checkout_url, '_blank'); } catch (error) { setLoadingPlan(null); // 出错时清除加载状态 throw new Error("create checkout session failed, please try again later"); diff --git a/components/common/CallbackModal.tsx b/components/common/CallbackModal.tsx index 7dd1e2e..e4deb49 100644 --- a/components/common/CallbackModal.tsx +++ b/components/common/CallbackModal.tsx @@ -182,11 +182,17 @@ export default function CallbackModal({ paymentTime: res.data.pay_time, subscription: res.data.subscription }) + // 通知定价页面支付成功 + window.postMessage({ type: 'payment-result', success: true }, '*') } else if (res.data.payment_status === 'fail') { setPaymentStatus(PaymentStatus.FAILED) + // 通知定价页面支付失败 + window.postMessage({ type: 'payment-result', success: false }, '*') } } else { setPaymentStatus(PaymentStatus.FAILED) + // 通知定价页面支付失败 + window.postMessage({ type: 'payment-result', success: false }, '*') } } else if (paymentType === 'token') { // Token购买状态查询