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

只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是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)
        }
      })
    }

 

posted @ 2019-11-20 12:29  puerile  阅读(2048)  评论(0编辑  收藏  举报