html5调用内置浏览器,微信支付如何实现内置浏览器的H5页面支付

本文详细记录了在H5页面中集成微信支付的过程,包括申请公众平台和支付功能、配置支付授权目录、获取AppID和AppSecret、设置商户号和商户支付密钥等步骤。在实现过程中遇到的难点如两次签名的创建、前端调用微信支付API的细节以及调试困难等。特别指出,当用户在微信支付弹出层停留时间过长可能导致订单失效但支付仍能成功的问题,期待解决方案。
摘要由CSDN通过智能技术生成

因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便

这是微信的官方API文档 微信API

微信支付的准备工作

申请公众号,申请开通支付,这个很简单,自行百度

申请好之后 在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”,“测试授权目录”,“测试白名单”

在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)”

在商户平台中找到微信支付分配的商户号,以及自己配置一个商户支付密钥

具体步骤

首先通过微信支付的api 获得支付用的prepay_id,这里需要用到上面提到的“AppID(应用ID)”,“AppSecret(应用密钥)”,“微信支付分配的商户号”,“商户支付密钥”以及其他的一些参数(具体参照微信开发文档)用MD5加密成签名(第一次签名)获得prepay_id后,用prepay_id和一些其他参数(具体参照微信开发文档)用MD5加密成签名(第二次签名)然后在前端通过微信内置浏览器提供的js API,WeixinJSBridge.invoke来调用微信支付的弹出页面,这里需要用到上面的第二次的签名

具体代码如下

$.get('/xxx',function(data){

if(data && data !== ""){

var _data = $.parseJSON(data)[0];

if(parseInt(_data.userAgent) < 5){

alert('您的微信版本低于5.0,无法使用微信支付!');

return false;

}

WeixinJSBridge.invoke('getBrandWCPayRequest',{

'appId': _data.appId,

'timeStamp': _data.timeStamp,

'nonceStr': _data.nonceStr,

'package': 'prepay_id=' + _data.packageOne,

'signType': _data.signType,

'paySign': _data.paySign

},function(res){

if(res.err_msg === 'get_brand_wcpay_request:ok'){

alert('支付成功,返回订单列表!');

}else if(res.err_msg === 'get_brand_wcpay_request:cancel'){

alert('取消支付!');

}

});

}

});

几个容易失败点需要注意

支付链接和在开发平台配置的链接不匹配

总共需要2次签名,并且所需的参数是不同的,在JS中用到的签名是第二次签名,不要混淆参数传递的不能有错

如果body中有中文需要转义其中还有一些问题没有完全解决,就是位置支付没有一个判断失效的时间,如果在微信支付的弹出层停留时间太久了,可能这个订单在我们网站上已经失效了,可在微信支付中仍然能支付成功,如果有高人知道这个问题怎么解决的,希望能告诉解决办法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值