Razorpay Payment Gateway Integration in ReactJS: A Step-by-Step Guide

Integrating Razorpay into your ReactJS application can streamline your payment process and enhance the user experience. This guide will walk you through the steps to integrate Razorpay into your ReactJS application.

Step 1: Create a Razorpay Account

1. Sign Up: Visit the Razorpay website and sign up for an account. You will need to provide basic information about your business.

2. Activate Your Account: Complete the KYC (Know Your Customer) process to activate your account. This involves submitting your business details and bank account information.

Step 2: Set Up Your Dashboard

1. Access Dashboard: Once your account is activated, log in to the Razorpay dashboard.

2. Configure Settings: Navigate to the settings section to configure your payment options, such as accepted payment methods and currency.

Step 3: Install Razorpay SDK

Razorpay provides SDKs for various platforms, including web. For ReactJS, you can use the Razorpay Checkout.js library.

Install Razorpay Library

1. Install Razorpay: Use npm or yarn to install the Razorpay library in your ReactJS project.

   npm install razorpay

   or

   yarn add razorpay

Step 4: Integrate Razorpay in Your React Component

1. Create a Payment Component: Create a new component, e.g., Payment.js, to handle the payment process.

   import React from 'react';
   import Razorpay from 'razorpay';
   
   const Payment = () => {
       const loadRazorpay = () => {
           const script = document.createElement('script');
           script.src = 'https://checkout.razorpay.com/v1/checkout.js';
           script.async = true;
           document.body.appendChild(script);
       };
   
       const displayRazorpay = () => {
           const options = {
               key: 'YOUR_KEY_ID', // Replace with your key_id
               amount: 'AMOUNT_IN_PAISE', // Amount in paise (e.g., 50000 for ₹500)
               currency: 'INR',
               name: 'YOUR_BUSINESS_NAME',
               description: 'Purchase Description',
               image: 'https://your-logo-url.com/logo.png',
               handler: function (response) {
                   alert(response.razorpay_payment_id);
                   // Handle the payment success response
               },
               prefill: {
                   name: 'Customer Name',
                   email: 'customer@example.com',
                   contact: '9999999999'
               },
               notes: {
                   address: 'Customer Address'
               },
               theme: {
                   color: '#F37254'
               }
           };
   
           const rzp = new window.Razorpay(options);
           rzp.open();
       };
   
       React.useEffect(() => {
           loadRazorpay();
       }, []);
   
       return (
           <div>
               <button onClick={displayRazorpay}>Pay Now</button>
           </div>
       );
   };
   
   export default Payment;

2. Use the Payment Component: Import and use the Payment component in your application.

   import React from 'react';
   import Payment from './Payment';
   
   const App = () => {
       return (
           <div>
               <h1>Razorpay Integration</h1>
               <Payment />
           </div>
       );
   };
   
   export default App;

Step 5: Handle Payment Responses

1. Success Handler: In the handler function, process the payment success response. You can verify the payment on your server using Razorpay's API.

2. Error Handling: Implement error handling to manage failed payments or other issues.

Step 6: Verify Payments (Optional but Recommended)

1. Server-Side Verification: Use Razorpay's server-side API to verify payments. This ensures that the payment is legitimate and reduces the risk of fraud.

   const verifyPayment = async (paymentDetails) => {
       const response = await fetch('/api/verify-payment', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify(paymentDetails),
       });
       const data = await response.json();
       if (data.success) {
           // Payment is verified
       } else {
           // Payment verification failed
       }
   };

Step 7: Test Your Integration

1. Test Mode: Use Razorpay's test mode to simulate payments and ensure your integration works correctly.

2. Go Live: Once testing is complete, switch to live mode to start accepting real payments.

Test Card for Indian Payments

Refer for more test card details: Test Card Details

Conclusion

Integrating Razorpay into your ReactJS application can significantly enhance your payment processing capabilities. By following these steps, you can set up Razorpay and start accepting payments seamlessly. If you encounter any issues, Razorpay's documentation and support team are excellent resources for troubleshooting.