Confirmation page displays order number and next steps

A confirmation page that shows only "Thank you!" with no order number leaves the customer with no reference to use for support, returns, or tracking. ISO 25010:2011 functional correctness requires the system to confirm what actually happened: without a real order ID rendered from database data, the customer cannot verify the transaction completed, cannot initiate a return, and cannot contact support with a reference. CWE-20 applies when a hardcoded placeholder like Order #12345 appears instead of the actual order ID — the system is presenting false information as confirmation. Post-purchase anxiety that goes unresolved by a clear confirmation page directly increases support ticket volume.

Build the confirmation page at src/app/checkout/confirmation/page.tsx to render the order ID from the database and list at least one next step. Fetch the order server-side using the session or order token:

// src/app/checkout/confirmation/page.tsx
export default async function ConfirmationPage({ searchParams }: { searchParams: { orderId: string } }) {
  const order = await db.order.findUnique({ where: { id: searchParams.orderId } })
  if (!order) notFound()
  return (
    <main>
      <h1>Order Confirmed</h1>
      <p>Order <strong>#{order.id}</strong> placed on {order.createdAt.toLocaleDateString()}</p>
      <p>Confirmation email sent to {order.email}</p>
      <a href={`/orders/${order.id}/tracking`}>Track your order</a>
    </main>
  )
}

Never hardcode an order number. If the order ID is unavailable, surface an error rather than a false confirmation.