微信支付JSSDK接入方式

业务流程

通过微信打开，在支付页面输入金额，点击支付按钮，后台处理处理数据并获取到预支付ID（prepay_id），返回到前端的页面上。页面上通过jssdk唤起微信支付的页面，弹出输入密码页面，用户输入密码后，由微信展示支付成功页面（微信自己实现），跳转到我们自己定义的页面，展示支付结果。

开发流程

获取用户授权

在生成预支付id的过程中需要获取用户授权，并且拿到用户的openid。可以直接参考官方文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

引入JSSDK

在需要调用微信支付功能的页面引入的jssdk，直接放在HTML的head中：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

H5唤起微信支付功能

（1）使用微信jssdk中的wx.config配置方法注册支付功能

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: json.appid._cdata, // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: json.nonce_str._cdata, // 必填，生成签名的随机串
  signature: Sign(arr1, 'SHA1'), // 必填，调用js签名，
  jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，这里只写支付的
});

（2）在使用wx.choosePay唤起支付

wx.chooseWXPay({
  timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: json.nonce_str._cdata, // 支付签名随机串，不长于 32 位
  package: "prepay_id=" + json.prepay_id._cdata, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
  signType: "MD5", // 签名方式，默认为´SHA1´，使用新版支付需传入´MD5´
  paySign: Sign(arr2, 'MD5'), // 支付签名
  success: function (res) {
  },
  cancel: function (res) {
    //alert(´取消支付´);
  }
});

支付成功后，处理回调URL

官方解释：
支付完成后，微信会把相关支付和用户信息发送到商户设定的通知URL，验证签名，并回应微信。对后台通知交互时，如果微信收到商户的应答不是成功或超时，微信认为通知失败，微信会通过一定的策略（如30分钟共8次）定期重新发起通知，尽可能提高通知的成功率，但微信不保证通知最终能成功。

主要是3步：

• 解析传过来的流信息，通过重新签名的方式验证流中包含的信息的正确性。就是判断这个信息到底是不是微信发的
• return_code和result_code都是SUCCESS的话，处理商户自己的业务逻辑，如订单的支付状态更新等一些信息
• 告知微信，通知收到

注意事项

获取预支付id的时候如果前后端是分离的，那么一定要都统一使用MD5签名，因为在生成预支付id的时候可以使用MD5或者HMACSHA256，但是新版支付中，在前端唤起支付的时候的签名只能使用MD5签名，如果后台使用HMACSHA256就会提示验签出错。

关于签名，利用jssdk唤起微信支付功能需要有两次签名，算上后端获取预支付id的过程中也有一次签名，这就是3次签名。第一次签名是在wx.config中的signature，此处使用的是SHA1签名，生成预支付id的sign和唤起支付功能的paySign使用的是MD5签名。在wx.choosePay中的签名参数也有值得注意的一些地方，主要是参数的大小写。

signature中参与签名的字段

const arr1 = [
  'noncestr='+json.nonce_str._cdata,
  'jsapi_ticket='+json.wx_jsapi_ticket._cdata,
  'timestamp='+timestamp,
  'url=授权目录 '
]

paySign中参数签名的字段

const arr2 = [
  'nonceStr='+json.nonce_str._cdata,
  'package=prepay_id='+json.prepay_id._cdata,
  'signType=MD5',
  'appId='+json.appid._cdata,
  'timeStamp='+timestamp
]