Create reusable components

Create reusable components for the payments flow so the next features plug into them. Build a card list component with editable rows, a payment method modal, the validation states, and a reusable error banner. Ensure the components accept props for label, amount, and callback handlers. Document expected data shapes and example payloads. Finish and mark Ready for Dev by Thursday.

Before I hand these payment components to backend, make them easy to integrate: surface required data keys up front, show examples of success and error payloads, make the validation rules explicit next to each field, and flag moments where the component needs to block the UI (loading, pending payment). Identify anything that will surprise an integrator.

Backend just messaged: the payment modal expects a nested payment object we don't produce. I don't know why the mismatch exists. Tell me the likely origin (old contract, inconsistent props, or missing API mapping) and recommend the fastest fix so devs can continue—change the component shape, add a mapper, or update the API contract?

Across three integrations we keep asking devs to patch components for slightly different data shapes. Where is the pattern failing and what habit should I change so components stay reusable? Propose one standard for prop contracts and one lightweight review step to catch API mismatches before dev work begins.