微信支付

现在的app上如果有售卖的商品基本都会有接入支付系统,正好最近在做的项目中有做到微信支付的功能,再弄的过程中也碰到相应的坑,为了防止以后再次遇到就在本文做个笔记。

本文用到的是 APIcloud 模块操作

在做之前,先仔细的阅读 APIcloudwxPay 官方文档以及微信支付的文档。
APIcloud里的wxPay模块的payOrder的方法地址
微信支付统一下单地址
调起微信支付接口的请求参数列表地址

支付操作分三个步骤

  1. 用户输入金额点击支付确认操作,发送 http 请求;
  2. 后端发起下单;商户系统先调用该接口在微信支付服务后台生成预支付交易单,返回正确的预支付交易回话标识后再在APP里面调起支付。(接口链接:https://api.mch.weixin.qq.com/pay/unifiedorder
  3. 调起支付接口( wxPay 模块的 payOrder()),然后在 APP 端调起支付的参数列表。

具体实现

  • 前端在点击确认支付的按钮时,发送请求把输入的金额给后端,

(以下操作最好放在服务器端处理)

  • 然后后端在请求微信下单接口(步骤二),
  • 在请求的参数当中有一个sign 签名字段(注),这个也是需要后端通过所传的所有参数拼接而得到的,

如果参数无误,微信服务端就会返回一些字段给后端服务器,其中包含了要发起支付的 prepay_id 字段(这个要在 payOrder 方法中用到),拿到微信返回的字段之后,再拼接一个 sign (注) ,目的是为了把这个字段通过用户点击按钮的时候发送的请求中直接返回给前端,从而不需要前端拼接,避免前端暴露代码。

做好所有的操作之后再在


wxPay.payOrder({
  apiKey: ret.Data.appid,
  orderId: ret.Data.prepay_id,
  mchId: ret.Data.mch_id,
  nonceStr: ret.Data.nonce_str,
  timeStamp: ret.Data.timestamp,
  package: 'Sign=WXPay',
  sign: ret.Data.Sign
}, function(ret, err) {
  if (ret.status) {
  //支付成功

  } else {}
});

以上所有操作完成支付。

注意事项:后端在两次拼接 Sign 的时候用到的时间戳和随机字符串是不一样的,如果两次都是相同的话,结果会出来最后的 sign 也是会校验成功,但是调用 wxPay.payOrder 一定会出错,导致掉不起微信支付(这个地方找了很久的问题)

注:拼接sign方法,具体方法详看https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=4_3