支付成功页面开发

// 成功状态组件示例
function PaymentSuccess({ orderId, amount, currency }: Props) {
  return (
    <div className="flex flex-col items-center py-12 text-center">
      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
        <CheckIcon className="h-8 w-8 text-green-600" />
      </div>
      <h1 className="text-2xl font-semibold text-gray-900">支付成功</h1>
      <p className="mt-2 text-gray-500">
        已完成 {formatCurrency(amount, currency)} 的支付
      </p>
    </div>
  )
}

// 订阅产品的成功页面底部信息
function SubscriptionSuccessFooter() {
  return (
    <div className="mt-8 rounded-lg border border-gray-200 bg-gray-50 p-4 text-sm text-gray-600">
      <p>你的订阅已激活，下次扣款日期为 2026-08-01。</p>
      <p className="mt-1">30 天内可随时取消并获得全额退款。</p>
      <a href="/help" className="mt-2 inline-block text-blue-600 hover:underline">
        有问题？查看帮助中心 →
      </a>
    </div>
  )
}

// 可复制的订单号组件
function OrderId({ orderId }: { orderId: string }) {
  const [copied, setCopied] = useState(false)
 
  const handleCopy = async () => {
    await navigator.clipboard.writeText(orderId)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }
 
  return (
    <div className="flex items-center gap-2">
      <span className="font-mono text-sm">{orderId}</span>
      <button onClick={handleCopy} className="text-gray-400 hover:text-gray-600">
        {copied ? <CheckIcon className="h-4 w-4 text-green-500" /> : <CopyIcon className="h-4 w-4" />}
      </button>
    </div>
  )
}

// 多币种金额格式化
function formatCurrency(amount: number, currency: string): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency,
    currencyDisplay: 'narrowSymbol',
  }).format(amount)
}
// 输出: "$9.99", "€12.50", "¥1,200"

// Webhook 处理：支付成功后发送收据邮件
// apps/api/src/modules/payment/webhook.handler.ts
 
async function handleCheckoutCompleted(event: Stripe.Event) {
  const session = event.data.object as Stripe.Checkout.Session
 
  const receiptData = {
    orderId: session.metadata?.orderId,
    customerEmail: session.customer_details?.email,
    amountTotal: session.amount_total,
    currency: session.currency,
    lineItems: await stripe.checkout.sessions.listLineItems(session.id),
  }
 
  await emailService.sendReceipt({
    to: receiptData.customerEmail,
    subject: `支付确认 - 订单 ${receiptData.orderId}`,
    data: receiptData,
    template: 'payment-receipt',
  })
}

// 收据补发组件
function ResendReceiptButton({ orderId }: { orderId: string }) {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
 
  const handleResend = async () => {
    setStatus('sending')
    try {
      await api.post('/receipts/resend', { orderId })
      setStatus('sent')
    } catch {
      setStatus('error')
    }
  }
 
  return (
    <button onClick={handleResend} disabled={status === 'sending'}>
      {status === 'idle' && '重新发送收据'}
      {status === 'sending' && '发送中...'}
      {status === 'sent' && '已发送 ✓'}
      {status === 'error' && '发送失败，点击重试'}
    </button>
  )
}

// 分享引导组件
function SharePurchase({ productName, shareUrl }: ShareProps) {
  return (
    <div className="mt-6 rounded-lg border border-blue-100 bg-blue-50 p-4">
      <p className="text-sm font-medium text-blue-900">
        觉得不错？分享给朋友
      </p>
      <p className="mt-1 text-sm text-blue-700">
        朋友通过你的链接注册，双方各获 1 个月免费使用
      </p>
      <div className="mt-3 flex gap-2">
        <ShareButton platform="twitter" url={shareUrl} text={`我刚注册了 ${productName}，推荐给你！`} />
        <ShareButton platform="copy" url={shareUrl} />
      </div>
    </div>
  )
}

// 创建 Checkout Session
const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: `${YOUR_DOMAIN}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${YOUR_DOMAIN}/checkout/cancel`,
  metadata: { orderId: internalOrderId },
})

// Next.js App Router 服务端组件
// app/checkout/success/page.tsx
import { getPaymentSession } from '@/lib/stripe'
 
export default async function CheckoutSuccessPage({
  searchParams,
}: {
  searchParams: Promise<{ session_id?: string }>
}) {
  const { session_id } = await searchParams
 
  if (!session_id) {
    return <NotFound />
  }
 
  const session = await getPaymentSession(session_id)
 
  if (session.payment_status !== 'paid') {
    return <PaymentPending sessionId={session_id} />
  }
 
  return (
    <SuccessView
      orderId={session.metadata?.orderId ?? session.id}
      amount={session.amount_total}
      currency={session.currency}
      email={session.customer_details?.email}
      lineItems={session.line_items?.data ?? []}
    />
  )
}

// 支付状态处理逻辑
function PaymentStatusView({ sessionId }: { sessionId: string }) {
  const { data: session, isLoading, error } = usePaymentSession(sessionId)
 
  if (isLoading) {
    return <LoadingState message="正在确认支付状态..." />
  }
 
  if (error || !session) {
    return <ErrorState message="无法获取支付信息" action="联系客服" />
  }
 
  switch (session.payment_status) {
    case 'paid':
      return <SuccessView session={session} />
    case 'pending':
      return <PendingView session={session} />
    case 'unpaid':
      return <UnpaidView session={session} />
    default:
      return <UnknownStatusView session={session} />
  }
}