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.

• ID: ecommerce-cart-ux.order-confirmation.confirmation-page

• Severity: high

• What to look for: Find the post-purchase confirmation page (e.g., src/app/checkout/confirmation/page.tsx, src/app/order/[id]/page.tsx). Count the presence of these 3 required elements: (1) order number or confirmation code displayed prominently, (2) at least 1 next-step item (email confirmation expected, tracking link, estimated delivery, invoice download), (3) order summary recap (items, total). Quote the component rendering the order number and list the next-step items found.

• Pass criteria: Confirmation page exists and displays at least 2 of 3 required elements: order number, at least 1 next step, and order summary. The order number must be dynamically rendered from order data, not a hardcoded placeholder. Report: "Confirmation page at [path] displays X of 3 required elements: [list]."

• Fail criteria: Confirmation page is missing entirely, shows only a static "Thank you!" with no order-specific data, or displays fewer than 2 of 3 required elements.

• Do NOT pass when: The page exists but renders a hardcoded order number (e.g., Order #12345) instead of the actual order ID from the database.

• Skip (N/A) when: The project has no checkout/payment flow (informational site, no order processing).

• Detail on fail: Example: "Confirmation page at src/app/checkout/success/page.tsx shows only 'Thank you!' heading. 0 of 3 required elements present — no order number, no next steps, no order summary. Customer has no way to reference or track the order."

• Cross-reference: For pre-payment order summary, see the pre-payment-review check in Checkout Flow. For confirmation email content, see the confirmation-email check below. For order tracking, see the tracking-link check below.

• Remediation: Build a detailed confirmation page at src/app/checkout/confirmation/page.tsx:

  // src/app/checkout/confirmation/page.tsx
  function ConfirmationPage({ order }) {
    return (
      <div className="confirmation">
        <h1>Order Confirmed!</h1>
        <div className="order-number">
          <p>Order #: <strong>{order.id}</strong></p>
          <p>Placed on: {new Date(order.createdAt).toLocaleDateString()}</p>
        </div>
        <div className="next-steps">
          <h2>What's Next?</h2>
          <ul>
            <li>Confirmation email sent to {order.email}</li>
            <li><a href={`/orders/${order.id}/tracking`}>Track Your Order</a></li>
            <li>Estimated delivery: {order.estimatedDelivery}</li>
          </ul>
        </div>
      </div>
    )
  }