feat: 增加认证机制以安全地查询支付状态

This commit is contained in:
zyh 2024-10-22 10:42:22 +00:00
parent cd3a79e954
commit bf1d6cb2d9
2 changed files with 18 additions and 6 deletions

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
import { toast } from 'react-toastify';
import { useAuth } from '~/hooks/useAuth'; // 导入 useAuth hook
interface PaymentModalProps {
isOpen: boolean;
@ -22,6 +23,7 @@ interface PaymentResponse {
did: string;
expires_in: string;
return_url: string;
orderNo: string;
}
interface PaymentStatusResponse {
@ -31,10 +33,20 @@ interface PaymentStatusResponse {
export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }: PaymentModalProps) {
const [timeLeft, setTimeLeft] = useState(parseInt(paymentData.expires_in));
const { token } = useAuth(); // 获取认证token
const checkPaymentStatus = useCallback(async () => {
if (!token) {
console.error('No authentication token available');
return;
}
try {
const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.no}`);
const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.orderNo}`, {
headers: {
'Authorization': `Bearer ${token}`,
},
});
if (!response.ok) {
if (response.status === 404) {
console.error('Order not found');
@ -52,7 +64,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
console.error('Error checking payment status:', error);
toast.error('检查支付状态时出错,请稍后再试');
}
}, [paymentData.no, onPaymentSuccess, onClose]);
}, [paymentData.orderNo, onPaymentSuccess, onClose, token]);
useEffect(() => {
if (!isOpen) return;
@ -89,7 +101,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
</div>
<div className="text-center">
<p className="text-bolt-elements-textPrimary">: ¥{paymentData.order_amount}</p>
<p className="text-bolt-elements-textSecondary">: {paymentData.no}</p>
<p className="text-bolt-elements-textSecondary">: {paymentData.orderNo}</p>
<p className="text-bolt-elements-textSecondary">: {paymentData.pay_type}</p>
</div>
<div className="text-center">

View File

@ -11,7 +11,7 @@ export async function action({ request }: { request: Request }) {
return error as Response;
}
const { planId, billingCycle } = await request.json() as { planId: string; billingCycle: string };
const { planId, billingCycle } = (await request.json()) as { planId: string; billingCycle: string };
try {
// 获取订阅计划详情
@ -36,7 +36,7 @@ export async function action({ request }: { request: Request }) {
`${plan.name} 订阅 (${billingCycle === 'yearly' ? '年付' : '月付'})`,
'alipay', // 或其他支付方式
price, // 不用转换为分
userId.toString()
userId.toString(),
);
// 创建待处理的交易记录
@ -51,7 +51,7 @@ export async function action({ request }: { request: Request }) {
transaction_id: orderNo,
});
return json({ success: true, paymentData });
return json({ success: true, paymentData: { ...paymentData, orderNo } });
} catch (error) {
console.error('初始化订阅购买时出错:', error);
return json({ error: '初始化订阅购买失败' }, { status: 500 });