Donations Flow

[jennymar]

Description: Develop the flow for the Donations section. Users can either donate physical items or money through PayPal or Credit/Debit.

Figma Here

In order to handle online payments, we most likely want to use the react-paypal-js npm package. For the monetary tab, the design may need to change depending on what we are capable of presenting on the UI in our react app. Here are some resources of other uses:

• https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--donate
• https://github.com/paypaldev/PayPal-React-Donation-Sample?tab=readme-ov-file#add-environment-variables
• https://dev.to/paypaldeveloper/how-to-add-paypal-checkout-payments-to-your-react-app-53aa

Frontend

• Background Image
• Donate module with Monetary & Physical tabs
• Physical: input fields for first name, last name, email, phone, leave a comment
• Monetary: will be based off of what we are capable of displaying using react-paypal-js

Backend

• Physical Donations form sent to their email (there's an existing sendEmail function in frontend/src/api/email.ts that you can use)
• Monetary Donations using react paypal package