feat Customer payment page

Author: yanboishere

.kiro/specs/workwork-ledger-mvp/tasks.md

@@ -185,19 +185,19 @@
     - 加密存储 API keys
     - _需求: 2.2, 2.5_
 
-- [ ] 11. 客户支付页面
-  - [ ] 11.1 实现公开支付页面路由
+- [x] 11. 客户支付页面
+  - [x] 11.1 实现公开支付页面路由
     - /pay/[token] 路由
     - 验证 token 有效性
     - _需求: 6.1, 6.6_
-  - [ ] 11.2 编写属性测试：支付链接有效性
+  - [x] 11.2 编写属性测试：支付链接有效性
     - **属性 15: 支付链接有效性**
     - **验证: 需求 6.1**
-  - [ ] 11.3 实现支付页面 UI
+  - [x] 11.3 实现支付页面 UI
     - 显示发票详情
     - 支付方式选择
     - _需求: 6.1, 6.2, 6.3_
-  - [ ] 11.4 实现 PSP Checkout 跳转
+  - [x] 11.4 实现 PSP Checkout 跳转
     - 创建 Checkout Session 并重定向
     - _需求: 6.2_
 

src/app/api/pay/[token]/checkout/route.ts

@@ -0,0 +1,151 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Decimal from 'decimal.js';
+import { prisma } from '@/lib/prisma';
+import { validatePaymentToken } from '@/server/payment/payment-link';
+import { getPSPCredentials } from '@/server/payment/credentials';
+import { getPaymentGateway } from '@/server/payment/gateway-factory';
+import type { Currency } from '@prisma/client';
+
+/**
+ * POST /api/pay/[token]/checkout
+ * Creates a Stripe Checkout session and returns the redirect URL
+ * _需求: 6.2_
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  try {
+    const { token } = await params;
+    const body = await request.json();
+    const { method } = body;
+
+    if (!token) {
+      return NextResponse.json(
+        { error: 'Invalid payment token' },
+        { status: 400 }
+      );
+    }
+
+    if (method !== 'card') {
+      return NextResponse.json(
+        { error: 'Only card payment is currently supported' },
+        { status: 400 }
+      );
+    }
+
+    // Validate the payment token and get invoice
+    const result = await validatePaymentToken(token);
+
+    if (!result.valid) {
+      const errorMessages: Record<string, string> = {
+        not_found: 'Invoice not found',
+        expired: 'Payment link has expired',
+        already_paid: 'Invoice has already been paid',
+        cancelled: 'Invoice has been cancelled',
+      };
+      return NextResponse.json(
+        { error: errorMessages[result.error] || 'Invalid payment link' },
+        { status: 400 }
+      );
+    }
+
+    const { invoice } = result;
+
+    // Check if card payment is allowed
+    if (!invoice.allowCardPayment) {
+      return NextResponse.json(
+        { error: 'Card payment is not enabled for this invoice' },
+        { status: 400 }
+      );
+    }
+
+    // Get the invoice owner's user ID to fetch PSP credentials
+    const invoiceRecord = await prisma.invoice.findFirst({
+      where: { paymentToken: token },
+      select: { userId: true },
+    });
+
+    if (!invoiceRecord) {
+      return NextResponse.json(
+        { error: 'Invoice not found' },
+        { status: 404 }
+      );
+    }
+
+    // Get PSP credentials for the invoice owner
+    const credentials = await getPSPCredentials(invoiceRecord.userId);
+
+    if (!credentials) {
+      return NextResponse.json(
+        { error: 'Payment is not configured for this merchant' },
+        { status: 400 }
+      );
+    }
+
+    // Create payment gateway
+    const gateway = getPaymentGateway(credentials);
+
+    // Build success and cancel URLs
+    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || request.nextUrl.origin;
+    const successUrl = `${baseUrl}/pay/${token}/success`;
+    const cancelUrl = `${baseUrl}/pay/${token}`;
+
+    // Create checkout session
+    const session = await gateway.createCheckoutSession({
+      invoiceId: invoice.id,
+      amount: new Decimal(invoice.total),
+      currency: invoice.currency as Currency,
+      customerEmail: invoice.client.email,
+      successUrl,
+      cancelUrl,
+      metadata: {
+        invoiceId: invoice.id,
+        invoiceNumber: invoice.invoiceNumber,
+        paymentToken: token,
+      },
+    });
+
+    // Store the checkout session ID for later verification
+    await prisma.payment.upsert({
+      where: { invoiceId: invoice.id },
+      create: {
+        invoiceId: invoice.id,
+        type: 'fiat',
+        amount: invoice.total,
+        currency: invoice.currency as Currency,
+        status: 'pending',
+        metadata: { checkoutSessionId: session.id },
+        fiatPayment: {
+          create: {
+            pspProvider: credentials.provider,
+            checkoutSessionId: session.id,
+          },
+        },
+      },
+      update: {
+        status: 'pending',
+        metadata: { checkoutSessionId: session.id },
+        fiatPayment: {
+          upsert: {
+            create: {
+              pspProvider: credentials.provider,
+              checkoutSessionId: session.id,
+            },
+            update: {
+              checkoutSessionId: session.id,
+            },
+          },
+        },
+      },
+    });
+
+    return NextResponse.json({ url: session.url });
+  } catch (error) {
+    console.error('Checkout error:', error);
+    return NextResponse.json(
+      { error: 'Failed to create checkout session' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/pay/[token]/validate/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { validatePaymentToken } from '@/server/payment/payment-link';
+
+/**
+ * GET /api/pay/[token]/validate
+ * Validates a payment token and returns invoice data
+ * _需求: 6.1, 6.6_
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ token: string }> }
+) {
+  try {
+    const { token } = await params;
+
+    if (!token) {
+      return NextResponse.json(
+        { valid: false, error: 'not_found' },
+        { status: 404 }
+      );
+    }
+
+    const result = await validatePaymentToken(token);
+
+    if (!result.valid) {
+      const statusCode = result.error === 'not_found' ? 404 : 400;
+      return NextResponse.json(result, { status: statusCode });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('Payment token validation error:', error);
+    return NextResponse.json(
+      { valid: false, error: 'not_found' },
+      { status: 500 }
+    );
+  }
+}

src/app/pay/[token]/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { PaymentPageContent } from '@/components/payment/payment-page-content';
+import { PaymentPageError } from '@/components/payment/payment-page-error';
+import { PaymentPageLoading } from '@/components/payment/payment-page-loading';
+import type { PaymentPageInvoice } from '@/server/payment/payment-link';
+
+type PageState =
+  | { status: 'loading' }
+  | { status: 'error'; error: 'not_found' | 'expired' | 'already_paid' | 'cancelled' }
+  | { status: 'success'; invoice: PaymentPageInvoice };
+
+/**
+ * Public Payment Page
+ * Allows customers to view and pay invoices without authentication
+ * _需求: 6.1, 6.6_
+ */
+export default function PaymentPage() {
+  const params = useParams();
+  const token = params.token as string;
+  const [state, setState] = useState<PageState>({ status: 'loading' });
+
+  useEffect(() => {
+    async function validateToken() {
+      if (!token) {
+        setState({ status: 'error', error: 'not_found' });
+        return;
+      }
+
+      try {
+        const response = await fetch(`/api/pay/${token}/validate`);
+        const data = await response.json();
+
+        if (data.valid) {
+          setState({ status: 'success', invoice: data.invoice });
+        } else {
+          setState({ status: 'error', error: data.error || 'not_found' });
+        }
+      } catch {
+        setState({ status: 'error', error: 'not_found' });
+      }
+    }
+
+    validateToken();
+  }, [token]);
+
+  if (state.status === 'loading') {
+    return <PaymentPageLoading />;
+  }
+
+  if (state.status === 'error') {
+    return <PaymentPageError error={state.error} />;
+  }
+
+  return <PaymentPageContent invoice={state.invoice} token={token} />;
+}

src/app/pay/[token]/success/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+
+/**
+ * Payment Success Page
+ * Displayed after successful payment completion
+ * _需求: 6.4_
+ */
+export default function PaymentSuccessPage() {
+  const params = useParams();
+  const token = params.token as string;
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
+          <svg
+            className="w-8 h-8 text-green-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </div>
+        <h1 className="text-2xl font-bold text-gray-900 mb-2">Payment Successful!</h1>
+        <p className="text-gray-600 mb-6">
+          Thank you for your payment. A confirmation email will be sent to you shortly.
+        </p>
+        <Link
+          href={`/pay/${token}`}
+          className="inline-block px-6 py-2 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors"
+        >
+          View Invoice
+        </Link>
+      </div>
+    </div>
+  );
+}