ashwamegh / razorpay-react-demo

Razorpay React.js bindings

Razorpay React Demo

A demo of Razorpay Node Sdk with React.js showcasing the payments and refunds scenarios:

Getting Started

git clone https://github.com/ashwamegh/razorpay-react-demo.git
cd razorpay-react-demo

Prerequisites

Get your Razorpay API keys [key_id and key_secret] for test environment variables from here, https://dashboard.razorpay.com/#/app/keys

Installation

For Frontend

Note: make sure you have added Razorpay script <script src="https://checkout.razorpay.com/v1/checkout.js"></script> in your HTML file to get the Razorpay constructor reference. For Eg: To access it using window.Razorpay or Razorpay

npm install or yarn
touch .env

Copy the contents from sample.env to .env and replace the dumb characters(xxxxx) with your Razorpay key and the Server URL, which you will be creating soon(local default is already there in the file).

npm start or yarn start

For Backend/Server

Note: Server Needed to talk with Razorpay using Node SDK

cd server
npm install or yarn
touch .env

Copy the contents from sample.env to .env and replace the dumb characters(xxxxx) with your Razorpay key and secret

Now run,

npm start or yarn start

You can goto http://localhost:8080 and try out this demo, later you can deploy the server code to server app containers like heroku, glitch, aws, etc and replace the URL in frontend's .env file with your new server URL.

Licence

MIT Licensed.

razorpay-react-demo's Issues

'Razorpay' is not defined

Hi, I have defined the checkout.js script in index.html in public folder.
The components are in the src folder, and index.js is also in the src folder.

Got the error 'Razorpay' is not defined when trying to run the project.

Any idea about this?

window.Razorpay is not a constructor

I got an error window.Razorpay is not a constructor

`

placeOrder(){

let options = {
  "key": "RAZORPAY_KEY",
  "amount": this.state.amount, 
  "name": "Merchant Name",
  "description": "Purchase Description",
  "image": "/logo.png",
  "handler": function (response){
    alert(response.razorpay_payment_id);
  },
  "prefill": {
    "name": "xyz",
    "email": "[email protected]"
  },
  "notes": {
    "address": "Hello World"
  },
  "theme": {
    "color": "#F37254"
  }
};

const rzp = new window.Razorpay(options);
rzp.open();

}

onClick={(e) => this.placeOrder()} color="primary" size="lg">Place order `

Bad Gateway Error

we are getting error Failed to load resource: the server responded with a status of 400 (Bad Request) when we try on 127.0.0.1 from local server , tried change value in front end .env url but same issue , first we tried on aws as well we are getting same issue when new page created in payment mode like netbanking or debit card . in upi qrcode its working fine. also tried on localhost in which everything working fine only giving issue on different ip...

Razorpay is undefined in frontend!

In your front-end code, where are you importing the var Razorpay to do new Razorpay() ?

ISSUE WHILE TEST APPLICATION

its throw msg like