微信小程序接入微信支付_微信小程序对接微信支付

微信小程序接入微信支付

一、准备工作

微信小程序支付接入前准备工作

1. 申请材料

1、营业执照：彩色扫描件或数码照片
2、组织机构代码证：彩色扫描件或数码照片，若已三证合一，则无需提供
3、对公银行账户：包含开户行省市信息，开户账号
4、法人身份证：彩色扫描件或数码照片

2. 费用

申请接入微信支付不收取任何申请费用；
商户交易按费率收取服务费，一般与商家选择的经营类目有关，为0.6%-1%不等。

3.申请流程

申请流程

1. 提交资料
2. 签署协议
3. 绑定场景

二、技术实现

1. 微信小程序微信支付流程

小程序微信支付时序图

小程序微信支付主要步骤：

1. 小程序提前调用 wx.login()，接口会返回 openid，这个 openid 是调用微信的下单接口时的必填参数，把 openid 存到本地备用。
2. 小程序端调用自己服务端的下单接口，需传 openid 和其他一些后台需要的业务参数。
3. 服务端收到小程序端上一步的请求之后，调用微信平台的下单接口进行下单，同时组装好下一步小程序端调起微信支付需要用的一些参数，timeStamp, nonceStr, package, signType, paySign，下单成功之后将这些信息一并返回给小程序端。
4. 小程序端拿到上一步服务端给的参数之后，调用 wx.requestPayment() 接口就能调起来微信支付。
5. 用户输入支付密码之后，返回小程序中，wx.requestPayment()的回调中有支付结果。
6. 在 wx.requestPayment() 支付成功的回调中，调用自己服务端查询订单的接口，这一步是为了触发服务端自主去向微信平台及时查询订单状态。
7. 自己服务端主动向微信平台查询订单状态，微信平台也会异步的对支付结果进行通知到服务端，但是通知是异步的。
8. 小程序端返回前一个页面刷新支付状态。

微信小程序接入微信之后整体流程挺简单，需要注意的是，第 3 步中，对数据进行加签加密的步骤建议放到服务端进行处理。

2. 业务场景及代码实现

2.1 确认订单

首先需要有一个确认订单的页面，这个页面就是订单详情页，这个页面需要有一个触发用户点击去支付的按钮。

2.2 下单

点击“去付款”，调用自己服务端的下单接口：

placeOrder() {
    wx.showLoading({
        title: '',
    })
    const _this = this
    const postData = {
        goodsID: _this.data.goods_info.goodsID,
        userID: wx.getStorageSync('userId'),    
        openID: wx.getStorageSync('openid')
    }
    wx.request({
        url: 'https://xxx.com/api?xxx=xxx&token=xxx',
        method: 'POST',
        header: {
            "Cookie": "xxx",
            "Content-Type": "application/x-www-form-urlencoded"
        },
        data: postData,
        success(res) {
            if (res.status === 200) {
                _this.goTowxPay(res.data)
            }
            wx.hideLoading()
        },
        fail(err) {
            wx.hideLoading()
            console.log(err)
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

调用自己的服务端，自己的服务端调用微信平台API进行下单，下单成功后将结果和以下组装好的数据返回给小程序端：

timeStamp
nonceStr
package
signType
paySign

这是在小程序端自己拼接的参数：

const timestamp = Date.now();
const nonceStr = (Math.random()).toString() 
const prepay_id = this.data.prepay_id
var signStr = "wx9xxxe39xxx9b4f" + "\n" + timestamp + "\n" + nonceStr + "\n" + "prepay_id=" + prepay_id + "\n"
var publicKey = ''; 
var key = CryptoJS.enc.Utf8.parse(publicKey);
var plaintext = signStr; 
var plainData = CryptoJS.enc.Utf8.parse(plaintext);
var encryptedData = CryptoJS.RSA.encrypt(plainData, key);
var paySign = encryptedData.toString();

wx.requestPayment({
    "timeStamp": timestamp,
    "nonceStr": nonceStr,
    "package": "prepay_id=" + prepay_id,
    "signType": "RSA",
    "paySign": paySign,
    "success": function(res){

    },
    "fail": function(res){

    },
    "complete": function(res){

    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

处理起来还是比较简单的，但是涉及到加密什么的，建议将此步骤放在服务端完成，客户端/前端 接收到参数之后直接调起微信支付就可以了。

参数拼接以及签名方式见文档 小程序调起支付API
。

2.3. 调起微信支付

从上一步下单成功后，拿到此步骤需要的参数之后，直接调用 wx.requestPayment() 方法，调起微信支付输入密码的页面。

goTowxPay(userInfo) {
    const _this = this
    wx.requestPayment({
        "timeStamp": userInfo.timeStamp,
        "nonceStr": userInfo.nonceStr,
        "package": userInfo.package,
        "signType": userInfo.signType,
        "paySign": userInfo.paySign,
        "success": function(res){
            console.log('success', res)
            if (res.errMsg === "requestPayment:ok") {
                _this.refreshPaymentStatus()
                _this.showToast()
                _this.queryPayment()
            }
        },
        "fail": function(res){
            console.log('fail', res)
        },
        "complete": function(res){
            console.log('complete', res)
        }
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

会自动弹出微信支付输入密码的遮罩层，用户输入密码之后，会回调成功或者失败，这里的 complete() 回调，不管是成功还是失败都是回调。

支付成功之后我们需要做这几件事：1）刷新页面显示；2）提示用户支付结果；3）查询支付结果。其中1）和 2）根据业务情况，是非必须的。3）是建议最好这么做，通过调用自己服务端的API，触发服务端调用微信平台查询订单支付结果。

2.4. 查询支付结果

queryPayment() {
    wx.showLoading({
        title: '',
    })
    const _this = this
    const postData = {
        goodsID: _this.data.goods_info.goodsID,
        userID: wx.getStorageSync('userId'),    
    }
    console.log(postData)
    wx.request({
        url: 'https://xxx/api?xxx=xxx&token=xxx',
        method: 'POST',
        header: {
            "Cookie": "xxx=xxx",
            "Content-Type": "application/x-www-form-urlencoded"
        },
        data: postData,
        success(res) {
            console.log(res)
            wx.hideLoading()
            _this.goToFront()
        },
        fail(err) {
            console.log(err)
            wx.hideLoading()
            _this.goToFront()
        }
    })
},

goToFront() {
    wx.navigateBack()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

微信支付完成之后，微信会异步通知到自己的服务端，因为是异步的，所以建议小程序端主动去调接口触发查询支付结果。

服务端至少要做三件事，1）接收微信平台支付通知; 2）接收前端的接口，调用微信平台查询支付结果；3）通过一定的时间机制，定时查寻订单支付状态。

三、一些问题：

• wx.requestPayment(object)调起来微信支付，其中参数是后台生成还是小程序端自己生成？

参考