feat: Stripe 改用 PaymentIntent + Payment Element,iframe 嵌入支付宝弹窗支付

Stripe 集成重构:
- 从 Checkout Session 改为 PaymentIntent + Payment Element 模式
- 前端内联渲染 Stripe 支付表单,支持信用卡、支付宝等多种方式
- Webhook 事件改为 payment_intent.succeeded / payment_intent.payment_failed
- provider/test 同步更新

iframe 嵌入模式 (ui_mode=embedded):
- 支付宝等需跳转的方式改为弹出新窗口处理,避免 X-Frame-Options 冲破 iframe
- 信用卡等无跳转方式仍在 iframe 内联完成
- 弹窗使用 confirmAlipayPayment 直接跳转,无需二次操作
- result 页面检测弹窗模式,支付成功后自动关闭窗口

Bug 修复:
- 修复配置加载前支付方式闪烁(初始值改为空数组 + loading)
- 修复桌面端 PaymentForm 缺少 methodLimits prop
- 修复 stripeError 隐藏表单导致无法重试
- 快捷金额增加 1000/2000 选项,过滤低于 minAmount 的选项

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
miwei
2026-03-04 10:58:07 +08:00
parent 5be0616e78
commit 964a2aa6d9
14 changed files with 749 additions and 279 deletions

View File

@@ -8,9 +8,18 @@ function ResultContent() {
// Support both ZPAY (out_trade_no) and Stripe (order_id) callback params
const outTradeNo = searchParams.get('out_trade_no') || searchParams.get('order_id');
const tradeStatus = searchParams.get('trade_status') || searchParams.get('status');
const isPopup = searchParams.get('popup') === '1';
const [status, setStatus] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const [isInPopup, setIsInPopup] = useState(false);
// Detect if opened as a popup window (from stripe-popup or via popup=1 param)
useEffect(() => {
if (isPopup || window.opener) {
setIsInPopup(true);
}
}, [isPopup]);
useEffect(() => {
if (!outTradeNo) {
@@ -42,6 +51,17 @@ function ResultContent() {
};
}, [outTradeNo]);
// Auto-close popup window on success
const isSuccess = status === 'COMPLETED' || status === 'PAID' || status === 'RECHARGING';
useEffect(() => {
if (!isInPopup || !isSuccess) return;
const timer = setTimeout(() => {
window.close();
}, 3000);
return () => clearTimeout(timer);
}, [isInPopup, isSuccess]);
if (loading) {
return (
<div className="flex min-h-screen items-center justify-center">
@@ -50,7 +70,6 @@ function ResultContent() {
);
}
const isSuccess = status === 'COMPLETED' || status === 'PAID' || status === 'RECHARGING';
const isPending = status === 'PENDING';
return (
@@ -65,12 +84,33 @@ function ResultContent() {
<p className="mt-2 text-gray-500">
{status === 'COMPLETED' ? '余额已成功到账!' : '支付成功,余额正在充值中...'}
</p>
{isInPopup && (
<div className="mt-4 space-y-2">
<p className="text-sm text-gray-400"> 3 </p>
<button
type="button"
onClick={() => window.close()}
className="text-sm text-blue-600 underline hover:text-blue-700"
>
</button>
</div>
)}
</>
) : isPending ? (
<>
<div className="text-6xl text-yellow-500"></div>
<h1 className="mt-4 text-xl font-bold text-yellow-600"></h1>
<p className="mt-2 text-gray-500"></p>
{isInPopup && (
<button
type="button"
onClick={() => window.close()}
className="mt-4 text-sm text-blue-600 underline hover:text-blue-700"
>
</button>
)}
</>
) : (
<>
@@ -85,6 +125,15 @@ function ResultContent() {
? '订单已被取消'
: '请联系管理员处理'}
</p>
{isInPopup && (
<button
type="button"
onClick={() => window.close()}
className="mt-4 text-sm text-blue-600 underline hover:text-blue-700"
>
</button>
)}
</>
)}