Question

我正在我的反应应用程序中实施razorpay付款。以下是文档中给出的代码。

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

那么如何在反应中实现它呢？我可以点击按钮，然后可以调用rzp1.open（）;.但我认为这将是未定义的。是否应该从index.html文件中加载Fiddle？我在这里很困惑。请帮帮我。

Answer 1

您可以在componentDidMount()中应用第三方库。即你可以在library呈现后绑定DOM。

在您的情况下，library不需要DOM元素，但某些选项与DOM无关。因此，您也可以在呈现component之前初始化它。

您案例的一个例子。

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

如果您想设置反应组件来执行此操作，我建议您将其设置为可扩展且可重复使用（这就是组件的反应！）

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

要使用此组件并传递不同数量的费用，您只需执行此类操作

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

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

建议：将大多数默认选项移动到您可以导入和使用的配置文件中。尝试尽可能多地抽象。它会让您的代码更易于使用

如何在反应应用程序中使用第三方扩展？

2 个答案: