# **RAZORPAY** INTEGRATION WITH SPRING BOOT & REACT.JS


## Payment Flow


## WorkFlow


## General outline of implementation:

1. **User Registration and Authentication:**
- Implement user registration and authentication functionality to allow users to create accounts and log in securely.

2. **Credit Purchase:**
- Create a feature that allows users to purchase credits. Users should be able to choose the amount of credits they want to buy and make a payment using a payment gateway (e.g. **Razorpay**).

3. **Credit Management:**
- Store user credit balances in a database associated with each user's account. You can use a relational database like MySQL or a NoSQL database like MongoDB.
- Deduct credits from a user's balance when they perform actions that require credits. This might include actions like sending messages, accessing premium content, or using premium features.

4. **Displaying Credit Balance:**
- Create a user dashboard where users can view their current credit balance. This information should be retrieved from the database and displayed to the user.

5. **Transaction History:**
- Implement a transaction history feature that allows users to see a record of their credit transactions, including purchases and credit deductions.

6. **Security:**
- Ensure that your application has robust security measures in place to protect user accounts, transactions, and credit balances. Use encryption, secure authentication, and follow best practices for web application security.

7. **Payment Gateway Integration:**
- Integrate a payment gateway API (e.g. **Razorpay**) to handle credit purchases securely. This will involve setting up API endpoints to process payments and update user balances accordingly.

8. **Notifications:**
- Send email or in-app notifications to users when they make credit purchases or when their credit balance changes due to actions within the application.

## Account Setup


## Get Id & Secret


## Spring boot

**Java Sdk Integration:**

> https://razorpay.com/docs/payments/server-integration/java/payment-gateway/build-integration/

**Dependency:**

`implementation 'com.razorpay:razorpay-java:version"`

**Order Creation:**

try {
  JSONObject orderRequest = new JSONObject();
  orderRequest.put("amount", 50000); // amount in the smallest currency unit
  orderRequest.put("currency", "INR");
  orderRequest.put("receipt", "order_rcptid_11");

  Order order = razorpay.Orders.create(orderRequest);
} catch (RazorpayException e) {
  // Handle Exception
  System.out.println(e.getMessage());
}

**Verify payment signature:**

RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");

String secret = "EnLs21M47BllR3X8PSFtjtbd";

JSONObject options = new JSONObject();
options.put("razorpay_order_id", "order_IEIaMR65cu6nz3");
options.put("razorpay_payment_id", "pay_IH4NVgf4Dreq1l");
options.put("razorpay_signature", "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f");

boolean status =  Utils.verifyPaymentSignature(options, secret);


## React(PAY BUTTON)

**React Integration:**

> https://razorpay.com/docs/payments/server-integration/java/payment-gateway/build-integration/

**Handler Function:**

<button id="rzp-button1">Pay with Razorpay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "order_IluGWxBm9U8zJ8", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "handler": function (response){
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature)
    },
    "prefill": {
        "name": "Gaurav Kumar",
        "email": "[e-mail]",
        "contact": "9000090000"
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};
var rzp1 = new Razorpay(options);
rzp1.on('payment.failed', function (response){
        alert(response.error.code);
        alert(response.error.description);
        alert(response.error.source);
        alert(response.error.step);
        alert(response.error.reason);
        alert(response.error.metadata.order_id);
        alert(response.error.metadata.payment_id);
});
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>

**Callback Function:**

<button id="rzp-button1">Pay with Razorpay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "order_IluGWxBm9U8zJ8", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
    "prefill": {
        "name": "Gaurav Kumar",
        "email": "[e-mail]",
        "contact": "9000090000"
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>

**Callback Response:**


**Success:**

"handler": function (response){
    alert(response.razorpay_payment_id);
    alert(response.razorpay_order_id);
    alert(response.razorpay_signature)}

**Failure:**

rzp1.on('payment.failed', function (response){
    alert(response.error.code);
    alert(response.error.description);
    alert(response.error.source);
    alert(response.error.step);
    alert(response.error.reason);
    alert(response.error.metadata.order_id);
    alert(response.error.metadata.payment_id);
}

**Refrence link:**
1. https://www.youtube.com/watch?v=OfLb6ilVNz0
2. https://youtu.be/PS06fCIqRKI
3. https://razorpay.com/docs/x/dashboard/api-keys/
4. https://razorpay.com/docs/payments/server-integration/java/payment-gateway/
5. https://github.com/razorpay/razorpay-java-testapp
6. https://razorpay.com/docs/api/payments/#fetch-multiple-payments