# Confirmation page displays order number and next steps

- **Pattern:** `ab-001108` (`ecommerce-cart-ux.order-confirmation.confirmation-page`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001108
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001108)

## Why it matters

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.

## Severity rationale

High because customers who cannot reference an order ID after payment cannot self-serve returns or tracking, driving support load and undermining purchase confidence.

## Remediation

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:

```tsx
// 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.

## Detection

- **ID:** `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`:

  ```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>
    )
  }
  ```

## External references

- cwe CWE-20
- iso-25010 functional-suitability.functional-correctness

Taxons: user-experience, data-integrity

HTML version: https://auditbuffet.com/patterns/ab-001108