微信小程序支付功能前端流程

时间:2024-02-25 22:04:27

只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app)。 

    handleCreate () {
      /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 */
      uni.request({
        url: \'/testApi/wxPay/insert\',  // 创建订单接口
        method: \'POST\',
        data: {
          openId: \'获取到的该用户的openid,必传\',
          number: \'商品数量\',
          goodsId: \'商品id\',
          goodsFee: \'商品价格\'
        },
        success: res => {
          console.log(\'获取数据成功\')
          this.handlePayment(res)
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    handlePayment (res) {
      /** 第二步,根据后台返回的订单id生成商户订单 */
      uni.request({
        url: \'/testApi/wxPay/unifiedorder\',  // 生成订单接口
        method: \'POST\',
        data: {
          openId: \'获取到的该用户的openid,必传\',
          totalFee: res.paidAmount, // 商品支付价格
          uid: res.uid // 后台生成的订单id
        },
        success: result => {
          /** 第三步,调用微信支付接口发起支付(我们后台返回的是JSON字符串,所以要转为JSON对象) */
          let param = JSON.parse(result);
          uni.requestPayment({
            timeStamp: param.timeStamp,
            nonceStr: param.nonceStr,
            package: param.package,
            signType: param.signType,
            paySign: param.paySign,
            success: response => {
              console.log(\'支付成功\')
            },
            fail: err => {
              console.log(err)
            }
          })
        },
        fail: err => {
          console.log(err)
        }
      })
    }