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.

<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.

<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.

Key and Key_secret: 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.
amount: 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.
handler: 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

Once registered, from your dashboard navigate to settings->API Keys where you will see your API Keys.

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

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

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

Twitter

GitHub

RazorPay Integration

Table of contents

Introduction

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

Step 2 - Call the Razorpay Component

Step 3 - Code Snippet for Razorpay Component

Step 4 - Razorpay API Keys

Conclusion

References

Subscribe to my newsletter

Wadad Parker

Wadad Parker

RazorPay Integration

Table of contents

Introduction

Step 1 - Add Razorpay Script in index.html

Step 2 - Call the Razorpay Component

Step 3 - Code Snippet for Razorpay Component

Step 4 - Razorpay API Keys

Conclusion

References

Subscribe to my newsletter

Wadad Parker

Wadad Parker

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