[Donation Form] Step 2 - Stripe.js implementation and migrate to Tailwind CSS + shadcn/ui

[thaninbew]

Overview

• Use Stripe Elements to handle PCI-safe card collection. Refer to Stripe documentation - CardElement/PaymentElement from Stripe.js. Current fields aren't secure for handling sensitive data, we can't be processing sensitive user data in our code.
• The last step of this ticket will be migrating to Tailwind CSS + shadcn/ui. There are two other tickets doing the same thing, so I would wait until one of them has a modified shadcn button and/or input field components and reuse it on this page. The rest
• Transaction fee card is already implemented. Migrate this to Tailwind. + shadcn.

Tasks

1. Install @stripe/stripe-js and @stripe/react-stripe-js dependencies
2. Create a StripeProvider wrapper component (e.g., StripeProvider.tsx) that initializes Stripe and provides Elements context to DonationForm and child steps
3. Replace raw card input fields (cardNumber, cardExpiry, cardCvc) in Step 2 with Stripe's <CardElement> or <PaymentElement>
4. Hook into useStripe and useElements hooks to capture card details securely
5. Migrate Step 2 donor info fields to shadcn <Input> components (reuse from Steps 1 & 3 if available)
6. Migrate transaction fee card to Tailwind CSS + a shadcn component
7. After backend connection ticket is completed (week 2): Integrate with backend POST /payments/intent and POST /donations endpoints:
   • Call POST /payments/intent in Step 3 confirm handler before creating donation
   • Pass returned clientSecret to Stripe's confirmCardPayment()
   • On successful payment confirmation, call POST /donations with form data and paymentIntentId
   • Handle errors from both endpoints and display to user

Acceptance Criteria

• @stripe/stripe-js and @stripe/react-stripe-js are installed
• StripeProvider component wraps the donation form and initializes Stripe with publishable key from environment
• Step 2 displays <CardElement> or <PaymentElement> instead of raw card input fields
• Donor info fields (firstName, lastName, email) use shadcn <Input> components
• Transaction fee card is styled with Tailwind and shadcn <Card>
• Step 2 layout is cleaned up and uses no legacy CSS classes
• Form can advance through Steps 1-3 without validation errors
• Step 3 confirm button triggers payment intent creation and card confirmation with Stripe
• On successful payment confirmation, donation is created with paymentIntentId and user is taken to Step 4
• On failed payment confirmation, appropriate error message is displayed
• Provide a screenshot of the updated Step 2 layout (including summary and card element)
• No console errors or TypeScript mismatches
• no donations.css import from Step 2
• Lint runs passes

Notes

• The backend POST /payments/intent endpoint already exists; integrate with it, do not mock
• Prefer waiting for Steps 1 & 3 Tailwind migration devs to push some reuseable components so you can reuse their shadcn component implementations for consistency, but if not feel free to make your own (then push asap, and notify others in slack so people know to use the component).
• Ensure webhook integration is tested after form submission to verify donation status updates
• shadcn/ui setup: pull latest, install, then you'll be able to copy-paste components from the shadcn website/repo.
  Depending on which components shadcn copies, they might need more Radix packages.