d9ab65ecf2
- Add Stripe payment provider with Checkout Session flow - Payment provider abstraction layer (EasyPay + Stripe unified interface) - Stripe webhook with proper raw body handling and signature verification - Frontend: Stripe button with URL validation, anti-duplicate click, noopener - Active timeout cancellation: query platform before expiring, recover paid orders - Singleton Stripe client, idempotency keys, Math.round for amounts - Handle async_payment events, return null for unknown webhook events - Set Checkout Session expires_at aligned with order timeout - Add cancelPayment to provider interface (Stripe: sessions.expire, EasyPay: no-op) - Enable stripe in frontend payment type list
96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
|
||
interface RefundDialogProps {
|
||
orderId: string;
|
||
amount: number;
|
||
onConfirm: (reason: string, force: boolean) => Promise<void>;
|
||
onCancel: () => void;
|
||
warning?: string;
|
||
requireForce?: boolean;
|
||
}
|
||
|
||
export default function RefundDialog({
|
||
orderId,
|
||
amount,
|
||
onConfirm,
|
||
onCancel,
|
||
warning,
|
||
requireForce,
|
||
}: RefundDialogProps) {
|
||
const [reason, setReason] = useState('');
|
||
const [force, setForce] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleConfirm = async () => {
|
||
setLoading(true);
|
||
try {
|
||
await onConfirm(reason, force);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||
<div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
|
||
<h3 className="text-lg font-bold text-gray-900">确认退款</h3>
|
||
|
||
<div className="mt-4 space-y-3">
|
||
<div className="rounded-lg bg-gray-50 p-3">
|
||
<div className="text-sm text-gray-500">订单号</div>
|
||
<div className="text-sm font-mono">{orderId}</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg bg-gray-50 p-3">
|
||
<div className="text-sm text-gray-500">退款金额</div>
|
||
<div className="text-lg font-bold text-red-600">¥{amount.toFixed(2)}</div>
|
||
</div>
|
||
|
||
{warning && <div className="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-700">{warning}</div>}
|
||
|
||
<div>
|
||
<label className="mb-1 block text-sm font-medium text-gray-700">退款原因</label>
|
||
<input
|
||
type="text"
|
||
value={reason}
|
||
onChange={(e) => setReason(e.target.value)}
|
||
placeholder="请输入退款原因（可选）"
|
||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
{requireForce && (
|
||
<label className="flex items-center gap-2 text-sm">
|
||
<input
|
||
type="checkbox"
|
||
checked={force}
|
||
onChange={(e) => setForce(e.target.checked)}
|
||
className="rounded border-gray-300"
|
||
/>
|
||
<span className="text-red-600">强制退款（余额可能扣为负数）</span>
|
||
</label>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-6 flex gap-3">
|
||
<button
|
||
onClick={onCancel}
|
||
className="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleConfirm}
|
||
disabled={loading || (requireForce && !force)}
|
||
className="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:bg-gray-300"
|
||
>
|
||
{loading ? '处理中...' : '确认退款'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|