微信公众号h5支付 以及获取code(前端部分)
站长
· 阅读数 37
记录微信公众号h5支付(前端部分)
- 前一段时间换了一家公司,刚来给了一个项目,h5移动端页面,涉及登陆注册、微信绑定、购买等。微信支付之前没做过,不过比较简单,在这里记录一下。
先上官网文档
第一步,先拿到code,拿到code传给后台。
- 这段代码填上就可以用,当用户确认授权以后返回定义的url后,url后就有code参数,然后吧code提出来。
var appid = "公众号id";
var redirect_uri = encodeURIComponent("成功以后返回地址");
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
- 获取url上附带的code参数
//转码
function parse_url(url) { //定义函数
var pattern = /(\w+)=(\w+)/ig; //定义正则表达式
var parames = {}; //定义数组
url.replace(pattern, function (a, b, c) {
parames[b] = c;
});
return parames; //返回这个数组.
}
//获取当前url 取到code
var url = window.location.href;
var params = parse_url(url);
//params.code 就是当前的code
- 把code传给后台,后台会返回文档提到的几个参数
var appIdVal = appId;
var timeStampVal = timeStamp;
var nonceStrVal = nonceStr;
var packageVal = package;
var signTypeVal = signType;
var paySignVal = paySign;
- 把参数赋值到函数中即可拉起支付
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"", //公众号id,由商户传入
"timeStamp":"", //时间戳,自1970年以来的秒数
"nonceStr":"", //随机串
"package":"", //订单详情扩展字符串
"signType":"", //微信签名方式:
"paySign":"" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
}
});
}
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();
}
- 楼主遇到的问题第是公众号配置问题,因为公众号不是我自己配置,前端部分写好后一直拉不起支付,后来也是各种百度,最后确认是授权页面回调地址错误。
- 至于后台楼主就不太清楚了,没研究过。在这里记录一下,希望对其他人有点帮助。