微信H5：JSAPI支付流程

微信公众号H5网页jsapi支付

说明：

• 使用jsapi支付具体步骤（https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3）
• 常见错误及解决方法

一、使用JSAPI支付具体步骤：

1、需要清楚流程

• 官方指南： https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_1.shtml

2、设置JS接口安全域名

• 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

3、引入JS-SDK（按需，全局）：

• 官方指南：
  https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

npm install weixin-js-sdk

• 按需引入:适用于sdk调用较少的情况

main.js：

import wx from 'weixin-js-sdk';
Vue.use(wx)

引用页面：

 import wx from "weixin-js-sdk";
 
 //sdk鉴权：此处应注意config里面的key值一定不能写错！
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [] // 必填，需要使用的JS接口列表
    });

• 全局引入:适用于sdk调用较多的情况

main.js：

import wx from 'weixin-js-sdk';
Vue.prototype.$wx = wx;

引用页面：

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

调试的时候将debug设置为true，鉴权成功后会显示：{errMsg: “config:ok”}，此外，微信还提供给了两个验证接口处理的方法，注意他们的使用情景：

//通过ready接口处理成功验证
wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
//通过error接口处理失败验证
wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

4、调用支付sdk

• 在sdk鉴权成功了之后即可调用支付等一系列接口。需要注意的是：1.调用该接口还需要加上appId。2.注意该接口的timestamp不是驼峰命名，但除了此处调用该支付接口以外的其他地方，timestamp都是驼峰命名（写给后端的-_-!）。所以此处应该避免搞混淆。

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

二、常见错误及解决方法

微信支付方法都不难，但是细节和配置步骤很多。所以一定要仔细！确保当前步骤正确了再进行下一步。

配置相关问题：

• https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_9&index=7
• https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
• 商户配置信息是否正确
• JS接口安全域名是否配置
• 授权支付目录域名（顶级域名）是否填写正确
• 设置授权域名
• 检查公众号白名单（后端ip地址变更的时候，公众号白名单里面ip地址也应该做相应的替换）

调用sdk时的问题：

• 全局返回码：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Global_Return_Code.html
• 鉴权成功后提示：{errMsg: “config:ok”}，证明可以调用相关接口了
• 调用支付接口时注意：完整的签名应该包含appId。
• timestamp不是驼峰命名。