微信公众号支付WeixinJSBridge与JS-SDK

微信公众号中直接发起支付

此前开发更具官方文档一直在使用wx.chooseWXPay方法完成支付,WeixinJSBridge最开始开发微信的时候也有使用,但是经常出问题,支付不能发起,当时查找好多文章,基本都在说官方在逐步抛弃该方法,所以后续开发还是使用wx.chooseWXPay,个人感觉次方式繁琐,要进行以下几步:

    1. 引用js库<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    1. 通过config接口注入权限验证配置
    1. 通过ready接口处理验证
    1. 之后再微信下单
    1. 完成自己的支付业务。

参考链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

单纯的支付感觉没必要

最近项目中使用了第三方代收款平台的API接口,和对方对接的时候,在完成对方接口的环境、预下单程序后,在调取微信支付的时候,发现官网的提供的接口是WeixinJSBridge!!!(也许太久不关注信息的更新),至此整理一下这点内容,供参考。注:以官方的为准!

WeixinJSBridge

官方参考:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

接口参数说明

在微信浏览器里面打开H5网页中执行JS调起支付,接口输入输出数据格式为JSON。

注意:WeixinJSBridge内置对象在其他浏览器中无效。微信调试工具不支持,会提示函数未定义。

列表中参数名区分大小,大小写错误签名验证会失败。

Demo实例(来自官方)

注:所需的参数值来自微信的统一下单接口;此参数我使用的是全局参数存取参数值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公众号名称,由商户传入
"timeStamp":"1395712654", //时间戳,自1970年以来的秒数
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信签名方式:
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
function(res) {
if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
}
);
}

注:此处是对事件的检测及注册,保证支付环境

1
2
3
4
5
6
7
8
9
10
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();
}

另附一份JSP代码共参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId" : "<%=appId%>","timeStamp" : "<%=timeStamp%>", "nonceStr" : "<%=nonceStr%>", "package" :
"<%=packageValue%>","signType" : "MD5", "paySign" : "<%=paySign%>"
}, function(res) {
WeixinJSBridge.log(res.err_msg);
// alert(res.err_code + res.err_desc + res.err_msg);
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.location.href = "http://wx.umebox.net/wxpay/pay1.jsp?id=<%=keyvalue1%>&Icum=<%=openid%>&ddh=<%=ddh%>";
alert("微信支付成功!");
} else if(res.err_msg == "get_brand_wcpay_request:cancel") {
alert("用户取消支付!");
} else {
alert("支付失败!");
}
});

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :