Menu
I want to integrate payment gateway (razorpay) for my react-js application. Do anyone know how to integrate it?
This is the code, where I am getting the error.
let rzp = new Razorpay(options);
rzp.open();
Error is:
TypeError: rzp.open is not a function
687
asked Dec 14 '25 08:12
In my case the above code worked with a small modification.
instead of let rzp = new Razorpay(options); put let rzp = new window.Razorpay(options);
the rest is all good don't forget to register and get a valid API key.
include the scripts in the index.html as suggested in the below link
https://codepen.io/ankitstarski/pen/QgLXML.
Example below
<!DOCTYPE html>
<html>
<head>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FNETPOC</title>
</head>
<body>
<div id="root"></div>
<div id="modal"></div>
<div id="datetimemodal"></div>
<div id="slideshowmodal"></div>
<div id="playbuttonmodal"></div>
</body>
</html>
Component code below
class Checkout extends React.Component {
state = {
amount: 100
};
constructor() {
super()
this.changeAmount = this.changeAmount.bind(this);
this.openCheckout = this.openCheckout.bind(this);
}
changeAmount(e) {
this.setState({amount: e.target.value})
}
openCheckout() {
let options = {
"key": "YOUR_KEY_ID",
"amount": this.state.amount, // 2000 paise = INR 20, amount in paisa
"name": "Merchant Name",
"description": "Purchase Description",
"image": "/your_logo.png",
"handler": function (response){
alert(response.razorpay_payment_id);
},
"prefill": {
"name": "Harshil Mathur",
"email": "[email protected]"
},
"notes": {
"address": "Hello World"
},
"theme": {
"color": "#F37254"
}
};
let rzp = new window.Razorpay(options);
rzp.open();
}
render () {
return (
<div>
<input type='text' onChange={
this.changeAmount
} />
<button onClick={this.openCheckout}>Pay Rs. {this.state.amount/100}</button>
</div>
)
}
}
You can place the script tag provided by Razorpay in the head section of index.html, but I would suggest loading it dynamically when component mounts. Refer the complete code below.
import React, { useEffect } from 'react';
const PayByRazorPay = () => {
const options = {
key: 'YOUR_KEY',
amount: '100', // = INR 1
name: 'Acme shop',
description: 'some description',
image: 'https://cdn.razorpay.com/logos/7K3b6d18wHwKzL_medium.png',
handler: function(response) {
alert(response.razorpay_payment_id);
},
prefill: {
name: 'Gaurav',
contact: '9999999999',
email: '[email protected]'
},
notes: {
address: 'some address'
},
theme: {
color: 'blue',
hide_topbar: false
}
};
const openPayModal = () => {
var rzp1 = new window.Razorpay(options);
rzp1.open();
};
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://checkout.razorpay.com/v1/checkout.js';
script.async = true;
document.body.appendChild(script);
}, []);
return (
<>
<button onClick={openPayModal}>Pay with Razorpay</button>
</>
);
};
export default PayByRazorPay;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
