React + Vite Razorpay Integration

This is a simple React project created with Vite to test Razorpay integration. The goal is to capture the paymentId and signature after a successful transaction.

🚀 Getting Started

Prerequisites

Node.js (latest LTS recommended)
npm or yarn
Razorpay account and API keys

Installation

Clone the repository:

git clone https://github.com/swarajkumarsingh/razorpay-react-demo.git
cd razorpay-react-demo

Install dependencies:
```
npm install
```
Create a .env file in the root directory and add your Razorpay API key:
```
VITE_RAZORPAY_KEY=your_razorpay_key
```

Running the Project

npm run dev

🔗 Razorpay Integration

Initialize Razorpay in your React component.
Capture the paymentId and signature in the onSuccess callback.
Send the details to your backend for verification.

Example code snippet:

import { useEffect } from 'react';

const RazorpayButton = () => {
  const handlePayment = () => {
    const options = {
      key: import.meta.env.VITE_RAZORPAY_KEY,
      amount: 50000, // Amount in paise (500 INR)
      currency: "INR",
      name: "Test Store",
      description: "Test Transaction",
      handler: function (response) {
        console.log("Payment ID:", response.razorpay_payment_id);
        console.log("Signature:", response.razorpay_signature);
      },
      prefill: {
        name: "Test User",
        email: "test@example.com",
        contact: "9999999999",
      },
      theme: {
        color: "#3399cc",
      },
    };

    const rzp = new window.Razorpay(options);
    rzp.open();
  };

  return <button onClick={handlePayment}>Pay Now</button>;
};

export default RazorpayButton;

📜 License

This project is licensed under the MIT License.

Feel free to update the repository link, API key details, and other project-specific configurations!