tech-debt: reconcile duplicate payment UIs (PaymentDemo vs PaymentFlow)

[mollybeach]

Context

Two parallel payment UIs now exist after merging main into the payment-card branch:

• app/components/PaymentDemo.tsx (+ /pay page, serializePaymentResult DTO from POST /api/payments).
• src/components/PaymentFlow.tsx + PaymentCard.tsx + src/hooks/usePayment.ts / useFlowPayment.ts + /pay/[data].

Problem

Duplicated, overlapping logic and visual language; unclear which is canonical. Risk of drift and double-maintenance.

Tasks

• Decide the canonical flow (recommend: keep one card component + one hook).
• Reconcile the two PaymentResult shapes (DTO vs hook result mode/txHash).
• Verify the merged orchestrator.ts/types.ts still match serializePaymentResult (PaymentLeg fields: rail, settlementRef).
• Remove or fold the redundant component; keep /pay and /pay/[data] consistent.
• De-duplicate the iMessage mockup HTML (ios/preview/ vs public/) into a single source.

Acceptance criteria

• One payment-card component and one result type; /pay and /pay/[data] render identically styled cards.

Affected files

app/components/PaymentDemo.tsx, src/components/PaymentFlow.tsx, src/components/PaymentCard.tsx, src/hooks/usePayment.ts, src/hooks/useFlowPayment.ts, src/core/payments/serialize.ts