前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS 解决微信h5支付无法直接返回APP的问题

iOS 解决微信h5支付无法直接返回APP的问题

作者头像
安德玛
发布2022-03-08 18:11:52
2K0
发布2022-03-08 18:11:52
举报
文章被收录于专栏:Cordova封装H5 APP

由于公司的业务需要,为了节省申请开通微信支付的时间和人力,公司决定使用微信h5支付。这样即节省了时间,同时以后所有的APP都能使用h5支付,既方便又快捷。

但是真正做的时候问题来了,当你支付成功之后或者是取消支付的时候会跳转到Safari浏览器,这就很尴尬了,完全无用户体验啊。当时看着Android可以直接返回到APP,心里瞬间不爽了。开始埋怨苹果公司了,但是由于公司的业务必须要做h5,没办法开始找办法解决。

下面开始我的坎坷之路了:

首先你在Xcode中,选择你的工程设置项,选中“TARGETS”一栏,在“info”标签栏的“LSApplicationQueriesSchemes“添加weixin

然后你通过统一下单后台会从微信拿到这么个链接https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20180115115052bedf091fba0369993002&package=2975002856给你拿到这个链接之后我们还无法直接加载webView,如果直接加载的话他会提示

进入微信查了一下,发现需要设置Referer这个请求头的参数,当然微信也给出了例子微信h5支付其他常见错误。针对于这个问题在网上搜索了一下发现有专门针对于微信h5支付设置Referer的文章iOSwebView设置Referer,在这里我给大家贴一下代码吧!

代码语言:javascript
复制
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSDictionary *headers = [request allHTTPHeaderFields];

BOOL hasReferer = [headers objectForKey:@"Referer"] != nil;

if (hasReferer) {

// .. is this my referer?

return YES;

} else {

// relaunch with a modified request dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

dispatch_async(dispatch_get_main_queue(), ^{

NSURL *url = [request URL];

NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];

[request setHTTPMethod:@"GET"];

[request setValue:@"http://www.xxx.com" forHTTPHeaderField: @"Referer"]; [self.myWebView loadRequest:request];

});

});

return NO;

}

}

这个http://www.xxx.com就是你们商户申请H5时提交的授权域名.

走到这一步,你就可以加载webView进行支付了,但是问题来了,不论是支付成功还是取消支付之后他都会跳转到Safari浏览器,而且打开的内容是就是你设置Referer时的授权域名http://www.xxx.com,这个家伙就是我们的公司的主页。

那么,怎么办呢,最后我们经过协商,只要能支付,不管支付成功或者取消支付,只要停留在微信界面就可以了,然后让用户点击右上角手动返回APP,这个是没有办法的办法了。然后Android那个哥们给我生成了一个weixin://wap/pay?prepayid%3Dwx201801151450335872c8f41a0452242290&package=122735683&noncestr=1515999038&sign=0b3590852e847b336e6f0187a0f56ab1这样的链接,这个链接是通过拦截webView访问获取的,然后我试了一下,可以支付,也停留在了微信,于是我高高兴兴的去尝试了一下

代码语言:javascript
复制
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

通过webView的代理方法来获取到这个链接,然后进行支付,发现还是一样的会跳转到Safari浏览器,当时瞬间懵逼了,怎么会这个样子呢,不信邪的我又让Android那个哥们拦截一个链接给我,尝试一下不会跳转浏览器,我又试了一下自己的拦截的链接还是会跳转到Safari浏览器。我突然明白了这个是我设置了Referer,不管是用https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20180115115052bedf091fba0369993002&package=2975002856还是拦截的weixin://wap/pay?prepayid%3Dwx201801151450335872c8f41a0452242290&package=122735683&noncestr=1515999038&sign=0b3590852e847b336e6f0187a0f56ab1进行支付都是不行的,他都会跳转到Safari。

我当时想要不用TFHpple解析HTML内容吧,但是仔细一想不行的,因为头部没有Referer,无法解析。最后实在没办法了,都准备放弃了,突然想到了设置scheme,既然我可以Safari可以打开APP,那么我这肯定也能做的。于是我又信心满满的开始我的实验了。

首先要设置scheme,假如scheme设置xxxx,那么你在Safari输入xxxx://就可以打开APP了。做到这就全部明白了,只要设置好Referer和我的scheme对应就行了,然后我开始实验:

Referer设置:http://www.xxx.com scheme设置:http://www.xxx.com发现不行

我突然间发现是不是只要是带有h5的授权的域名就可以呢,于是我把公司的一个链接www.aglhz.com/sub_property_ysq/m/html/introduction.html设置成Referer之后我发现我还是能支付的,我擦,突然之间发现了一个新的大陆啊,太激动了,然后为了确保准确性进行了各种尝试,发现只要带有域名的都可以,然后我又进行了一个尝试:就是把http://去掉直接把Referer设置成:www.xxx.com,然后也是能支付的。这样就全部OK了,我把Referer设置成:www.xxx.com://这个样式的然后把scheme设置成:www.xxx.com这样的话支付成功或者取消支付都可以直接返回到APP了。

所以h5支付最终返回APP的解决方案是:把Referer设置成:www.xxx.com:// scheme设置成:www.xxx.com就可以直接返回APP了。

当然目前还没有解决多个APP同时使用同一个授权域名时,怎么返回APP的问题,多个APP使用h5支付的话会导致返回错乱的问题,如果哪位大神知道解决办法的话可以告诉我一下,谢谢!

同样你如果有多个APP被同一家客户使用的话,客户也同意用户点击左上角手动返回的话你可以这样设置Referer: www.xxx.com/test://,这样的话你支付成功会直接停留在微信,不会造成返回APP错乱的问题。

由于本人是第一次写,可能有点啰嗦,不足之处请大家多多原谅,和指出不足之处。

由于大家都在问微信h5支付返回的问题,所以抽空写了一个demo,针对的是webVIew和WKWebVIewdemo地址。喜欢的朋友给个star。

如果有多个APP运用到h5支付的话,返回的Scheme设置是一个问题,在这里我给大家提供一篇文章,是解决多个APP返回的问题iOS实现微信外部H5支付完成后返回原APP(多APP也可实现)

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档