您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 【uni-app微信小程序】实现支付功能

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

一、说明:

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

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

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

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

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

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

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

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

1. 注册微信公众平台

2. 注册微信商户平台

注意: 此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(不是由前端程序员注册!!!不是由前端程序员注册!!!不是由前端程序员注册!!!

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

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

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是用来对微信支付进行封装的第三方库,具体使用方法可以参考其官方文档。
上述代码中,需要使用你的 appidmch_idpartner_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)
      }
     })
 
  }
})

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

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

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

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

  • 判断支付结果中的return_coderesult_code是否都为SUCCESS

  • 根据out_trade_no查询订单信息,判断订单状态;

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

6. 支付完成

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

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了