IOS WKWebView H5支付打开支付宝/微信客户端

近期公司项目中的App使用WKWebView封装作为一个壳,加载web的网页,其中的支付使用的是H5支付,在APP中需要调起微信和支付客户端进行支付,过程中遇到了一些问题,好在通过查找资料找到了以下解决方案,这里来记录下
一、支付宝
找了下支付宝的开发文档,发现支付宝自己其实已经做了手机网站支付转Native支付的接口,使用很方便,直接按照开发文档接入即可,这里是开发文档的连接 手机网站支付转Native支付(下面我大概引用下集成流程)
iOS接入说明(先下载支付的SDK下载Demo)
配置
步骤1:启动Xcode,把iOS包中的压缩文件中以下文件拷贝到项目文件夹下,并导入到项目工程中。
AlipaySDK.bundle
AlipaySDK.framework
在Build Phases选项卡的Link Binary With Libraries中,增加以下依赖:
其中,需要注意的是:
如果是Xcode 7.0之后的版本,需要添加libc++.tbd、libz.tbd;
如果是Xcode 7.0之前的版本,需要添加libc++.dylib、libz.dylib(如下图)。

步骤2:在需要调用AlipaySDK的文件中,增加头文件引用。

import

步骤3:配置支付宝客户端返回url处理方法。
(外部存在支付包钱包,支付宝钱包将处理结果通过url返回。)
如示例AliSDKDemo\APAppDelegate.m文件中,增加引用代码:

import

在@implementation AppDelegate中增加如下代码:

-  (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
//如果极简开发包不可用,会跳转支付宝钱包进行支付,需要将支付宝钱包的支付结果回传给开发包
if ([url.host isEqualToString:@"safepay"]) {
    [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) {
//【由于在跳转支付宝客户端支付的过程中,商户app在后台很可能被系统kill了,所以pay接口的callback就会失效,请商户对standbyCallback返回的回调结果进行处理,就是在这个方法里面处理跟callback一样的逻辑】
        NSLog(@"result = %@",resultDic);
    }];
}
if ([url.host isEqualToString:@"platformapi"]){//支付宝钱包快登授权返回authCode
    [[AlipaySDK defaultService] processAuthResult:url standbyCallback:^(NSDictionary *resultDic) {
        //【由于在跳转支付宝客户端支付的过程中,商户app在后台很可能被系统kill了,所以pay接口的callback就会失效,请商户对standbyCallback返回的回调结果进行处理,就是在这个方法里面处理跟callback一样的逻辑】
        NSLog(@"result = %@",resultDic);
    }];
}
return YES;
}

接口调用说明

本SDK提供的所有接口均定义在AlipaySDK.h中。

SDK中提供了若干接口,手机网站转Native支付只用到其中一部分,本文未提到的接口无需关注。

如何调用提供的接口?
APP支付最新版本 15.4.0 新增拦截+支付二合一接口(payInterceptorWithUrl...),该接口将原来的获取H5支付订单信息接口和支付接口进行了合并。
接口的调用方式是先调用defaultService获取SDK的实例,然后再调用单独提供的功能接口,以payInterceptorWithUrl为例:
[[AlipaySDK defaultService] payInterceptorWithUrl:url fromScheme:scheme callback:^(NSDictionary result) {
// 处理支付结果
NSLog(@"%@", result);
}];
如何实现手机网站转APP支付?
步骤一: 实现UIWebViewDelegate协议,拦截H5的URL;
步骤二: 调用新增拦截+支付二合一接口(payInterceptorWithUrl...)进行URL拦截及支付转化;具体参照如下接口说明。
拦截+支付二合一接口
接口原型
/
*

  • 支付宝H5支付URL拦截器,完成拦截及支付方式转化
  • @param urlStr 待过滤拦截的 url string
  • @param schemeStr 调用支付的app注册在info.plist中的scheme
  • @param compltionBlock 支付结果回调Block
  • @return YES:表示URL为支付宝支付URL,URL已经被拦截转化;NO:表示URL非支付宝支付URL;
    */
  • (BOOL)payInterceptorWithUrl:(NSString *)urlStr
    fromScheme:(NSString *)schemeStr callback:(CompletionBlock)completionBlock;

接口功能
本接口首先是个拦截器,拦截支付宝H5支付URL;其次是个支付方式转化器,将手机网站支付方式转化为APP支付方式。
参数说明
参数名称类型说明
urlStrNSString *手机网站支付的请求URL
schemeStrNSString *接入方App注册的URL scheme,供支付完成后跳回接入方App
completionBlockobjc(^CompletionBlock)(NSDictionary *resultDic)支付结束之后的回调其中CompletionBlock定义如下:objctypedef void(^CompletionBlock)(NSDictionary *resultDic);

同步拦截结果返回值说明
返回值类型说明
BOOL1.如果urlStr是有效的支付宝H5支付URL,则说明拦截转化成功,返回YES,商户容器无需再加载该URL;
2.如果是无效的,则返回NO,商户容器需要继续加载该URL。

异步支付结果返回值说明
支付结束后SDK将回调completionBlock,并将支付结果resultDic(NSDictionary *类型)作为参数传入该Block。resultDic中主要包含两个字段,如下所示:

参数名称类型说明
resultCodeNSString *返回码,标识支付状态,含义如下:
9000——订单支付成功
8000——正在处理中
4000——订单支付失败
5000——重复请求
6001——用户中途取消
6002——网络连接出错
returnUrlNSString *支付结束后应当跳转的url地址

接口使用方式
调用本接口对支付宝支付URL进行拦截和支付转化。
当接口调用完成后,该接口会返回一个BOOL类型的同步拦截结果,如果同步结果返回值为YES,说明传入的URL为支付宝支付URL,支付宝SDK已经成功拦截该URL,并转化为APP支付方式,商户容器无需再加载该URL;如果返回值为NO,说明传入的URL并非支付宝支付URL,商户容器需要继续加载该URL;

当支付结束后,会通过回调的方式返回异步支付结果,如果返回的支付结果中的resultCode为9000,则表示支付成功,接入方可以提示用户支付成功;如果返回结果不是9000,无需做任何处理。当返回的returnUrl不为空,建议接入方跳转到该returnUrl。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{ 
__weak APWebViewController* wself = self;
BOOL isIntercepted = [[AlipaySDK defaultService] payInterceptorWithUrl:[request.URL absoluteString] fromScheme:@"alisdkdemo" callback:^(NSDictionary *result) {
    // 处理支付结果
    NSLog(@"%@", result);
    // isProcessUrlPay 代表 支付宝已经处理该URL
    if ([result[@"isProcessUrlPay"] boolValue]) {
        // returnUrl 代表 第三方App需要跳转的成功页URL
        NSString* urlStr = result[@"returnUrl"];
        [wself loadWithUrlStr:urlStr];
    }
}];
if (isIntercepted) {
    return NO;
}
return YES;
}

上面是使用UIWebView的回调写法,下面是我使用的WKWebView的代码:

-   (void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{
    __weakWebViewController* wself = self;
    BOOL isIntercepted = [[AlipaySDK defaultService] payInterceptorWithUrl:[navigationAction.request.URL absoluteString] fromScheme:@"PuHuiAlipay" callback:^(NSDictionary *result) {
      // 处理支付结果
      NSLog(@"%@", result);
      // isProcessUrlPay 代表 支付宝已经处理该URL
      if ([result[@"isProcessUrlPay"]boolValue]) {
          NSString*resultCode = result[@"resultCode"];
          // returnUrl 代表 第三方App需要跳转的成功页URL
          NSString* urlStr = result[@"returnUrl"];
          if ([resultCodeisEqual:@"6001"]) {//当不是取消支付的时候,重新加载支付前的页面
              urlStr = self.URLString;
              [wself toast:@"取消支付了"];
          }else {
              if (urlStr.length==0) {
                  urlStr = [NSString stringWithFormat:@"http://huigong.jmzgo.com/weibojie/payResult.aspx?OrderID=%@",_wbjOrderID];
             }
          }
          [wselfloadWithUrlStr:urlStr];
      }
    }];
    if (isIntercepted) {
       actionPolicy =WKNavigationActionPolicyCancel;
  }
    decisionHandler(actionPolicy);
}

二、微信支付

微信支付目前使用的下面的方法跳转到微信客户端进行支付,做法在WKWebView的回调中拦截URL,然后使用openURL的方式,代码如下:

- (void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{

WKNavigationActionPolicy actionPolicy = WKNavigationActionPolicyAllow; NSString*urlString = [[navigationAction.requestURL]absoluteString];

urlString = [urlStringstringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];    if ([urlStringcontainsString:@"weixin://wap/pay?"]) {
    actionPolicy =WKNavigationActionPolicyCancel;
    //解决wkwebview weixin://无法打开微信客户端的处理
    NSURL*url = [NSURLURLWithString:urlString];
    if ([[UIApplicationsharedApplication]respondsToSelector:@selector(openURL:options:completionHandler:)]) {
        [[UIApplication sharedApplication] openURL:url options:@{UIApplicationOpenURLOptionUniversalLinksOnly: @NO} completionHandler:^(BOOL success) {   }];
    } else {
        [[UIApplicationsharedApplication]openURL:webView.URL];
    }
}
}
//这句是必须加上的,不然会异常
decisionHandler(actionPolicy);
}

上面的方法有个问题,微信支付完或者取消的时候会跳转是Safari浏览器,没办法直接返回到APP端,这个问题一直没办法很好的解决,所以我的做法是在我们的支付结果页中加了一个返回APP的按钮,这样在Safari中加载支付结果页的时候,在页面中通过Scheme可以打开我们的APP

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容