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

一、说明：

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

1. 注册微信公众平台，并完成开发者资质认证；

2. 在微信商户平台注册商户账号，并完成商户资质认证；

3. 在商户后台创建支付订单，得到prepay_id；

4. 在客户端调用微信支付API，进行支付请求；

5. 微信返回支付结果给服务器端，服务器端进行结果验证和订单更新；

6. 将订单状态告知客户端，支付完成。

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

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\"}"  
1
2

在这里我们简单举一个例子，以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,
    };
  }
});

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

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

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

• appid：小程序或公众号的AppID
• partnerid：商户号
• prepayid：预支付交易会话标识
• noncestr：随机字符串，不长于32位
• timestamp：时间戳，表示当前时间，格式为yyyyMMddHHmmss
• package：统一下单接口返回的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)
      }
     })
 
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

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

• 将收到的xml转化为数组，验证签名是否一致；

• 判断支付结果中的return_code和result_code是否都为SUCCESS；

• 根据out_trade_no查询订单信息，判断订单状态；

• 更新订单状态为已支付/支付失败。

6. 支付完成

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