# RazorPay Integration

## Introduction

Welcome to this short blog which will explain to you how to integrate the Razorpay API into your web application in 5 simple steps.

### Step 1 - Add Razorpay Script in `index.html`

Insert the following script inside your `index.html` file (in the `<head>`, for importing the Razorpay functionality inside your web application.

```javascript
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
```

### Step 2 - Call the Razorpay Component

Create an **onClickHandler** on your **checkout page,** which will display your Razorpay **Component** when the user clicks on the checkout button.

```javascript
<button onClick={checkoutHandler}>Checkout</button>
```

Note: You need to include relevant checks in the handler before calling the component, i.e. checking if the user has selected an address, entered all fields etc.

### Step 3 - Code Snippet for Razorpay Component

Paste the below code snippet to call the Razorpay API. This will display the Razorpay popup on your window. You can call this in the checkoutHandler itself or create a separate code for code modularity.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686072048689/fbb811c6-7329-416b-9cf2-12df2fff93d1.png align="center")

* **<mark>Key</mark>** and **<mark>Key_secret:</mark>** These are the API keys that you will get from your Razorpay account. I will explain how to generate these keys in your Razorpay account in the next step.
    
* **<mark>amount</mark>**: Your total price of items from your cart will be given here. Please note that the amount is calculated in terms of **paise** so remember to multiply by 100 when giving value into the amount field.
    
* **<mark>handler:</mark>** This is the callback function that will be executed **after** the user has made the payment. I have given a **react-toast** **notification** here to make the user aware that payment was successful and then **navigate** the user to the **order details page.** It's up to you what you want to do after the payment is done in your web application. The Razorpay gateway will close automatically after the payment is completed.
    

### Step 4 - Razorpay API Keys

You need to register on the Razorpay website and create your account.

[Signup here](https://razorpay.com/)

Once registered, from your **dashboard** navigate to **settings**\-&gt;**API Keys** where you will see your API Keys.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686072992941/fad190c1-2d0f-4989-8352-3c5156057dd6.png align="center")

Generate new keys and you will see your **<mark>key_id </mark>** and **<mark>key_secret </mark>** which you need to copy and paste into the code snippet given in **step 4**.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686073120510/bfe692bf-6263-4e9d-904c-385d7cfad27b.png align="center")

Note: Don't copy this one, it won't work 0\_0

## Conclusion

Congratulations, you have successfully learned to integrate Razorpay Payment in your web application ^\_^ Please keep in mind that payment integration will be in **test mode**, to have an actual integration in **live mode,** you need to register with Razorpay as a business which can take 1-2 weeks to be verified.

### References

[YouTube Tutorial](https://www.youtube.com/watch?v=7cVME9o7B3I)

Thank you for reading my blog, let's connect to explore and learn web development together ^\_^

[Twitter](https://twitter.com/wadadparker)

[GitHub](https://github.com/WadadParker)