Question

我想为我的react-js应用程序集成支付网关（razorpay）。有谁知道如何集成它？

这是代码，我在这里遇到错误。

let rzp = new Razorpay(options);
rzp.open();

错误是：

TypeError: rzp.open is not a function

Answer 1

您能不能再给我发布一些代码，看看您是如何实现的？

您还可以查看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": "harshil@razorpay.com"
      },
      "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>
    )
  }
}

Answer 2

就我而言，上面的代码进行了少量修改。

代替，let rzp = new Razorpay(options);放let rzp = new window.Razorpay(options);

其余一切都很好不要忘记注册并获得有效的API密钥。

按照以下链接的建议在index.html中包含脚本

https://codepen.io/ankitstarski/pen/QgLXML。

下面的示例

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

下面的组件代码

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": "harshil@razorpay.com"
      },
      "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>
    )
  }
}

Answer 3

您可以将Razorpay提供的脚本标签放在index.html的头部，但是我建议在组件安装时动态地加载它。请参阅下面的完整代码。

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: 'demo@demo.com'
        },
        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;

Answer 4

尝试清除缓存或以隐身模式运行。对我来说，这解决了这个错误。

React JS中的Razorpay安装

4 个答案: