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

2024-05-08 17:34:13

最近做了一个跟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支付有遇到什么新的问题欢迎讨论！

h5支付——前端需要处理什么？相关推荐

小程序支付及H5支付前端代码小结
小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...
微信h5支付前端代码
更加准确的描述点击如下链接 https://www.cnblogs.com/dandan1924/p/8359620.html 一.首先,需要确认是否在微信开通了这个服务,如果开通了,如下图二.就是 ...
Node.js实现支付宝H5支付
1. 创建支付应用 1.1.根据需要选择接口类型,这里选择支付应用. 1.2.选择使用环境 1.3.签约当面付(线下支付) 2. 使用alipay-sdk 2.1. 引入服务端 ...
微信H5支付实战踩坑
准备需求需求就是最简单的对接微信H5支付接口方案心路历程之前直接用http对接过,不过这次想用官方提供的SDK 一方面SDK提供的接口比较完整,二方面感觉应该使用别人辛苦写下来的封装百度了一 ...
h5封装去底部_干货分享 | 一步一步教你在SpringBoot中集成微信支付H5支付
一:开发文档场景介绍 H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付. 主要用于触屏版的手机浏览器请求微信支付的场景. ...
支付宝新版SDK-PC扫码支付-手机浏览器H5支付
一.前言支付宝支付-沙箱环境使用支付宝新版SDK-PC端扫码支付 + 手机浏览器H5支付「本文」 PC端扫码支付,其实就是就是电脑网站支付,本文基于支付宝沙箱环境,不了解的可以看一下上边的链接. ...
微信支付—微信H5支付「非微信内部浏览器-QQ/UC浏览器等」
前言微信支付-微信H5外部浏览器支付「本文」微信H5内部浏览器支付「待写」 PC端扫码支付「待写」一直计划着写一写微信支付相关的文章,希望能加深一下自己的印象,拖了一天又一天- 最近终于空出时间 ...
Android WebView 调起H5支付，提示商家参数格式有误
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息精通点的可以查看这里精述 Flutter 从入门实践到开发一个APP之UI基础篇视频 flutter从入 ...
微信公众号H5支付遇到的那些坑
简史官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...

最新文章

热门文章