微信支付-JSAPI支付
定义
JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。
应用场景
商户已有H5商城网站，用户通过消息或扫描二维码在微信内打开网页时，可以调用微信支付完成下单购买的流程。
关键代码
declare let WeixinJSBridge: any;
/**
* @description: 通过JSAPI下单API成功获取预支付交易会话标识（prepay_id）后，需要通过JSAPI调起支付API来调起微信支付收银台
* 注1：WeixinJSBridge内置对象在其他浏览器中无效
* 注2：此API需要将请求参数进行签名（参与签名的参数为：appId、timeStamp、nonceStr、package，参数区分大小写）
* @param {*}
* @return {*}
*/
function onBridgeReady (res: any)
{
/* eslint-disable-next-line */
WeixinJSBridge.invoke('getBrandWCPayRequest', {
// 公众号ID，由商户传入
'appId': res.appId,
// 时间戳（转为String类型，兼容IOS “未传timeStamp”问题）
'timeStamp': String(res.timeStamp),
// 随机串
'nonceStr': res.nonceStr,
// 预支付交易会话标识
'package': `prepay_id=${res.prepayId}`,
// 微信签名方式
'signType': res.signType,
// 微信签名
'paySign': res.paySign
},
function (result: any)
{
// 微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功
if (result.err_msg === 'get_brand_wcpay_request:ok')
{
console.log('支付成功');
}
// 支付取消
if (result.err_msg === 'get_brand_wcpay_request:cancel')
{
console.log('支付取消');
}
// 支付失败
if (result.err_msg === 'get_brand_wcpay_request:fail')
{
console.log('支付失败');
}
});
}
/**
* @description: 调起微信JSAPI支付
* @param {*}
* @return {*}
*/
function bootWechatJSAPIPay (res: any)
{
let document: any;
if (typeof WeixinJSBridge === 'undefined')
{
if (document.addEventListener)
{
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}
else if (document.attachEvent)
{
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}
else
{
onBridgeReady(res);
}
}
// 调起微信JSAPI支付
bootWechatJSAPIPay(orderRes);
踩坑
Q1：微信JSAPI支付,配置支付授权目录,添加后无提示,目录也未成功添加。
一开始以为微信官方需要审批时间，就等了2个工作日，结果支付授权目录还是没成功添加。
一顿搜索，竟是腾讯bug。。期待未来的某天能修复，不然真是坑死接入JSAPI支付的开发者们。
解决方案：
添加支付目录后，按流程正确输入操作密码后，界面会跳回来，这时发现并没有添加成功。
接下来不要刷新网页，也不要点击别的模块，再添加一次刚才添加的目录。这时你会发现不用输入操作密码，然后目录也添加成功了。
Q2：IOS机型出现“调用支付JSAPI缺少参数：timeStamp”
解决方案：兼容性问题，通过 WeixinJSBridge 调起 getBrandWCPayRequest 方法时，需要传参 timeStamp，请确保是字符串类型，否则IOS机型就会报错。
Q3：微信H5支付和微信JSAPI支付针对同个订单不能交叉支付。
业务场景：用户先在手机浏览器发起微信H5支付，但放弃支付；再去微信浏览器发起JSAPI支付，此时会弹窗提示“201 商户订单号重复”。
解决方案：需要后端调整支付架构。同一个系统订单，若用户选择不同的支付方式，需要先生成不同的系统订单号，再向微信平台下单，确保每个微信支付产品对应一个订单号。
