frankly034/online-payment-fe

This is a React app, bootstrapped using Vite. It is part of a tutorial series (See playlist) to illustrate how to integrate payment using an application's payment api.

Online Payment FE (Donations App)

This is a React app, bootstrapped using Vite. It is part of a tutorial series (See playlist) to illustrate how to integrate payment using an application's payment api. The api is hosted with Railway App at this url => https://online-payment-api-production.up.railway.app/

To use the already hosted api, update the environment variable: VITE_BACKEND_URL=https://online-payment-api-production.up.railway.app/api

Table of Contents

• App Features
• Concepts and Apis Employed
• Built with
• Mock Designs
• Required Installations
• Installation of This App
• License
• Contact
• Acknowledgements

App Features

• A donor visiting the app, is greeted with a donate page 🤭 to make donations for Sickle Cell research.
• Upon submittion of a valid donation form, the donor is redirected to paystack to conclude payment by providing card/bank details.
• Once transaction is concluded on paystack the donor is redirected back to the application to a thank you page acknowledging donation 🙏🏽.

Concepts and APIs Employed

• The API employed for donation was gotten from a previous project: Online Payment API. Checkout the youtube playlist of a walkthrough on how the API was built here.
• API documentation can be found here
• This app demonstrates the use of React concepts like:
  • Components structuring
  • Routing and templating with react route dom v6
  • API integration with axios
  • Data fetching management with @tanstack/react-query
  • Custom hooks
  • Typescript concepts like (generics, interfaces, etc)
  • Form validation with formik and yup
  • Simple form generator with validation using formik and yup

Built with

• HTML5
• CSS3
• JavaScript
• React

Mock Designs

See mock design guides for the app below;

• Donate Page.
• Donations/Receipt Page.
• Error Page.

Required Installations

• Npm
• API app running SEE

Installation of This Repository

Once you have installed the required packages with the api app running as shown on the Required Installations, proceed with the following steps

Clone the Repository

your@pc:~$ git clone [email protected]:frankly034/online-payment-fe.git

Move to the downloaded folder

your@pc:~$ cd online-payment-fe

Install all packages

your@pc:~$ npm install

Open the app

your@pc:~$ npm run dev

License

Distributed under the MIT License. See LICENSE for more information.

Contact

• 🇳🇬 Lewis Ugege - [email protected] | Github Account | Twitter | Linkedin | Youtube

Acknowledgements

• Paystack and God Almighty .