Donation form - Step 2

[thaninbew]

Overview

Please read: Implement this step 2 child component for the donation form, integrate the existing DonationSummary component
Do not implement the step progress bar at this stage. A barebones implementation has been implemented, feel free to change/remove anything to match the current design.
The form will be structured as a parent DonationForm with four child components responsible for each step in the flow. This ticket is the Step 2 child component.

Use Stripe:

• The backend already has the stripe SDK but the frontend needs stripe-js and possibly react-stripe-js for the Stripe React SDK.
• Use a StripeProvider.tsx
• Replace raw card inputs in Step2Details with <CardElement> or <PaymentElement>
• OnSubmit -> create payment intent + confirm, but as of now FYI: backend doesn't expose this endpoint yet.
• Need to do this for PCI compliance.

Overall Component Structure (implemented barebones in the code already)

• DonationForm (parent; manages step state, logic, and shared form data)
  • Step1Amount — Choose donation amount and recurrence (one-time, weekly, monthly, yearly)
  • Step2Details — Enter name, card/payment info, email, and tip
  • Step3Confirm — Review donation details; final confirmation before submitting
  • Step4Receipt — Display receipt or thank you message after successful donation

References