We can save the response in state and show in ui. as razorpay has these details in the dashboard, no need to save in db. (depends on your requirement) - setstate and show in ui.. add a modal key in options. code : modal: { ondismiss: function () { // Handle payment failure or cancellation console.log("Payment was not completed"); setPaymentError("Payment was not completed. Please try again."); }, }, retry: { enabled: false, max_count: 1, // Allow one retry attempt },
20:00 Hi bro, After payment I am getting response. but in the response I am getting only razorpay_payment_id, I am not getting remaining two keys(signature etc.). And in the razorpay portal it is showing authorized status. Please help me bro. 😥
@@yashkhanvilkar80 if the order I'd is invalid then we get that issue. I have passed correct order I'd the I received correct response. Please check order id
hi bro, great tutorial. by the way how did you generate the signature? did you setup a webhook for it? I am not recieving the payment id, order id, signature from the request body. thanks
If the QR code and UPI transaction are not visible, there could be a few reasons: SVG Error: As you mentioned, the console shows an SVG error. This might be related to how the QR code is being rendered or displayed. CSS Styling: Check if there are any CSS styles affecting the visibility of the QR code or UPI transaction section. Ensure that the relevant elements are not hidden or overlapped by other components. Network Issues: Verify that the necessary resources (such as SVG files for QR codes) are being loaded correctly. Check the network tab in your browser’s developer tools for any failed requests. JavaScript Errors: Look for any JavaScript errors in the console that might prevent the QR code from rendering. Remember to inspect the console for errors, and verify that all necessary components (including SVGs) are correctly loaded.
and I try to do mobile ract-native android integration , it doesn't work either, there is no sync between razorpay documentation and their youtube video
i'm getting error when using postman to create an order { "error": { "code": "BAD_REQUEST_ERROR", "description": "The amount must be atleast INR 1.00", "source": "business", "step": "payment_initiation", "reason": "input_validation_failed", "metadata": {}, "field": "amount" } }
The amount we enter in the request body is in paise. And, you need to enter the min amount as "100". Please enter an amount >=100 for it to work. Like: { "amount": 100, "currency": "INR", "receipt": "id1" }
can you tell me what's the minimum amount we can take from razorpay i want to charge 50 rs for a product but it is giving me the error : Order amount less than minimum amount allowed
To host your React and Node.js app on Firebase, you can follow these steps: 1. Firebase Setup: Install Firebase CLI. Initialize Firebase in your project directory. Choose Hosting as the Firebase service to set up. 2. Build React App: Build your React app using npm run build. 3. Setup Firebase Hosting: Deploy your React app to Firebase Hosting using firebase deploy. 4. Serverless Functions: Convert your Node.js backend into Firebase Cloud Functions. Deploy your Cloud Functions along with your Firebase Hosting setup. 5. Continuous Deployment: Set up continuous deployment using Firebase Hosting triggers. Whenever you push changes to your repository, Firebase will automatically deploy your updates. Remember to update your Firebase configuration and URLs accordingly in your React app and Node.js backend to reflect the new hosting environment. Follow this doc for more details: firebase.google.com/docs/hosting
Hello sir can I use Razorpay test mode for Production. Because I was using test mode for development purpose it was working pretty fine but when I deploy my API its showing me error. So test mode is only for development purpose only ???
The test mode is only for testing and development purpose. You need to use Live mode for the production. Also the API key for live mode is different. Check this for more details: razorpay.com/docs/payments/dashboard/test-live-modes/
@@@WebDevMatrix i am also trying to integrate the Razor pay for my dummy app and i should not lose clients money for this so, i want to use it in test mode only after deployment also .how to do it?
Sure, I'd be happy to explain how to use a callback function in the context of Razorpay integration. In JavaScript, a callback function is a function that is passed as an argument to another function. Callbacks are often used in asynchronous programming to handle the completion of tasks like API calls. Here's a basic example of how you might use a callback function: ```javascript const Razorpay = require('razorpay'); let instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_KEY_SECRET' }); let options = { amount: 5000, // amount in smallest currency unit currency: "INR", receipt: "order_rcptid_11" }; instance.orders.create(options, function(err, order) { if (err) { console.log(err); } else { console.log(order); } }); ``` In this example, `instance.orders.create` is a function that creates a new order in Razorpay. It takes two arguments: an `options` object that contains details about the order, and a callback function. The callback function is executed when the `create` function has completed. It takes two arguments: `err` and `order`. If there was an error creating the order, `err` will contain details about the error. Otherwise, `order` will contain details about the newly created order. I hope this helps! Let me know if you have any other questions. 😊
Thank you so much, everything works but for some reason i am not able to see UPI options, only netbanking and cards options are available, any suggestions ?
Great! If the netbanking and cards options are visible, then it isn't a setup issue. A couple of the other developers are facing a similar issue with new setup where UPI is missing. However, with my setup as used in the video, UPI is visible. Not sure, if razorpay has changed anything recently with new onboarding. Please raise a support ticket on razorpay.com/support/#request to check the same with the razorpay team.
Also iam facing this issue too. Iam not completely sure about this but it might be that iam not providing the kyc details because iam using it for my college project and also i dose'nt own any business or something😅. Some of the configuration settings are disabled for people who are not providing the kyc details.(Just a guess)
@@theycallmejatin Please comment the full error message to help debug. There can be multiple reasons: 1. CORS error 2. API key is missing in the request 3. API key is not read correctly on the server 4. Network issue
@@WebDevMatrix axios error likha aata 500 status code. Jab payment successful hota na wahi razorpay window pe redirect in 5 second aata niche likha wo 5 second pura hone k baad error dikhata. Me nextjs me kr raha waha error dikhata
There are multiple ways to get the payment info on server and store it in db. 1) Using the payments API ( razorpay.com/docs/api/payments/fetch-all-payments/ ) 2) Using the webhook events (razorpay.com/docs/webhooks/) 3) Storing the info during payment validation.
@@WebDevMatrix I have find out my error but a bit confused how to debug it , actually i have saved the api id and key in .env file and when im trying to acess it using process.env.key_id then im getting error but when i directly used the key and secret id then data is fetched suceesfully
@@SUNNYVLOGS812 You need to add: require("dotenv").config(); for process.env.key_id to work correctly. Also ensure that you use the same name key_id in .env file.
@@xahilxubba8742 Currently Razorpay APIs are having some intermittent technical issues with the UPI payments. Hence, its not coming at times in test mode.
I have followed your video couple of time but still when I submit payment, its only giving me back razorpay_payment_id , not razoepay_order_id or razorpay_signature, so its failing, I am on Testmode, other thing is when I tested with only index.html with handler function its working as expeted, the problem is happening when I do it through react getting into that issue, I try to load script through index,html and dynamic load but failing its anyway appreciate your immediate reply, spent a day but not resolved
If this issue still persists: 1. Make sure that you’re correctly creating a new Razorpay instance and opening it with your options object. 2. If you're dynamically loading the Razorpay script in your React component, make sure it's loaded before your component mounts. You can use the `useEffect` hook for this. Regarding the discrepancy between the Razorpay documentation and their TH-cam video, it’s possible that the video is outdated or the documentation has been updated since the video was made. I recommend always referring to the official documentation for the most accurate and up-to-date information. If you find any inconsistencies, you can report them to Razorpay’s support team. They should be able to clarify any confusion.
Great tutorial with clean presentation ❤
Thanks so much!
Should we save the webhook event data in our database?
What if we are only storing the order_id which we passed in the first step?
We can save the response in state and show in ui. as razorpay has these details in the dashboard, no need to save in db. (depends on your requirement) - setstate and show in ui.. add a modal key in options. code : modal: {
ondismiss: function () {
// Handle payment failure or cancellation
console.log("Payment was not completed");
setPaymentError("Payment was not completed. Please try again.");
},
},
retry: {
enabled: false,
max_count: 1, // Allow one retry attempt
},
keep doing 🔥🔥
20:00
Hi bro, After payment I am getting response. but in the response I am getting only razorpay_payment_id, I am not getting remaining two keys(signature etc.).
And in the razorpay portal it is showing authorized status.
Please help me bro. 😥
even I am having the same issue. any solution found for this?
@@yashkhanvilkar80 if the order I'd is invalid then we get that issue. I have passed correct order I'd the I received correct response. Please check order id
select " Handler Functions (JS) Checkout Code " , there are 2 options for parameter in razorpay docs.
I did exactly same but it is not showing upi option, other option are visible.
Can you tell me where I get it wrong?
i am facing the same issue if you were able to fix this please help me too..
Please let me know if you found any solution to this problem do i have to verify KYC for it to work
@@kunaldhuria3935 as far as i know maybe completing KYB is the only way it is not going to work for test
Such a Great Tutorial
Will this method work for react native also?
Wow this video needs more views vould u please share more info reg webhooks
hi bro, great tutorial. by the way how did you generate the signature? did you setup a webhook for it? I am not recieving the payment id, order id, signature from the request body.
thanks
thanks for this tutorial Bro
QR code and UPI transaction is not visible after clicking button but other payments are available. Console in frontend shows svg error probably the QR
If the QR code and UPI transaction are not visible, there could be a few reasons:
SVG Error: As you mentioned, the console shows an SVG error. This might be related to how the QR code is being rendered or displayed.
CSS Styling: Check if there are any CSS styles affecting the visibility of the QR code or UPI transaction section. Ensure that the relevant elements are not hidden or overlapped by other components.
Network Issues: Verify that the necessary resources (such as SVG files for QR codes) are being loaded correctly. Check the network tab in your browser’s developer tools for any failed requests.
JavaScript Errors: Look for any JavaScript errors in the console that might prevent the QR code from rendering.
Remember to inspect the console for errors, and verify that all necessary components (including SVGs) are correctly loaded.
hi did u find the solution?
and I try to do mobile ract-native android integration , it doesn't work either, there is no sync between razorpay documentation and their youtube video
Clean and simple! Loved it. Wanted to use this in one of my projects. 🙌 Thanks! Keep up the good work!
i'm getting error when using postman to create an order
{
"error": {
"code": "BAD_REQUEST_ERROR",
"description": "The amount must be atleast INR 1.00",
"source": "business",
"step": "payment_initiation",
"reason": "input_validation_failed",
"metadata": {},
"field": "amount"
}
}
The amount we enter in the request body is in paise. And, you need to enter the min amount as "100".
Please enter an amount >=100 for it to work.
Like:
{
"amount": 100,
"currency": "INR",
"receipt": "id1"
}
can you tell me what's the minimum amount we can take from razorpay i want to charge 50 rs for a product but it is giving me the error : Order amount less than minimum amount allowed
put 5000 (amount you need to add * 100 )if you want 50rs to be sent
i.e 50.00
hello, postman shows me bad syntax error for "{
"amount": 500,
"currency" : "INR",
"receipt" : "qwsaq1"
}
It could to be due to invalid json. If this is the exact request body, then you need to remove the double quote at the beginning.
really good tutorial keep it on bro
Bro ""key' that you provided in reactjs will vary for each payment .
The API key will be the same. The orderId will change for each payment.
how to host this on firebase and run server backend automatically
To host your React and Node.js app on Firebase, you can follow these steps:
1. Firebase Setup:
Install Firebase CLI.
Initialize Firebase in your project directory.
Choose Hosting as the Firebase service to set up.
2. Build React App:
Build your React app using npm run build.
3. Setup Firebase Hosting:
Deploy your React app to Firebase Hosting using firebase deploy.
4. Serverless Functions:
Convert your Node.js backend into Firebase Cloud Functions.
Deploy your Cloud Functions along with your Firebase Hosting setup.
5. Continuous Deployment:
Set up continuous deployment using Firebase Hosting triggers.
Whenever you push changes to your repository, Firebase will automatically deploy your updates.
Remember to update your Firebase configuration and URLs accordingly in your React app and Node.js backend to reflect the new hosting environment.
Follow this doc for more details: firebase.google.com/docs/hosting
Are there specific solutions or steps that can be implemented to enable recurring payments through Razorpay on Wix platform?
Hello sir can I use Razorpay test mode for Production.
Because I was using test mode for development purpose it was working pretty fine but when I deploy my API its showing me error. So test mode is only for development purpose only ???
The test mode is only for testing and development purpose. You need to use Live mode for the production. Also the API key for live mode is different.
Check this for more details: razorpay.com/docs/payments/dashboard/test-live-modes/
@@@WebDevMatrix i am also trying to integrate the Razor pay for my dummy app and i should not lose clients money for this so, i want to use it in test mode only after deployment also .how to do it?
a good explaination bro ...once explain using call back function bro
Sure, I'd be happy to explain how to use a callback function in the context of Razorpay integration.
In JavaScript, a callback function is a function that is passed as an argument to another function. Callbacks are often used in asynchronous programming to handle the completion of tasks like API calls.
Here's a basic example of how you might use a callback function:
```javascript
const Razorpay = require('razorpay');
let instance = new Razorpay({
key_id: 'YOUR_KEY_ID',
key_secret: 'YOUR_KEY_SECRET'
});
let options = {
amount: 5000, // amount in smallest currency unit
currency: "INR",
receipt: "order_rcptid_11"
};
instance.orders.create(options, function(err, order) {
if (err) {
console.log(err);
} else {
console.log(order);
}
});
```
In this example, `instance.orders.create` is a function that creates a new order in Razorpay. It takes two arguments: an `options` object that contains details about the order, and a callback function. The callback function is executed when the `create` function has completed. It takes two arguments: `err` and `order`. If there was an error creating the order, `err` will contain details about the error. Otherwise, `order` will contain details about the newly created order.
I hope this helps! Let me know if you have any other questions. 😊
what is the receiptId send in body with currency?? how and on what bases is it generated?
Proper explanation 💯💯, thanks for this tutorial buddy👍👍
Great tutorial all over the youtube for Razorpay☺😀😀😀
Thank you so much, everything works but for some reason i am not able to see UPI options, only netbanking and cards options are available, any suggestions ?
Great!
If the netbanking and cards options are visible, then it isn't a setup issue. A couple of the other developers are facing a similar issue with new setup where UPI is missing. However, with my setup as used in the video, UPI is visible.
Not sure, if razorpay has changed anything recently with new onboarding.
Please raise a support ticket on razorpay.com/support/#request
to check the same with the razorpay team.
@@WebDevMatrix yes i also face this issue , still now the upi option is not visible
Also iam facing this issue too. Iam not completely sure about this but it might be that iam not providing the kyc details because iam using it for my college project and also i dose'nt own any business or something😅. Some of the configuration settings are disabled for people who are not providing the kyc details.(Just a guess)
Can i know what is the reciept id that the client is sending in 17:04 and why?
thanks for the tutorial !! loved it
How to stop kyc
Process
yes, its great video but I need your help
Thank you so much.
OTP isn't coming
I am getting error like no route matched with those values in postman
Can you share the url? Seems something wrong in it.
Great tutorial
getting an error in the client side in chrome
What is the error you are getting? Please add it in the comment so that we can assist you.
Same bhai axios error aa rha@@WebDevMatrix
@@theycallmejatin Please comment the full error message to help debug.
There can be multiple reasons:
1. CORS error
2. API key is missing in the request
3. API key is not read correctly on the server
4. Network issue
@@WebDevMatrix axios error likha aata 500 status code. Jab payment successful hota na wahi razorpay window pe redirect in 5 second aata niche likha wo 5 second pura hone k baad error dikhata. Me nextjs me kr raha waha error dikhata
Ho gya bhai sahi @@WebDevMatrix
Great
Is there any way to show the payment history from the dashboard to a database like mysql or monogodb?If yes how to do that??
There are multiple ways to get the payment info on server and store it in db.
1) Using the payments API ( razorpay.com/docs/api/payments/fetch-all-payments/ )
2) Using the webhook events (razorpay.com/docs/webhooks/)
3) Storing the info during payment validation.
How to get secret of razorpay api key
@@zpower9567 When you create the api key (as shown in the video), then it generates both the key_id and key_secret (api key secret).
@@WebDevMatrix doing postman setup is mandatory or we can skip it ?
@@zpower9567 It was just to test the rest APIs. You can skip it if you use any other method to test it.
Im getting error during test the api in postman
What is the error that you are getting, can you please add it in the comment? I will be glad to assist you.
@@WebDevMatrix I have find out my error but a bit confused how to debug it , actually i have saved the api id and key in .env file and when im trying to acess it using process.env.key_id then im getting error but when i directly used the key and secret id then data is fetched suceesfully
@@SUNNYVLOGS812 You need to add:
require("dotenv").config();
for process.env.key_id to work correctly. Also ensure that you use the same name key_id in .env file.
@@WebDevMatrix okay can i get your linkdln , wanna ask you something else regarding to fetching ..
@@SUNNYVLOGS812 Yes ofcourse. You can reach out on www.linkedin.com/in/rahul-sr
why upi option is not coming?
@satyaprakashjena4174 Are you integrating it with ReactJs or in mobile app. Have you followed the same steps as mentioned in the video?
react js and i am following the steps@@WebDevMatrix
@@WebDevMatrix yes i did the same but there is no upi option
@@xahilxubba8742 Currently Razorpay APIs are having some intermittent technical issues with the UPI payments. Hence, its not coming at times in test mode.
If you are facing the issue in Live mode, then please raise a support ticket on razorpay.com/support/#request
I have followed your video couple of time but still when I submit payment, its only giving me back razorpay_payment_id , not razoepay_order_id or razorpay_signature, so its failing, I am on Testmode, other thing is when I tested with only index.html with handler function its working as expeted, the problem is happening when I do it through react getting into that issue, I try to load script through index,html and dynamic load but failing its anyway
appreciate your immediate reply, spent a day but not resolved
Thanks for the detailed explanation of the issue. Is it possible to share the repo/code link to replicate the issue?
If this issue still persists:
1. Make sure that you’re correctly creating a new Razorpay instance and opening it with your options object.
2. If you're dynamically loading the Razorpay script in your React component, make sure it's loaded before your component mounts. You can use the `useEffect` hook for this.
Regarding the discrepancy between the Razorpay documentation and their TH-cam video, it’s possible that the video is outdated or the documentation has been updated since the video was made. I recommend always referring to the official documentation for the most accurate and up-to-date information. If you find any inconsistencies, you can report them to Razorpay’s support team. They should be able to clarify any confusion.
thankyouuu bhai ❤