How to integrate Razorpay payment gateway in ReactJS

Hello everyone!
I hope the tutorial has helped you learn how to integrate Razorpay payment gateway in ReactJS.

create-react-app sets up the environment for developing and running a React application.
npx create-react-app app-directory

Razorpay
Now move to Razorpay intergeration

1. Register using your email account.
2. Log into your Dashboard with appropriate credentials.
3. Select the mode (Test or Live) for which you want to generate the API key
   • Test Mode: The test mode is a simulation mode that you can use to test your integration flow. Your customers will not be able to make payments in this mode.
   • Live Mode: When your integration is complete, switch to live mode and generate live mode API keys. Replace test mode keys with live mode keys in the integration to accept payments from customers.
4. Navigate to Settings → API Keys → Generate Key to generate key for the selected mode.

Then Key Id and Key Secret appear on a pop-up page.

Accept All Payment Modes
With Domestic and International Credit & Debit cards, EMIs ( Credit/Debit Cards & Cardless), PayLater, Netbanking from 58 banks, UPI and 8 mobile wallets, Razorpay provides the most extensive set of payment methods.

Powerful Dashboard
Get reports and detailed statistics on payments, settlements, refunds and much more for you to take better business decisions.

Demo : https://razorpay-payment-gateway-in-reactjs.vercel.app/
Source : https://github.com/erajamanickam/how-to-integrate-razorpay-payment-gateway-in-reactjs

Your comments and suggestions will be greatly appreciated.
Thankyou.