如何调用微信支付功能?

428 阅读1分钟

小程序的官方文档介绍到发起微信支付即调用API wx.requestPayment(Object object)

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success(res) { },
  fail(res) { }
})

以上参数的由来:

官方给出的业务流程时序图,小程序支付交互如下图:

1417530-20190114200009076-1325924588.png 根据实现过程,我将它划分成如下六个模块进行讲解,

2.png 1、下单:

这里是用户与页面交互,例如点击付款按钮,触发支付交互

2、向后端发出支付请求

通过接口请求给后端系统提供参数:商品ID,总价totalPrice

3、后端系统与微信服务进行交互,换取参数

后端系统得到微信返回的相关数据后,经过解密处理返回前端需要的相关参数,即wx.requestPayment()需要的相关参数

4、发起微信支付

5、微信服务返回支付的结果

根据微信返回的结果(成功或失败),前端做出对应的提示

6、微信服务把支付结果通知给后端系统

这里就是后端的事情了,和前端不相干 前端代码:

 /**
     * 
     * @param {string|number} id 订单ID
     * @param {string|number} totalPrice 订单总价
     */
    pay(id,totalPrice){
        wx.request({
            url: 'https://xxxxxxxxx',
            data: {
              orderId: id,
              orderPrice:totalPrice
            },
            success:res => {
                wx.requestPayment({
                    timeStamp: res.data.timeStamp,
                    nonceStr: res.data.paySign,
                    package: res.data.paySign,
                    signType: 'MD5',
                    paySign: res.data.paySign,
                    success(res) {
                        console.log('支付成功')
                    },
                    fail(res) { 
                        console.log('支付失败')
                    }
                })
                
            },
            fail:err => {
                console.log('接口请求出错')
            }
        })
    }