h5支付——前端需要处理什么?

时间:2024-04-05 07:45:31

最近做了一个跟h5支付(其实就是微信h5支付)相关的模块,由于是初次接触,特来分享下,前端在h5支付功能这需要处理一些什么,以及遇到的坑点处理

 

首先,我们应该先了解一下h5支付的相关API:[h5支付文档]

这里我就直接用微信官方demo做说明:

微信官方体验链接:https://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微信外浏览器打开。

 

第一步:

首先我们需要传所要支付的商品的对应code或者id神马的(这里根据自己的项目接口里的字段定义)给接口

h5支付——前端需要处理什么?

 

第二步:

通过上一步的接口获取到后台返回的h5支付链接
 

h5支付——前端需要处理什么?

 

第三步:

将获取到的h5支付链接url赋值给a标签(超链接)的src,然后用户点击该按钮,就能跳转到h5支付页面,调起微信h5支付了

h5支付——前端需要处理什么?

 

 

注意:

虽然文档明确说明到:      =>       提醒:H5支付不建议在APP端使用,如需要在APP中使用微信支付,请接APP支付

but,app嵌入h5页面开发的h5页面还是可以使用这个h5支付的!目前我使用未出现什么太大的问题!如果有遇到新问题的小伙伴欢迎留言讨论!

至于h5页面支付完,页面的回调redirect_url这里尚未做研究,也欢迎小伙伴分享!

 

 

下面分享下我遇到的坑点:

起初后端是要求我发送当前设备的ip地址给他,后端通过ip比对来确认是否是同个用户,再调起h5支付等等操作,but,问题来了!我们前端目前暂时是没办法自己通过js获取到当前使用设备的ip地址,我们只能通过去请求一个接口,通过后台获取到我们设备的ip地址返回给我们,目前查到的就搜狐,腾讯开放的什么第三方获取ip的接口,如果通过该方式来获取ip,那么如果某天他们接口异常或者关闭服务器什么了,那么你就没办法正常获取ip进行相关操作了,所以这里是绝对不建议让前端去获取ip来传给后台!!!因为:这一步本来就是应该让后台大哥去处理ip获取的问题,而不是让前端去获取再传值ip,这是非常没有保障的!

 

 

那么再来说下,正常获取到后台返回的h5支付url后,我们有2种处理形式:

方式一: 如同前面demo一样,请求接口后获取到的h5支付url直接赋值给a标签(超链接),用户点击该支付按钮即可触发h5支付相关功能!

 

方式二:同样是获取到h5支付url,但是是通过window.location.href = 'h5支付url'来进行h5支付页面的跳转(这里主要针对例如:有多个按钮可点击支付的情况)

 

如果出现了其它常见错误:  请查看对应文档[常见错误文档]!这里出现的问题,一般都是找后台处理!

 

如果大家对于h5支付有遇到什么新的问题  欢迎讨论!

相关文章