Checkout app: fix pre-existing tsc errors (production build will fail)

[0xdevcollins]

Why

`tsc --noEmit` in `apps/checkout` reports ~25 type errors across multiple components. The dev server renders fine via Next.js's Turbopack (which is permissive), but `next build` for production will fail the moment we try to deploy.

These errors are pre-existing — they predate PR #136 and were flagged during PR 6/7 work. The link route (`app/l/[shortCode]`), crypto component (`CryptoPayment.tsx`), and lib helpers are all clean. The drift is concentrated in the post-method-pick pages and components.

Scope

Get `cd apps/checkout && tsc --noEmit` to report zero errors.

The error categories

Run `cd apps/checkout && npx tsc --noEmit` to get the live list. As of last check (2026-05-24) they cluster into 6 categories:

1. `Payment` type drift

`components/{ConfirmPageClient,ExpiredPageClient,PaymentPageClient,SuccessPageClient}.tsx` reference `Payment.merchant`, `Payment.metadata`, `Payment.paymentMethods` — none of these are on the canonical `Payment` type from `@useroutr/types`. They live on the checkout response (`GET /v1/checkout/:paymentId`), which is a different shape.

Fix: Use the `CheckoutPayment` type returned by `usePayment` (defined in `apps/checkout/hooks/usePayment.ts`) instead of `Payment`. Or rename + re-export the right type.

2. `Quote` field name drift

`components/CryptoPayment.tsx` line ~368 references `Quote.fee` — the API DTO field is `Quote.feeAmount`. (This one may already be fixed by PR #136's CryptoPayment rewrite — re-verify.)

3. `MerchantBranding` callers passing wrong prop names

• `app/[paymentId]/bank/page.tsx`, `ConfirmPageClient.tsx`, `SuccessPageClient.tsx` pass no props (or wrong names like `name=` instead of `merchantName=`)
• `PaymentPageClient.tsx` passes `name=` and `logo=` instead of `merchantName=` and `merchantLogo=`

Fix: Use the canonical prop names from `components/MerchantBranding.tsx` (`merchantName`, `merchantCompanyName`, `merchantLogo`).

4. Stripe event-type imports

`components/CardForm.tsx` imports types like `StripeCardCvcElementChangeEvent` that no longer exist in the installed `@stripe/react-stripe-js`. The new module exports `StripeElementChangeEvent` from `@stripe/stripe-js` instead.

Fix: Replace the specific change-event types with the generic `StripeElementChangeEvent`.

5. `PaymentMethodSelector` missing import

`components/PaymentMethodSelector.tsx` imports a `PaymentMethod` type from `@/hooks/usePayment` — that type isn't exported. The type literal exists (`'card' | 'bank' | 'crypto'`) but isn't re-exported.

Fix: Define + export the type from `hooks/usePayment.ts`:
```ts
export type PaymentMethod = "card" | "bank" | "crypto";
```

6. Test setup — `toBeInTheDocument` not recognized

`tests/crypto-payment.test.tsx` uses `expect(…).toBeInTheDocument()` but TypeScript doesn't see the `@testing-library/jest-dom` matchers.

Fix: Either add a `vitest.setup.ts` with `import "@testing-library/jest-dom/vitest"` and reference it from `vitest.config.ts`, or add a `global.d.ts` with the type augmentation.

Files to read first

• `apps/checkout/tsconfig.json` — confirm `strict: true`
• `apps/checkout/hooks/usePayment.ts` — source of truth for the checkout-side Payment type
• `apps/checkout/components/MerchantBranding.tsx` — canonical prop shape
• `packages/types/src/payment.types.ts` — what `Payment` actually is in the shared type

Rules of engagement

• Don't change runtime behavior. Pure type alignment. If a fix would change what the UI does, file a follow-up issue instead.
• Don't touch the link route or CryptoPayment. Those landed clean in PR Phase 1: hosted checkout, CCTP V2 cutover, managed Stellar settlement #136; the existing test setup matches them.
• One PR per category is fine if you want to keep diffs reviewable, OR one big "tsc cleanup" PR — your call.

Acceptance criteria

• `cd apps/checkout && npx tsc --noEmit` reports zero errors
• `cd apps/checkout && npm run build` completes successfully (Next.js production build)
• No console errors in the dev server
• Manual smoke: link → method picker → all three method routes render without crashing
• Vitest run still green (assuming test setup Implement Webhook Delivery System with Retry Logic #6 lands)

Estimated effort

~1–2 days. Most of the work is mechanical type alignment; the test setup (#6) might need a tiny config dive.