wanwu/sub2apipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate Stripe payment with bugfixes and active timeout cancellation

Browse Source 
- 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
This commit is contained in:
erio
2026-03-01 17:58:08 +08:00
parent 2f45044073
commit d9ab65ecf2
59 changed files with 1571 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/app/admin/page.tsx
View File

@@ -5,11 +5,42 @@ import { useState, useEffect, useCallback, Suspense } from 'react';
import OrderTable from '@/components/admin/OrderTable';
import OrderDetail from '@/components/admin/OrderDetail';
interface AdminOrder {
id: string;
userId: number;
userName: string | null;
userEmail: string | null;
amount: number;
status: string;
paymentType: string;
createdAt: string;
paidAt: string | null;
completedAt: string | null;
failedReason: string | null;
expiresAt: string;
}
interface AdminOrderDetail extends AdminOrder {
rechargeCode: string;
paymentTradeNo: string | null;
refundAmount: number | null;
refundReason: string | null;
refundAt: string | null;
forceRefund: boolean;
failedAt: string | null;
updatedAt: string;
clientIp: string | null;
paymentSuccess?: boolean;
rechargeSuccess?: boolean;
rechargeStatus?: string;
auditLogs: { id: string; action: string; detail: string | null; operator: string | null; createdAt: string }[];
}
function AdminContent() {
const searchParams = useSearchParams();
const token = searchParams.get('token');
const [orders, setOrders] = useState<any[]>([]);
const [orders, setOrders] = useState<AdminOrder[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
@@ -17,8 +48,7 @@ function AdminContent() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
// Dialogs
const [detailOrder, setDetailOrder] = useState<any>(null);
const [detailOrder, setDetailOrder] = useState<AdminOrderDetail | null>(null);
const fetchOrders = useCallback(async () => {
if (!token) return;
@@ -134,7 +164,9 @@ function AdminContent() {
{error && (
<div className="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-600">
{error}
<button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">✕</button>
<button onClick={() => setError('')} className="ml-2 text-red-400 hover:text-red-600">
✕
</button>
</div>
)}
@@ -143,11 +175,12 @@ function AdminContent() {
{statuses.map((s) => (
<button
key={s}
onClick={() => { setStatusFilter(s); setPage(1); }}
onClick={() => {
setStatusFilter(s);
setPage(1);
}}
className={`rounded-full px-3 py-1 text-sm transition-colors ${
statusFilter === s
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
statusFilter === s ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
{statusLabels[s]}
@@ -160,12 +193,7 @@ function AdminContent() {
{loading ? (
<div className="py-12 text-center text-gray-500">加载中...</div>
) : (
<OrderTable
orders={orders}
onRetry={handleRetry}
onCancel={handleCancel}
onViewDetail={handleViewDetail}
/>
<OrderTable orders={orders} onRetry={handleRetry} onCancel={handleCancel} onViewDetail={handleViewDetail} />
)}
</div>
@@ -175,15 +203,17 @@ function AdminContent() {
<span>共 {total} 条记录</span>
<div className="flex gap-2">
<button
onClick={() => setPage(p => Math.max(1, p - 1))}
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1}
className="rounded border px-3 py-1 disabled:opacity-50"
>
上一页
</button>
<span className="px-3 py-1">{page} / {totalPages}</span>
<span className="px-3 py-1">
{page} / {totalPages}
</span>
<button
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages}
className="rounded border px-3 py-1 disabled:opacity-50"
>
@@ -194,23 +224,20 @@ function AdminContent() {
)}
{/* Order Detail */}
{detailOrder && (
<OrderDetail
order={detailOrder}
onClose={() => setDetailOrder(null)}
/>
)}
{detailOrder && <OrderDetail order={detailOrder} onClose={() => setDetailOrder(null)} />}
</div>
);
}
export default function AdminPage() {
return (
<Suspense fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="text-gray-500">加载中...</div>
</div>
}>
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="text-gray-500">加载中...</div>
</div>
}
>
<AdminContent />
</Suspense>
);

10
src/app/api/admin/orders/[id]/cancel/route.ts
View File

@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
import { adminCancelOrder, OrderError } from '@/lib/order/service';
export async function POST(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
if (!verifyAdminToken(request)) return unauthorizedResponse();
try {
@@ -14,10 +11,7 @@ export async function POST(
return NextResponse.json({ success: true });
} catch (error) {
if (error instanceof OrderError) {
return NextResponse.json(
{ error: error.message, code: error.code },
{ status: error.statusCode },
);
return NextResponse.json({ error: error.message, code: error.code }, { status: error.statusCode });
}
console.error('Admin cancel order error:', error);
return NextResponse.json({ error: '取消订单失败' }, { status: 500 });

10
src/app/api/admin/orders/[id]/retry/route.ts
View File

@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
import { retryRecharge, OrderError } from '@/lib/order/service';
export async function POST(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
if (!verifyAdminToken(request)) return unauthorizedResponse();
try {
@@ -14,10 +11,7 @@ export async function POST(
return NextResponse.json({ success: true });
} catch (error) {
if (error instanceof OrderError) {
return NextResponse.json(
{ error: error.message, code: error.code },
{ status: error.statusCode },
);
return NextResponse.json({ error: error.message, code: error.code }, { status: error.statusCode });
}
console.error('Retry recharge error:', error);
return NextResponse.json({ error: '重试充值失败' }, { status: 500 });

5
src/app/api/admin/orders/[id]/route.ts
View File

@@ -2,10 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/db';
import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
if (!verifyAdminToken(request)) return unauthorizedResponse();
const { id } = await params;

6
src/app/api/admin/orders/route.ts
View File

@@ -1,7 +1,7 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/db';
import { verifyAdminToken, unauthorizedResponse } from '@/lib/admin-auth';
import { Prisma } from '@prisma/client';
import { Prisma, OrderStatus } from '@prisma/client';
export async function GET(request: NextRequest) {
if (!verifyAdminToken(request)) return unauthorizedResponse();
@@ -15,7 +15,7 @@ export async function GET(request: NextRequest) {
const dateTo = searchParams.get('date_to');
const where: Prisma.OrderWhereInput = {};
if (status) where.status = status as any;
if (status && status in OrderStatus) where.status = status as OrderStatus;
if (userId) where.userId = Number(userId);
if (dateFrom || dateTo) {
where.createdAt = {};
@@ -48,7 +48,7 @@ export async function GET(request: NextRequest) {
]);
return NextResponse.json({
orders: orders.map(o => ({
orders: orders.map((o) => ({
...o,
amount: Number(o.amount),
})),

10
src/app/api/admin/refund/route.ts
View File

@@ -17,10 +17,7 @@ export async function POST(request: NextRequest) {
const parsed = refundSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: '参数错误', details: parsed.error.flatten().fieldErrors },
{ status: 400 },
);
return NextResponse.json({ error: '参数错误', details: parsed.error.flatten().fieldErrors }, { status: 400 });
}
const result = await processRefund({
@@ -32,10 +29,7 @@ export async function POST(request: NextRequest) {
return NextResponse.json(result);
} catch (error) {
if (error instanceof OrderError) {
return NextResponse.json(
{ error: error.message, code: error.code },
{ status: error.statusCode },
);
return NextResponse.json({ error: error.message, code: error.code }, { status: error.statusCode });
}
console.error('Refund error:', error);
return NextResponse.json({ error: '退款失败' }, { status: 500 });

26
src/app/api/easy-pay/notify/route.ts
View File

@@ -1,25 +1,19 @@
import { NextRequest } from 'next/server';
import { handlePaymentNotify } from '@/lib/order/service';
import type { EasyPayNotifyParams } from '@/lib/easy-pay/types';
import { EasyPayProvider } from '@/lib/easy-pay/provider';
const easyPayProvider = new EasyPayProvider();
export async function GET(request: NextRequest) {
try {
const searchParams = request.nextUrl.searchParams;
const rawBody = request.nextUrl.searchParams.toString();
const headers: Record<string, string> = {};
request.headers.forEach((value, key) => {
headers[key] = value;
});
const params: EasyPayNotifyParams = {
pid: searchParams.get('pid') || '',
name: searchParams.get('name') || '',
money: searchParams.get('money') || '',
out_trade_no: searchParams.get('out_trade_no') || '',
trade_no: searchParams.get('trade_no') || '',
param: searchParams.get('param') || '',
trade_status: searchParams.get('trade_status') || '',
type: searchParams.get('type') || '',
sign: searchParams.get('sign') || '',
sign_type: searchParams.get('sign_type') || '',
};
const success = await handlePaymentNotify(params);
const notification = await easyPayProvider.verifyNotification(rawBody, headers);
const success = await handlePaymentNotify(notification, easyPayProvider.name);
return new Response(success ? 'success' : 'fail', {
headers: { 'Content-Type': 'text/plain' },
});

15
src/app/api/orders/[id]/cancel/route.ts
View File

@@ -6,30 +6,21 @@ const cancelSchema = z.object({
user_id: z.number().int().positive(),
});
export async function POST(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params;
const body = await request.json();
const parsed = cancelSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: '参数错误', details: parsed.error.flatten().fieldErrors },
{ status: 400 },
);
return NextResponse.json({ error: '参数错误', details: parsed.error.flatten().fieldErrors }, { status: 400 });
}
await cancelOrder(id, parsed.data.user_id);
return NextResponse.json({ success: true });
} catch (error) {
if (error instanceof OrderError) {
return NextResponse.json(
{ error: error.message, code: error.code },
{ status: error.statusCode },
);
return NextResponse.json({ error: error.message, code: error.code }, { status: error.statusCode });
}
console.error('Cancel order error:', error);
return NextResponse.json({ error: '取消订单失败' }, { status: 500 });

5
src/app/api/orders/[id]/route.ts
View File

@@ -1,10 +1,7 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/db';
export async function GET(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> },
) {
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const order = await prisma.order.findUnique({

27
src/app/api/orders/route.ts
View File

@@ -6,7 +6,7 @@ import { getEnv } from '@/lib/config';
const createOrderSchema = z.object({
user_id: z.number().int().positive(),
amount: z.number().positive(),
payment_type: z.enum(['alipay', 'wxpay']),
payment_type: z.enum(['alipay', 'wxpay', 'stripe']),
});
export async function POST(request: NextRequest) {
@@ -16,10 +16,7 @@ export async function POST(request: NextRequest) {
const parsed = createOrderSchema.safeParse(body);
if (!parsed.success) {
return NextResponse.json(
{ error: '参数错误', details: parsed.error.flatten().fieldErrors },
{ status: 400 },
);
return NextResponse.json({ error: '参数错误', details: parsed.error.flatten().fieldErrors }, { status: 400 });
}
const { user_id, amount, payment_type } = parsed.data;
@@ -34,15 +31,11 @@ export async function POST(request: NextRequest) {
// Validate payment type is enabled
if (!env.ENABLED_PAYMENT_TYPES.includes(payment_type)) {
return NextResponse.json(
{ error: `不支持的支付方式: ${payment_type}` },
{ status: 400 },
);
return NextResponse.json({ error: `不支持的支付方式: ${payment_type}` }, { status: 400 });
}
const clientIp = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim()
|| request.headers.get('x-real-ip')
|| '127.0.0.1';
const clientIp =
request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() || request.headers.get('x-real-ip') || '127.0.0.1';
const result = await createOrder({
userId: user_id,
@@ -54,15 +47,9 @@ export async function POST(request: NextRequest) {
return NextResponse.json(result);
} catch (error) {
if (error instanceof OrderError) {
return NextResponse.json(
{ error: error.message, code: error.code },
{ status: error.statusCode },
);
return NextResponse.json({ error: error.message, code: error.code }, { status: error.statusCode });
}
console.error('Create order error:', error);
return NextResponse.json(
{ error: '创建订单失败，请稍后重试' },
{ status: 500 },
);
return NextResponse.json({ error: '创建订单失败，请稍后重试' }, { status: 500 });
}
}

35
src/app/api/stripe/webhook/route.ts Normal file
View File

@@ -0,0 +1,35 @@
import { NextRequest, NextResponse } from 'next/server';
import { initPaymentProviders, paymentRegistry } from '@/lib/payment';
import type { PaymentType } from '@/lib/payment';
import { handlePaymentNotify } from '@/lib/order/service';
// Stripe needs raw body - ensure Next.js doesn't parse it
export const dynamic = 'force-dynamic';
export async function POST(request: NextRequest): Promise<NextResponse> {
try {
initPaymentProviders();
const provider = paymentRegistry.getProvider('stripe' as PaymentType);
const rawBody = Buffer.from(await request.arrayBuffer());
const headers: Record<string, string> = {};
request.headers.forEach((value, key) => {
headers[key.toLowerCase()] = value;
});
const notification = await provider.verifyNotification(rawBody, headers);
if (!notification) {
// Unknown event type — acknowledge receipt
return NextResponse.json({ received: true });
}
await handlePaymentNotify(notification, provider.name);
return NextResponse.json({ received: true });
} catch (error) {
console.error('Stripe webhook error:', error);
return NextResponse.json(
{ error: 'Webhook processing failed' },
{ status: 400 },
);
}
}

5
src/app/api/users/[id]/route.ts
View File

@@ -1,10 +1,7 @@
import { NextResponse } from 'next/server';
import { getUser } from '@/lib/sub2api/client';
export async function GET(
_request: Request,
{ params }: { params: Promise<{ id: string }> },
) {
export async function GET(_request: Request, { params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const userId = Number(id);

2
src/app/globals.css
View File

@@ -1,4 +1,4 @@
@import "tailwindcss";
@import 'tailwindcss';
:root {
--background: #f9fafb;

12
src/app/layout.tsx
View File

@@ -1,9 +1,9 @@
import type { Metadata } from "next";
import "./globals.css";
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: "Sub2API 充值",
description: "Sub2API 余额充值平台",
title: 'Sub2API 充值',
description: 'Sub2API 余额充值平台',
};
export default function RootLayout({
@@ -13,9 +13,7 @@ export default function RootLayout({
}>) {
return (
<html lang="zh-CN">
<body className="bg-gray-50 text-gray-900 antialiased">
{children}
</body>
<body className="bg-gray-50 text-gray-900 antialiased">{children}</body>
</html>
);
}

12
src/app/pay/orders/page.tsx
View File

@@ -154,7 +154,9 @@ function OrdersContent() {
if (isMobile) {
return (
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950 text-slate-100' : 'bg-slate-50 text-slate-900'}`}>
<div
className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950 text-slate-100' : 'bg-slate-50 text-slate-900'}`}
>
正在切换到移动端订单 Tab...
</div>
);
@@ -184,7 +186,9 @@ function OrdersContent() {
onClick={loadOrders}
className={[
'rounded-lg border px-3 py-2 text-xs font-medium',
isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
isDark
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
].join(' ')}
>
刷新
@@ -193,7 +197,9 @@ function OrdersContent() {
href={payUrl}
className={[
'rounded-lg border px-3 py-2 text-xs font-medium',
isDark ? 'border-slate-600 text-slate-200 hover:bg-slate-800' : 'border-slate-300 text-slate-700 hover:bg-slate-100',
isDark
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
].join(' ')}
>
返回充值

9
src/app/pay/page.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useSearchParams } from 'next/navigation';
import { useState, useEffect, Suspense, useMemo } from 'react';
import { useState, useEffect, Suspense } from 'react';
import PaymentForm from '@/components/PaymentForm';
import PaymentQRCode from '@/components/PaymentQRCode';
import OrderStatus from '@/components/OrderStatus';
@@ -13,9 +13,10 @@ interface OrderResult {
orderId: string;
amount: number;
status: string;
paymentType: 'alipay' | 'wxpay';
paymentType: 'alipay' | 'wxpay' | 'stripe';
payUrl?: string | null;
qrCode?: string | null;
checkoutUrl?: string | null;
expiresAt: string;
}
@@ -47,7 +48,7 @@ function PayContent() {
const [activeMobileTab, setActiveMobileTab] = useState<'pay' | 'orders'>('pay');
const [config] = useState<AppConfig>({
enabledPaymentTypes: ['alipay', 'wxpay'],
enabledPaymentTypes: ['alipay', 'wxpay', 'stripe'],
minAmount: 1,
maxAmount: 10000,
});
@@ -185,6 +186,7 @@ function PayContent() {
paymentType: data.paymentType || paymentType,
payUrl: data.payUrl,
qrCode: data.qrCode,
checkoutUrl: data.checkoutUrl,
expiresAt: data.expiresAt,
});
@@ -385,6 +387,7 @@ function PayContent() {
orderId={orderResult.orderId}
payUrl={orderResult.payUrl}
qrCode={orderResult.qrCode}
checkoutUrl={orderResult.checkoutUrl}
paymentType={orderResult.paymentType}
amount={orderResult.amount}
expiresAt={orderResult.expiresAt}

25
src/app/pay/result/page.tsx
View File

@@ -5,8 +5,9 @@ import { useEffect, useState, Suspense } from 'react';
function ResultContent() {
const searchParams = useSearchParams();
const outTradeNo = searchParams.get('out_trade_no');
const tradeStatus = searchParams.get('trade_status');
// 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 [status, setStatus] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
@@ -62,9 +63,7 @@ function ResultContent() {
{status === 'COMPLETED' ? '充值成功' : '充值处理中'}
</h1>
<p className="mt-2 text-gray-500">
{status === 'COMPLETED'
? '余额已成功到账！'
: '支付成功，余额正在充值中...'}
{status === 'COMPLETED' ? '余额已成功到账！' : '支付成功，余额正在充值中...'}
</p>
</>
) : isPending ? (
@@ -89,9 +88,7 @@ function ResultContent() {
</>
)}
<p className="mt-4 text-xs text-gray-400">
订单号: {outTradeNo || '未知'}
</p>
<p className="mt-4 text-xs text-gray-400">订单号: {outTradeNo || '未知'}</p>
</div>
</div>
);
@@ -99,11 +96,13 @@ function ResultContent() {
export default function PayResultPage() {
return (
<Suspense fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="text-gray-500">加载中...</div>
</div>
}>
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="text-gray-500">加载中...</div>
</div>
}
>
<ResultContent />
</Suspense>
);