微信h5支付遇到的问题

牙膏
3,165 阅读4分钟

在第三方sdk体验很好的情况下为毛要对接h5支付呢？主要是可以让用户降低充值的门槛，毕竟浏览器肯定还是有的，还有一个就是ios的原因。

这次主要还是描述一下遇到的一些问题，毕竟后端的同学已经做了很多的处理，这边只是需要调用接口就可以了，还有就是微信有很完善的文档，很多问题其实都能在文件得到解决方案

要求

  1. 在页面支付完成之后需要查询结果
  2. 在调起支付的时候，不要刷新页面（体验问题）

问题

referer丢失的问题

在我们拿到微信的payurl之后，用

location.href = payurl

去调起微信支付的是,发现andorid不行，anroid的referer丢失了，这android是可以解决的，但是旧版依然会有问题,然后找到了另外一种方式

let iframe = document.createElement('iframe');
iframe.src = 'payurl';
document.body.appendChild(iframe);
setTimeout(()=>{
    document.body.removeChild(iframe);
},3000)

用iframe的形式发现可以解决：

  • android referer丢失的问题
  • 当前页面不需要刷新，体验自我感觉良好

iframe有referrerPolicy这个属性，该属性定义了在获取资源时发送的引用者,具体文档

接着又发现了问题，ios12.4的机子，iframe无法调起微信支付(奔溃

因为刚好这个页面是在自己的app的内嵌页，然后app也有javascriptBridge（以下简称jsb）可以打开一个弹窗webview，那么脑洞就来了（另一个大佬的点子），通过jsb去让原生打开一个webview（不可见，透明）然后去打开一个中转页面，接着去调起微信支付

//h5支付绑定的是 aaa.com
jsb(`https://aaa.com/static/function/xxx.html?open=${encodeURIComponent(payurl)}`);

//xxx.html
window.location.href = open;

正常来说其实 只需要页面去访问payurl就好了，但是不想页面刷新。

说明:以上是在app内嵌页里面使用，所以有jsb的方式，也可以保证了浏览器的统一，所以没那么兼容问题；

后面需要做一个页面是给用户在普通浏览器打开的，就又遇到了问题了；

兼容问题，在qq浏览器，uc浏览器，safari，android默认浏览器，发现有些可以通过iframe调起微信，有些不行。例如：

safari

//方案一,类似上面的做法，打开一个新窗口

window.open(payurl);

//发现无效，然后去查了一些文档，看到了一种解决方法
//在 window.open();调用成功了之后，会返回一个新窗口的应用，可以通过改变locationl来调起微信支付
element.click = ()=>{
    let newWin = window.open();
    getPayurl().then((payUrl)=>{
        newWin.location = payUrl;
        //3秒后关闭新窗口
        setTimeout(()=>{
            newWin.close();
        },3000)
    })
}
/*
注意点：
1.需要有交互去调用window.open
2.newWin.location的赋值需要异步。这里不知道是不是需要在新的窗口打开之后，才会返回window的对象去给location赋值。
*/

safari的问题解决了，还有千千万万个safari，因为是需要在外部浏览器打开的，如果要兼容好这些浏览器的话，估计得挂在这了，放弃了，用最终的方案

直接用最最最普通的方式

window.location = "payUrl"

直接忽略“要求”的第二点，至于结果的查询，用微信支付的return_uri+cookie来去实现。

=========================

20190816更新

发现在部分安卓的机子上面调不起微信h5支付，而且是必现。在跟客户端的同事看了app的log之后，发现有以下错误信息

2019-07-24 15:30:47.924 25083-25122/ D/WebView: LWebView X5ChromeWebClient onConsoleMessage lineNumber:64, message:Uncaught SecurityError: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'weixin://wap/pay?prepayid%3Dwx241530497040689dd1394a4f1296524900&package=3510274145&noncestr=1563953450&sign=7867a2dd7feb974db9285725cb2822d0'.

  • X5ChromeWebClient
  • does not have permission to navigate the target frame

大概意思是没有权限去设置href去访问对应的页面，而这个动作其实是在iframe里面的动作来的，可能涉及到安全问题。在网上查了一些对于的报错信息之后，发现问题的关键是

解决方式：

添加iframe 属性 sandbox="allow-scripts allow-top-navigation allow-same-origin"

avatar
文章
阅读
粉丝