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

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

 

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

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

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

 

第一步：

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

 

第二步：

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

 

 

第三步：

将获取到的h5支付链接url赋值给a标签（超链接）的src，然后用户点击该按钮，就能跳转到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支付有遇到什么新的问题  欢迎讨论！