Order summary shows line items, shipping, taxes, and total before payment

Presenting a payment form without a complete order summary — line items, shipping cost, tax amount, and final total — violates the reasonable expectation of informed consent before a financial transaction. ISO 25010:2011 functional correctness requires that the system accurately communicate what the user is authorizing. CWE-20 applies when placeholder values ("TBD", "$0.00") appear in tax or shipping fields: the user authorizes an amount they cannot verify, which leads to chargebacks, disputes, and loss of trust. Regulatory guidance in many jurisdictions (EU Consumer Rights Directive, FTC rules) also requires clear pre-payment disclosure of total charges.

Add a review step at src/components/OrderReview.tsx and render it before the payment form — not after. The component must display all four fields computed from live cart data:

// src/components/OrderReview.tsx
function OrderReview({ cart, shipping, tax, total }: OrderReviewProps) {
  const subtotal = cart.reduce((sum, i) => sum + i.lineTotal, 0)
  return (
    <section>
      {cart.map(item => (
        <div key={item.id}>{item.name} x{item.quantity} — ${(item.lineTotal/100).toFixed(2)}</div>
      ))}
      <p>Shipping: ${(shipping/100).toFixed(2)}</p>
      <p>Tax: ${(tax/100).toFixed(2)}</p>
      <p><strong>Total: ${(total/100).toFixed(2)}</strong></p>
    </section>
  )
}

Never render "TBD" or $0.00 for shipping or tax when real values are computable; fetch shipping and tax estimates as soon as an address is entered.