微信小程序接入微信支付

Morris_

已于 2023-07-25 10:50:50 修改

阅读量2.6k

点赞数 3

分类专栏：微信小程序文章标签：小程序微信支付微信小程序支付微信支付

于 2023-07-21 07:18:46 首次发布

本文链接：https://blog.csdn.net/Morris_/article/details/131830761

版权

微信小程序专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

微信小程序接入微信支付

微信小程序接入微信支付

一、准备工作

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

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 = 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)
        }
    })
}

调用自己的服务端，自己的服务端调用微信平台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){

    }
})

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

参数拼接以及签名方式见文档小程序调起支付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)
        }
    })
},

会自动弹出微信支付输入密码的遮罩层，用户输入密码之后，会回调成功或者失败，这里的 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()
}