【uni-app微信小程序】实现支付功能

【uni-app微信小程序】实现支付功能

一、说明：二、简单介绍一下每个步骤的细节：1. 注册微信公众平台2. 注册微信商户平台3. 创建支付订单，请求后端接口，获取orderInfo微信支付统一下单接口返回的支付参数包含以下含义（重要！！！）：

4. 调用微信支付API5. 验证支付结果和更新订单状态6. 支付完成

一、说明：

实现微信支付功能需要在小程序后台配置支付相关信息，并且在前端代码中调用微信支付API进行支付操作。好的，uni-app微信小程序实现支付功能整体流程大致如下：

注册微信公众平台，并完成开发者资质认证； 在微信商户平台注册商户账号，并完成商户资质认证； 在商户后台创建支付订单，得到prepay_id； 在客户端调用微信支付API，进行支付请求； 微信返回支付结果给服务器端，服务器端进行结果验证和订单更新； 将订单状态告知客户端，支付完成。

二、简单介绍一下每个步骤的细节：

1. 注册微信公众平台

注册地址：微信公众平台 - 申请开通商户号，并对应绑定好微信小程序。 开发文档地址：微信官方文档

2. 注册微信商户平台

注册地址：接入微信支付 - 中添加产品并获取到API密钥、商户号等相关信息。开发文档地址：微信支付文档

注意： 此商户号，需要由主管及更上级领导进行注册，会成为公司收款账户（不是由前端程序员注册！！！不是由前端程序员注册！！！不是由前端程序员注册！！！）

注册非常简单，重点是需要提供企业资料，一般程序员没有权限获取这些材料，所以需要由上级注册

企业注册需要材料：营业执照，对公银行账户信息，法人身份证

3. 创建支付订单，请求后端接口，获取orderInfo

这里进行说明 orderInfo完全是后端返回的，前端不做任何处理， 所以orderInfo有问题推给后端，前端不用浪费时间, app的支付不管ios还是android都是string类型

微信orderinfo格式

"{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"1579779903\",\"noncestr\":\"xxxxxxx\",\"package\":\"Sign": "WXPay\",\"sign\":\"xxxxxxxxxxxxxxxxxxxx\"}"

在这里我们简单举一个例子，以Node.js为例，后端代码可能如下所示（变量不是很全，各位后端自己看着改）：

const wxpay = require('node-weixin-pay');

const config = {

appid: 'your appid',

mch_id: 'your merchant id',

partner_key: 'your partner key',

pfx: fs.readFileSync('path to your p12 file'),

};

const payment = {

body: 'Your order description',

out_trade_no: 'Your order number',

total_fee: 1,

spbill_create_ip: 'Your ip address',

notify_url: 'Your notify url',

trade_type: 'JSAPI',

openid: 'Your openid',

};

wxpay.getBrandWCPayRequestParams(payment, config, (err, result) => {

if (err) {

console.error(err);

} else {

// 返回给前端的支付参数

const orderinfo = {

appId: result.appId,

timeStamp: result.timeStamp,

nonceStr: result.nonceStr,

package: result.package,

signType: result.signType,

paySign: result.paySign,

};

}

});

其中，node-weixin-pay是用来对微信支付进行封装的第三方库，具体使用方法可以参考其官方文档。 上述代码中，需要使用你的 appid、mch_id、partner_key等参数，这些参数是你自己在注册微信支付时所获得的。我们将 payment 对象传递给 getBrandWCPayRequestParams() 方法，并带上 config 对象，该方法会返回一个 加密后的订单信息（即orderInfo）。 最后，我们将加密后的订单信息返回给前端，前端页面拿到该信息后即可使用微信支付API，向微信服务器发送请求，完成支付流程。

微信支付统一下单接口返回的支付参数包含以下含义（重要！！！）：

appid：小程序或公众号的AppIDpartnerid：商户号prepayid：预支付交易会话标识noncestr：随机字符串，不长于32位timestamp：时间戳，表示当前时间，格式为yyyyMMddHHmmsspackage：统一下单接口返回的prepay_id参数值，此处将其赋值给package，是客户端调起微信支付时的必要参数sign：签名，通过签名算法计算得出，用于验签支付结果是否合法。

在客户端调起微信支付时，需要将以上参数传递给微信支付API发送请求完成支付。

4. 调用微信支付API

在客户端调用微信提供的wx.requestPayment方法，需要传入如下参数：

timeStamp: 时间戳，自1970年以来的秒数 nonceStr: 随机字符串，不长于32位 package: 统一下单接口返回的prepay_id参数值，格式为prepay_id=xxx signType: 签名算法，目前支持HMAC-SHA256和MD5，默认使用MD5 paySign: 签名

第三步、第四步一起的示例代码：

uni.request({

url: '你们公司的后端接口地址,获取支付核心数据',

method: 'POST',

data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },

success(obj) {

//调用微信官方支付接口弹出付款界面,输入密码扣款

wx.requestPayment({

timeStamp: obj.xxxx.timeStamp, //后端返回的时间戳

nonceStr: obj.xxxx.nonceStr, //后端返回的随机字符串

package: obj.xxxx.packageValue, //后端返回的prepay_id

signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5

paySign: obj.xxxx.paySign, //后端返回的签名

success (res) {

console.log('用户支付扣款成功', res)

},

fail (res) {

console.log('用户支付扣款失败', res)

}

})

}

})

以上就是前端实现微信支付功能的基本步骤，需要注意的是，在实际开发中，还需要考虑支付安全、支付异常情况等问题。同时，建议开发者使用uni-app官方提供的微信支付插件来减少开发成本和难度。

5. 验证支付结果和更新订单状态

在微信回调服务器通知支付结果后，服务器需要进行结果验证和处理订单状态。具体步骤如下：

将收到的xml转化为数组，验证签名是否一致； 判断支付结果中的return_code和result_code是否都为SUCCESS； 根据out_trade_no查询订单信息，判断订单状态； 更新订单状态为已支付/支付失败。

6. 支付完成

将支付结果告知客户端，客户端根据支付结果进行相应的页面跳转处理。

文章链接

 您阅读本篇文章共花了：