How to Integrate Razorpay | Payment Gateway Integration | React and Node.js for web 💵

Summary

In this video, the process of integrating Razorpay payment gateway into a React application is explained step-by-step. It covers signing up for Razorpay, completing KYC, creating an API key, and generating an order ID on the server side. The tutorial demonstrates how to integrate the payment flow using both handler functions and callback URLs. Additionally, it shows how to validate payments on the server, handle payment failures, and leverage webhooks for real-time transaction updates. This comprehensive guide ensures a seamless integration of Razorpay into your web application.

Takeaways

• 😀 Razorpay Integration requires sign-up and KYC process for live transactions, though testing can be done without completing KYC.
• 😀 The Razorpay dashboard shows transaction statuses, including successful and failed payments, which are visible in both test and live modes.
• 😀 An API key must be generated to interact with Razorpay's services, ensuring security and proper access to payment features.
• 😀 Six key steps are involved in Razorpay payment integration, with the first being creating an order ID on the server-side via API.
• 😀 Server-side API calls ensure that sensitive information (API key, secret) is not exposed to the client side, keeping the process secure.
• 😀 The client-side payment integration can use either a handler function or a callback URL to manage payment success and failure.
• 😀 Razorpay's handler function provides detailed response information, including payment ID, order ID, and signature for verification.
• 😀 In this example, Node.js and React are used to create the backend API and frontend components for a full payment flow integration.
• 😀 On the backend, Node.js is used to create the order API and to verify the payment signature using Razorpay's provided HMAC-SHA256 method.
• 😀 To verify the payment, Razorpay requires the generation of a secure signature, which must match the response signature to confirm validity.
• 😀 The script also demonstrates using webhooks to listen for events like 'payment captured' or 'payment failed,' helping with transaction tracking and validation.

Q & A

What is the first step to integrate Razorpay in a React application?

The first step is to sign up on Razorpay, complete the KYC process if necessary, and generate the API keys from the dashboard. Test mode can be used before completing KYC.

Why should the Razorpay API call to create an order be done on the server side?

The server-side API call ensures that the API secret is not exposed to the client, maintaining the security of the payment process.

What are the two methods available for handling payments on the client side?

The two methods are using the Handler function, which provides detailed payment responses including payment ID, order ID, and signature, or using a Callback URL, which simply redirects to success or failure pages.

Which Node.js packages are required to implement Razorpay integration?

The essential packages are 'express' and 'razorpay'. Optional packages for convenience include 'dotenv' for environment variables, 'nodemon' for automatic server restart, and 'cors' for cross-origin requests.

What information is required to create a Razorpay order?

To create an order, you need to provide the amount, currency, receipt ID, and any other required metadata. This is done via a POST API call to Razorpay using the server-side API key and secret.

How is payment verification done in a React + Node.js Razorpay integration?

Payment verification is done server-side by generating an HMAC SHA256 signature using the order ID and payment ID along with the API secret. This generated signature is compared with the signature returned by Razorpay to validate the payment.

What are Razorpay webhooks and how are they useful?

Webhooks are HTTP callbacks triggered by payment events such as payment captured, payment failed, or disputes. They allow your server to automatically receive updates about transactions without manual checks.

How can you include the Razorpay checkout script in a React application?

You can either include the Razorpay checkout script directly in the 'public/index.html' file or load it dynamically in the React component before initializing the Razorpay instance.

What fields are returned by Razorpay after a successful payment using the Handler function?

After a successful payment, Razorpay returns the 'payment_id', 'order_id', and 'razorpay_signature', which are required to validate the payment on the server.

Why is it important to keep the Razorpay API key secret confidential?

Exposing the API secret can allow unauthorized users to create orders or manipulate payments, compromising the security of your application and financial transactions.

What is the purpose of using the 'cors' package in the Node.js server?

The 'cors' package enables cross-origin requests, allowing the React client running on a different port to access the Node.js server APIs without being blocked by browser security policies.

How does the React component handle the Razorpay payment flow?

The React component calls the server API to create an order, receives the order ID, initializes a Razorpay instance with required options, opens the checkout interface, and then calls the server API to validate the payment upon completion.