When you encounter the error “razorpay is not defined” in your JavaScript code, it means that the variable or object “razorpay” has not been declared or defined before it is being used.
To resolve this issue, you need to make sure that you have properly included Razorpay’s JavaScript library in your HTML file. The library should be loaded before any JavaScript code that uses the “razorpay” variable.
Here’s an example of how you can include Razorpay’s JavaScript library in your HTML file:
<script src="https://checkout.razorpay.com/v1/razorpay.js"></script>
This script tag should be placed in the head or body section of your HTML file, before any JavaScript code that uses “razorpay” variable.
After including the library, you can use the “razorpay” variable and its associated functions according to the documentation provided by Razorpay.
Here’s a simple example of using Razorpay’s API to create a payment button:
<script>
var options = {
key: 'YOUR_RAZORPAY_KEY',
amount: 10000,
name: 'Acme Corp',
description: 'Purchase Description',
image: 'https://example.com/your_logo.png',
handler: function(response) {
alert('Payment ID: ' + response.razorpay_payment_id);
},
prefill: {
name: 'John Doe',
email: 'john.doe@example.com',
contact: '9876543210'
}
};
var rzp = new Razorpay(options);
document.getElementById('payment-button').onclick = function(e){
rzp.open();
e.preventDefault();
}
</script>
<button id="payment-button">Pay Now</button>
In this example, the “razorpay” variable is defined by creating a new instance of the Razorpay object with the given options. When the “Pay Now” button is clicked, the payment dialog will be opened and the “handler” function will be called upon successful payment.