Taro4开发微信/支付宝小程序支付功能

场景：从app发起支付，跳转到支付宝/微信小程序完成支付
支付宝官方文档：地址
微信官方文档：地址

1. app跳转到小程序需要携带交易单号
2. 在小程序端获取router上的交易单号并调用原生的login方法获取jsCode传给后端获取支付凭证
3. 发起支付

支付凭证（签名）获取方式需要后端去对接

  useEffect(()=>{
   pageInit()
  },[])
  const pageInit = () => {
    if(!transactionId){
      return
    }
     if(process.env.TARO_ENV === 'alipay'){
      my.getAuthCode({
        scopes: 'auth_user',
        success: (Resp) => {
          if(Resp.authCode){
            Request.payOrder.queryOrderInfo({
              recordId: transactionId,
              requestExts: [
                {
                  tag:'authCode',
                  val: Resp.authCode,
                },
              ]
            }).then((res: any)=>{
              if(res.code === 200){
                handleOrderInfo(res)
              }
            })
          }
        },
        fail: (err) => {
          console.error('获取授权码失败:', err);
        }
      })
    }
    if(process.env.TARO_ENV === 'weapp'){
      Taro.login({
        success: function (Resp: any) {
          if(Resp.code ){
            Request.payOrder.queryOrderInfo({
              recordId: transactionId,
              requestExts: [
                {
                  tag:'jsCode',
                  val: Resp.code,
                },
              ]
            }).then((res: any)=>{
              if(res.code === 200){
                handleOrderInfo(res)
              }
            })
          }
        }
      })
    }
  }

  const handleOrderInfo = (res: any) => {
     setOrderInfo({
      ...(res.data || {}),
      // 微信
      appId: ...,
      timeStamp: ...,
      nonceStr: ...,
      package: ...,
      signType: ...,
      paySign: ...,
      // 支付宝
      tradeNo: ...,
    })
  }

点击支付

  const requestPayment = () => {
    if(!orderInfo.recordId){
      Taro.showToast({
        title: '订单获取失败',
        duration: 2000,
        icon: 'error'
      })
      return
    }
    if(process.env.TARO_ENV === 'alipay'){
      aliPay()
    }
    if(process.env.TARO_ENV === 'weapp'){
      weappPay()
    }
  }

  const weappPay = () => {
    Taro.requestPayment({
      timeStamp: orderInfo.timeStamp,
      nonceStr: orderInfo.nonceStr,
      package: orderInfo.package,
      signType: orderInfo.signType,
      paySign: orderInfo.paySign,
      success: function () {
        Taro.showToast({
          title: '支付成功',
          duration: 2000,
        })
        Taro.navigateTo({
          url: '/pages/pay-order-result/index'
        })
      },
      fail: function (err) {
        Taro.showToast({
          title: '支付失败',
          duration: 2000,
          icon: 'error'
        })
      }
    })
  }

  const aliPay = () => {
    my.tradePay({
      tradeNO: orderInfo.tradeNo,
      success: (res) => {
        if (res.resultCode === '9000') {
          Taro.showToast({
            title: '支付成功',
            duration: 2000,
          })
          Taro.navigateTo({
            url: '/pages/pay-order-result/index'
          })
          console.log('支付成功');
        } else {
           Taro.showToast({
            title: '支付失败',
            duration: 2000,
            icon: 'error'
          })
          console.log('支付失败', res.resultCode);
        }
      },
      fail: (err) => {
        Taro.showToast({
          title: '支付失败',
          duration: 2000,
          icon: 'error'
        })
      }
    });
  }