app中使用h5支付

因为苹果爸爸的各种封锁与限制,导致 app 中如果集成支付sdk上架会变得十分困难,总之是想办法去抽成。为了应对这种流氓政策,各小 app 公司纷纷偷梁换柱,通过 h5 支付从而绕开 sdk 支付。

常规的什么申请秘钥,配置回调地址等操作全部忽略了,直接进入核心步骤

支付宝支付

使用支付宝 h5 支付

支付宝的 h5 支付,返回一个 http 链接,是可以直接在 webview 中使用的,url 会重定向最终指向到支付宝的专属协议上。这里建议直接在 app 上直接通过 new webview 方式实现。

微信支付

使用微信 h5 支付

通过微信 h5 支付也是可以生成支付链接的,如果我们直接使用这个 url 的话,一定会抛一个错误“商家参数格式有误,请联系商家解决”,微信支付的错误解决方案中已经给出了原因,微信在这里校验了 http 请求中的 referer ,我们直接打开 url 请求头中是没有 referer 字段的,最容易想到的是通过 html 中的 a 标签跳转页面,a 标签会默认携带当前页面的主机地址。

使用中转页面

所以就写了一个简单的中转页面,逻辑很简单,在中转链接中添加一个 pay_url 字段,pay_url 就是微信 h5 支付生成的链接,需要进行 encode 编码一下,我们可以在 js 里面重新解码,设置 a 标签的 href 熟悉,执行点击进行跳转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<title>正在支付</title>
</head>
<body>
正在支付。。。
<a id="a"></a>
<script type="text/javascript">

function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}

var payUrl=getQueryVariable('pay_url')
var decodePayUrl=decodeURIComponent(payUrl)

console.log(payUrl)
console.log(decodePayUrl)

document.getElementById('a').setAttribute('href',decodePayUrl)
document.getElementById('a').click();
</script>
</body>
</html>

挂载中转网页

找个服务器或者 oss 将页面放过去,配置一个域名,因为微信的 h5 支付是绑定了一个主域名,二级域名其实都是可以使用,假如最终配置为pay.abc.com,那么我们最终的跳转链接为 http://pay.abc.com?pay_url=http://wechatpay.com?xxxxxx。

小结

不管是微信支付还是支付宝支付,其实想从浏览器唤醒支付 app,都是通过特有 schema 唤醒的,支付宝的协议是 alipay://,微信的协议是 weixin://,其实和 http 协议一样,例如:http://baidu.com ,浏览器会捕获 http 协议,支付宝和微信都会捕获属于自己的协议,这一点不管在 android 还是 ios 上,也正是利用了这一点,才使我们 app 中唤醒支付宝或者微信成为可能。当然后面很可能也被限制,在将来相当长的一段时间是不会的,正是这些协议使得 h5 和 app 进行交互才使得如今移动操作系统更加繁荣。

参考文档

坚持原创技术分享,您的支持将鼓励我继续创作!