How to Integrate Razorpay | Payment Gateway Integration | React and Node.js for web 💵

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ธ.ค. 2024

ความคิดเห็น • 103

  • @ejazulhaq3168
    @ejazulhaq3168 11 หลายเดือนก่อน +6

    Great tutorial with clean presentation ❤

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน

      Thanks so much!

  • @srikanthracharla420
    @srikanthracharla420 8 หลายเดือนก่อน +4

    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
      @yashkhanvilkar80 7 หลายเดือนก่อน +1

      even I am having the same issue. any solution found for this?

    • @srikanthracharla420
      @srikanthracharla420 7 หลายเดือนก่อน +1

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

    • @thashreef2125
      @thashreef2125 5 หลายเดือนก่อน

      select " Handler Functions (JS) Checkout Code " , there are 2 options for parameter in razorpay docs.

  • @piyushramnani1014
    @piyushramnani1014 10 หลายเดือนก่อน +1

    Clean and simple! Loved it. Wanted to use this in one of my projects. 🙌 Thanks! Keep up the good work!

  • @BhupendraYadav-c1x
    @BhupendraYadav-c1x หลายเดือนก่อน

    Nice lecture
    There is no such video on youtube like this

  • @vaibhavthalanki7320
    @vaibhavthalanki7320 9 หลายเดือนก่อน +3

    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

    • @WebDevMatrix
      @WebDevMatrix  9 หลายเดือนก่อน

      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.

    • @shashankgurukar9203
      @shashankgurukar9203 9 หลายเดือนก่อน

      hi did u find the solution?

  • @gellisrikar
    @gellisrikar 7 หลายเดือนก่อน +1

    Are there specific solutions or steps that can be implemented to enable recurring payments through Razorpay on Wix platform?

  • @kamal_pratap
    @kamal_pratap 4 หลายเดือนก่อน +3

    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?

    • @soultouchingsongs
      @soultouchingsongs 4 หลายเดือนก่อน

      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
      },

    • @kamal_pratap
      @kamal_pratap หลายเดือนก่อน

      @@soultouchingsongs but what if we have a transaction history page which shows details about a transaction

  • @rajapinja9297
    @rajapinja9297 10 หลายเดือนก่อน +1

    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

  • @shaheensiddiqui1952
    @shaheensiddiqui1952 7 หลายเดือนก่อน

    Great tutorial all over the youtube for Razorpay☺😀😀😀

  • @aditikawade2809
    @aditikawade2809 9 หลายเดือนก่อน +2

    I did exactly same but it is not showing upi option, other option are visible.
    Can you tell me where I get it wrong?

    • @KundanYadav-k7o
      @KundanYadav-k7o 9 หลายเดือนก่อน +1

      i am facing the same issue if you were able to fix this please help me too..

    • @kunaldhuria3935
      @kunaldhuria3935 8 หลายเดือนก่อน

      Please let me know if you found any solution to this problem do i have to verify KYC for it to work

    • @KundanYadav-k7o
      @KundanYadav-k7o 8 หลายเดือนก่อน +1

      @@kunaldhuria3935 as far as i know maybe completing KYB is the only way it is not going to work for test

  • @tanmays4209
    @tanmays4209 9 หลายเดือนก่อน

    Can i know what is the reciept id that the client is sending in 17:04 and why?

  • @iccon7665
    @iccon7665 7 หลายเดือนก่อน +1

    really good tutorial keep it on bro

  • @UECSoumyaRay
    @UECSoumyaRay 2 หลายเดือนก่อน

    It is showing improper KYC. Do we need business PAN for this?

  • @Raishgma
    @Raishgma 8 หลายเดือนก่อน

    Proper explanation 💯💯, thanks for this tutorial buddy👍👍

  • @ganeshgajelly
    @ganeshgajelly 9 หลายเดือนก่อน +1

    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

  • @mdsalehan4595
    @mdsalehan4595 6 หลายเดือนก่อน

    thanks for the tutorial !! loved it

  • @arnavgarg2689
    @arnavgarg2689 7 หลายเดือนก่อน

    what is the receiptId send in body with currency?? how and on what bases is it generated?

  • @bhavnishpatel9903
    @bhavnishpatel9903 2 หลายเดือนก่อน

    Such a Great Tutorial

  • @kunaldhuria3935
    @kunaldhuria3935 11 หลายเดือนก่อน +1

    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 ?

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      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.

    • @BackUp-hs7dj
      @BackUp-hs7dj 10 หลายเดือนก่อน +1

      @@WebDevMatrix yes i also face this issue , still now the upi option is not visible

    • @tanmays4209
      @tanmays4209 8 หลายเดือนก่อน

      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)

  • @kmeenakshi6448
    @kmeenakshi6448 11 หลายเดือนก่อน +1

    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"
    }
    }

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      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"
      }

  • @sivamunakala2135
    @sivamunakala2135 2 หลายเดือนก่อน

    How to write code for different payments

  • @sagardas4218
    @sagardas4218 11 หลายเดือนก่อน +1

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

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      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/

    • @gulzarahamed1152
      @gulzarahamed1152 10 หลายเดือนก่อน

      @@@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?

  • @rahulrithik9462
    @rahulrithik9462 9 หลายเดือนก่อน +1

    Bro ""key' that you provided in reactjs will vary for each payment .

    • @WebDevMatrix
      @WebDevMatrix  9 หลายเดือนก่อน

      The API key will be the same. The orderId will change for each payment.

  • @shaheensiddiqui1952
    @shaheensiddiqui1952 7 หลายเดือนก่อน +1

    thanks for this tutorial Bro

  • @divyanshkapoor2396
    @divyanshkapoor2396 5 หลายเดือนก่อน

    Will this method work for react native also?

  • @prinzadamz
    @prinzadamz 20 วันที่ผ่านมา

    Thanks a lot 🥰🥰

  • @Proghol3546
    @Proghol3546 10 หลายเดือนก่อน +1

    how to host this on firebase and run server backend automatically

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน

      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

  • @PABHINAVYS
    @PABHINAVYS 10 หลายเดือนก่อน +1

    a good explaination bro ...once explain using call back function bro

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน +1

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

  • @sivayadav491
    @sivayadav491 10 หลายเดือนก่อน

    I am getting error like no route matched with those values in postman

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน

      Can you share the url? Seems something wrong in it.

  • @yasinthara4852
    @yasinthara4852 5 หลายเดือนก่อน

    How to stop kyc
    Process

  • @ankitkr7997
    @ankitkr7997 6 หลายเดือนก่อน

    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

    • @divyanshkapoor2396
      @divyanshkapoor2396 5 หลายเดือนก่อน

      put 5000 (amount you need to add * 100 )if you want 50rs to be sent
      i.e 50.00

  • @baburqureshi6842
    @baburqureshi6842 8 หลายเดือนก่อน

    OTP isn't coming

  • @xahilxubba8742
    @xahilxubba8742 11 หลายเดือนก่อน +1

    getting an error in the client side in chrome

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      What is the error you are getting? Please add it in the comment so that we can assist you.

    • @JatinBedi69
      @JatinBedi69 11 หลายเดือนก่อน

      Same bhai axios error aa rha​@@WebDevMatrix

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      ​@@JatinBedi69 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

    • @JatinBedi69
      @JatinBedi69 11 หลายเดือนก่อน

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

    • @JatinBedi69
      @JatinBedi69 11 หลายเดือนก่อน

      Ho gya bhai sahi ​@@WebDevMatrix

  • @Rivu_Chowdhury
    @Rivu_Chowdhury 11 หลายเดือนก่อน

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

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน +1

      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.

    • @zpower9567
      @zpower9567 11 หลายเดือนก่อน +1

      How to get secret of razorpay api key

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน +1

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

    • @zpower9567
      @zpower9567 11 หลายเดือนก่อน

      @@WebDevMatrix doing postman setup is mandatory or we can skip it ?

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      @@zpower9567 It was just to test the rest APIs. You can skip it if you use any other method to test it.

  • @soultouchingsongs
    @soultouchingsongs 4 หลายเดือนก่อน

    Thank you so much.

  • @nitinduke
    @nitinduke 26 วันที่ผ่านมา

    thanks for video

  • @satyaprakashjena4174
    @satyaprakashjena4174 11 หลายเดือนก่อน

    why upi option is not coming?

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      @satyaprakashjena4174 Are you integrating it with ReactJs or in mobile app. Have you followed the same steps as mentioned in the video?

    • @satyaprakashjena4174
      @satyaprakashjena4174 11 หลายเดือนก่อน

      react js and i am following the steps@@WebDevMatrix

    • @xahilxubba8742
      @xahilxubba8742 11 หลายเดือนก่อน +1

      @@WebDevMatrix yes i did the same but there is no upi option

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      ​@@xahilxubba8742 Currently Razorpay APIs are having some intermittent technical issues with the UPI payments. Hence, its not coming at times in test mode.

    • @WebDevMatrix
      @WebDevMatrix  11 หลายเดือนก่อน

      If you are facing the issue in Live mode, then please raise a support ticket on razorpay.com/support/#request

  • @shaheensiddiqui1952
    @shaheensiddiqui1952 7 หลายเดือนก่อน

    Great tutorial

  • @SUNNYVLOGS812
    @SUNNYVLOGS812 ปีที่แล้ว

    Im getting error during test the api in postman

    • @WebDevMatrix
      @WebDevMatrix  ปีที่แล้ว

      What is the error that you are getting, can you please add it in the comment? I will be glad to assist you.

    • @SUNNYVLOGS812
      @SUNNYVLOGS812 ปีที่แล้ว +1

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

    • @WebDevMatrix
      @WebDevMatrix  ปีที่แล้ว +1

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

    • @SUNNYVLOGS812
      @SUNNYVLOGS812 ปีที่แล้ว

      @@WebDevMatrix okay can i get your linkdln , wanna ask you something else regarding to fetching ..

    • @WebDevMatrix
      @WebDevMatrix  ปีที่แล้ว

      @@SUNNYVLOGS812 Yes ofcourse. You can reach out on www.linkedin.com/in/rahul-sr

  • @shinchina
    @shinchina ปีที่แล้ว +1

    keep doing 🔥🔥

  • @rajapinja9297
    @rajapinja9297 10 หลายเดือนก่อน

    yes, its great video but I need your help

  • @koushik2686
    @koushik2686 9 หลายเดือนก่อน

    Great

  • @Music.Air99
    @Music.Air99 9 หลายเดือนก่อน +1

    hello, postman shows me bad syntax error for "{
    "amount": 500,
    "currency" : "INR",
    "receipt" : "qwsaq1"
    }

    • @WebDevMatrix
      @WebDevMatrix  9 หลายเดือนก่อน

      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.

  • @anirudhnomula2942
    @anirudhnomula2942 7 หลายเดือนก่อน +1

    Wow this video needs more views vould u please share more info reg webhooks

  • @rajapinja9297
    @rajapinja9297 10 หลายเดือนก่อน

    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

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน

      Thanks for the detailed explanation of the issue. Is it possible to share the repo/code link to replicate the issue?

    • @WebDevMatrix
      @WebDevMatrix  10 หลายเดือนก่อน

      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.

  • @princekanojia1033
    @princekanojia1033 6 หลายเดือนก่อน

    thankyouuu bhai ❤