1200字范文 > 微信小程序接入微信支付

微信小程序接入微信支付

时间：2020-08-17 01:52:44

相关推荐

微信小程序接入微信支付

文章目录

微信小程序接入微信支付一、准备工作1. 申请材料2. 费用3.申请流程二、技术实现1. 微信小程序微信支付流程2. 业务场景及代码实现2.1 确认订单2.2 下单2.3. 调起微信支付2.4. 查询支付结果三、一些问题：

微信小程序接入微信支付

一、准备工作

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

1. 申请材料

1、营业执照：彩色扫描件或数码照片

2、组织机构代码证：彩色扫描件或数码照片，若已三证合一，则无需提供

3、对公银行账户：包含开户行省市信息，开户账号

4、法人身份证：彩色扫描件或数码照片

2. 费用

申请接入微信支付不收取任何申请费用；

商户交易按费率收取服务费，一般与商家选择的经营类目有关，为0.6%-1%不等。

3.申请流程

申请流程

提交资料签署协议绑定场景

二、技术实现

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

小程序微信支付时序图

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

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

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

2. 业务场景及代码实现

2.1 确认订单

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

2.2 下单

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

placeOrder() {wx.showLoading({title: '',})const _this = thisconst postData = {goodsID: _this.data.goods_info.goodsID,userID: wx.getStorageSync('userId'), openID: wx.getStorageSync('openid')}wx.request({url: '/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)}})}

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

timeStamp

nonceStr

package

signType

paySign

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

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

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

。

2.3. 调起微信支付

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

goTowxPay(userInfo) {const _this = thiswx.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)}})},

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

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

2.4. 查询支付结果

queryPayment() {wx.showLoading({title: '',})const _this = thisconst 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）通过一定的时间机制，定时查寻订单支付状态。