react中使用AlipayJSBridge 支付宝支付调用接口在H5网页的应用

支付宝文档:
https://opendocs.alipay.com/open/
我用的是第二种,如下:
react中使用AlipayJSBridge 支付宝支付调用接口在H5网页的应用_第1张图片
AlipayJSBridge在支付宝里才能唤起
主要流程:我们做的是支付宝连续包月自动续费,因为支付宝限制原因需要签约两次付费,在客户端显示二维码,客户保存二维码到支付宝扫码进行后续操作
前端提供给后端的主要调起流程如下:
直接在componentDidMount 里调起,render里可以加一些loading效果,看个人需要

componentDidMount = () => {
      let that = this
     // activeMobx.isAlipayAndAgreementPageSign()调起接口,拿到后端返回的数据,这是后端给的接口
      activeMobx.isAlipayAndAgreementPageSign().then(res=>{
        let str = res.data.sign
        this.ready(
          ()=>{
              AlipayJSBridge.call("tradePay", {
                orderStr: str
              }, function(data) {
                  if("9000" == data.resultCode){
                    console.log('成功')//文档里会有其它resultCode,记得是string类型"9000"
                    }     
              });
            });
      })  
    }

    ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }

你可能感兴趣的:(React,react.js,javascript,前端)