如何在React App中使用第三方扩展？

Question

I am implementing razorpay payment in my react app. Below is the code given in the doc.

    <button id="rzp-button1">Pay</button>
    <script src = "https://checkout.razorpay.com/v1/checkout.js" > < / script>
      <script>
    var options = {
      "key": "YOUR_KEY_ID",
      "amount": "2000", // 2000 paise = INR 20
      "name": "Merchant Name",
      "description": "Purchase Description",
      "image": "/your_logo.png",
      "handler": function (response) {
        alert(response.razorpay_payment_id);
      },
      "prefill": {
        "name": "Harshil Mathur",
        "email": "harshil@razorpay.com"
      },
      "notes": {
        "address": "Hello World"
      },
      "theme": {
        "color": "#F37254"
      }
    };
    var rzp1 = new Razorpay(options);

    document.getElementById('rzp-button1').onclick = function (e) {
      rzp1.open();
      e.preventDefault();
    }
    </script>

So how do I implement it in react. I can put onClick on the button and can call the rzp1.open();. But I think it will through undefined for that. Also the https://checkout.razorpay.com/v1/checkout.js should it be loaded from index.html file? I am very much confused here. Please help me out.

Answer 1

You can use third party libraries by applying them in componentDidMount() . ie you can bind library to DOM after it's rendered.

In your case library don't need DOM element but certain options not related to DOM . So you can also initialise it before rendering your component .

An example to your case.

class YourComponentWithButton extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      rzp1: null //holds your external library instance
      //your initial state if any
    }
  }
  componentDidMount(){ //you can also keep this code in componentWillMount()
    var options = {
      "key": "YOUR_KEY_ID",
      "amount": "2000", // 2000 paise = INR 20
      "name": "Merchant Name",
      "description": "Purchase Description",
      "image": "/your_logo.png",
      "handler": function (response) {
        alert(response.razorpay_payment_id);
      },
      "prefill": {
        "name": "Harshil Mathur",
        "email": "harshil@razorpay.com"
      },
      "notes": {
        "address": "Hello World"
      },
      "theme": {
        "color": "#F37254"
      }
    };
   this.setState({
      rzp1 : new window.Razorpay(options)
   })
  }

  buttonClick(event){
      if(state.rzp1){ //sanity check whether library loaded to varibale
         this.state.rzp1.open();
      }
      e.preventDefault();
  }

  render(){
    return(
       <div className="your-container">
          <button onClick={this.buttonClick.bind(this)}>Your Button</button>
       </div>
    )
  }
}

Answer 2

if you want to setup a react component to do this I would recommend you make it extendable and reusable (thats what react components are for!)

class RazorPay extends Component {
    constructor(props){
        super(props);
        this.options = Object.assign(
            {}, 
            {
                "key": "YOUR_KEY_ID",
                "amount": "2000", // 2000 paise = INR 20
                "name": "Merchant Name",
                "description": "Purchase Description",
                "image": "/your_logo.png",
                "handler": (response) => {
                    alert(response.razorpay_payment_id);
                },
                "prefill": {
                    "name": "Harshil Mathur",
                    "email": "harshil@razorpay.com"
                },
                "notes": {
                    "address": "Hello World"
                },
                "theme": {
                    "color": "#F37254"
                }
            }, 
            props.rzp1 // any options you pass via props will override the defaults
        );
    }

    componentWillMount(){
        this.rzp1 = new window.Razorpay(options);
    }

    handleClick = (e) => 
        this.rzp1.open();
        e.preventDefault();
    }

    render(){
        return(
            <div>
                <button onClick={this.handleClick}>Open</button>
            </div>
        )
    }
}

to use this component and pass a different amount to charge you would just do something like this

const someOptions = {amount: '100'}; // somewhere in the render method.

<RazorPay rzp1={someOptions} /> // somewhere in the return of the render method

recommendations: move most of those default options to a config file that you can import and use. try to abstract as much as you can. it'll make your code easier to use