CODEWITHSUNDEEP
reactjs
Deepti
Deepti

Reputation: 31

Razorpay installation in react js

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

Upvotes: 2

Views: 12154

Answers (4)

Mayank Agrawal
Mayank Agrawal

Reputation: 86

Try clearing cache or run it in incognito mode. For me this solved this error.

Upvotes: 0

mevrick
mevrick

Reputation: 1045

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;

Upvotes: 7

Amal p
Amal p

Reputation: 3052

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

Upvotes: 10

Umang Galaiya
Umang Galaiya

Reputation: 702

Can you post a bit more of your code for me to see how you have implemented it?

You can also take a look at https://codepen.io/ankitstarski/pen/QgLXML.

class Checkout extends React.Component {
  state = {
    amount: 0
  };

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

Upvotes: 1

Related Questions