React實現微信掃碼支付

效果圖 

一、請求後臺接口獲取data數據

 

二、解析數據

https://www.npmjs.com/package/qrcode.react

安裝

npm install qrcode.react

二維碼生成工具

 <QRCode size={150} value={this.state.path}/>

解析處理data

  /**
     * 二維碼支付的返回數據
     */
    if (payData !== ispFeeOlds && payData) {
      if (payData.code_url) {
        this.setState({
          showQR: true,
          path: payData.code_url,
        });
      } else {
        if (payData.err_code_des) {
          message.info(payData.err_code_des)
        } else {
          message.info("微信掃碼支付失敗")

        }
      }
    }

三、回調處理

目前掃碼不回調 只能通過監聽自己服務器訂單狀態改變