iOS中的支付宝，微信网页支付实现及问题详解

前言

最近一直在做游戏联运SDK，由于游戏内都是虚拟货币，因此涉及到的支付必须走内购，不然审核会被拒严重者直接下架。但是因为苹果公司30%的高额的抽成，公司决定采用网页的方式实现第三方支付，这样在审核过程中避免被扫描到支付宝跟微信的支付SDK被拒，但是在开发的过程中也是困难重重，好在经过努力一一克服，于是便有了这篇文章，希望能帮遇到同样问题的同学填一下坑

如果你遇到以下问题中的一个或多个

微信支付商家参数格式有误，请联系商家解决
微信支付完成后无法返回App
支付宝支付完成后无法返回App

恭喜你，我也遇到过，你不是一个人

一、基本支付流程

首先叙述一下网页支付基本的流程，跟原生SDK支付相差无几，根据服务器要求，传订单id，金额，时间戳等字段，后台去微信/支付宝官方下单，微信下单会返回一个url给你，直接用webview打开即可，支付宝支付会返回一个表单数据，用webview的loadData打开，此处不做过多叙述，如有问题，留言探讨

二、微信支付问题解决

1，商家参数格式有误

参数格式有误.png

出现这个问题的原因是因为未设置Referer这个请求头的参数，这个参数应该为商户申请H5时提交的授权域名，设置一下即可。假设我们的商户授权域名为www.baidu.com

如果你用的是UIWebView，直接在下面这个方法中:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSDictionary *headers = [request allHTTPHeaderFields];
    BOOL hasReferer = [headers objectForKey:@"Referer"] != nil;
    if (hasReferer) {
        return YES;
    } else {
        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 setValue:@"www.baidu.com" forHTTPHeaderField: @"Referer"];
                [self.myWebView loadRequest:request];
            });
        });
        return NO;
    }
}

如果你用的是WKWebView

你需要首先自定义一个LXUIWebView继承UIView，其次在LXUIWebView中初始化一个UIWebView，最后再实现上面shouldStartLoadWithRequest方法。
LXUIWebView的初始化放在以下方法中

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSString *url = navigationAction.request.URL.absoluteString;
    if ([url containsString:@"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?"]) {

        //这里把webView设置成一个像素点，主要是不影响操作和界面，主要的作用是设置referer
        LXUIWebView *webView = [[LXUIWebView alloc] initWithFrame:CGRectMake(0, 0, 1, 1)];

        [webView loadingURL:url withIsWebChatURL:NO];
        
        [self.view webView];

        decisionHandler(WKNavigationActionPolicyCancel);
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

2，微信支付完成后无法返回

这个时候我们可以正常的进行微信支付了，但是在支付结束后，不论成功还是失败，微信都默认打开safari，并且打开网址默认为我们前面设置的授权域名。因此，如果想回到我们App，可通过设置URL Schemes字段，让safari唤醒，这个也比较简单
首先打开设置Target -> Info -> URL Types

设置url type.png

则直接将商户域名www.baidu.com设置为URL Schemes，同时设置Referer的代码改为下面这样。将此时支付完成后，可以正常打开我们的App

[request setValue:@"www.baidu.com://" forHTTPHeaderField: @"Referer"];

如果你是单App微信支付，至此所有问题基本解决，以下微信部分内容不再涉及

多App问题：如果你是跟我一样封装SDK，给多家公司调用，假设在某个用户手机上，同时装了A跟B两个App，这两个项目都导入我们的SDK，在支付完成后，A跟B都满足safari的唤醒要求，这时会出现错乱。可以通过加子域名解决此问题。在设置URL Schemes时，改为101.www.baidu.com，同理将设置Referer的代码改为下面这样

[request setValue:@"101.www.baidu.com://" forHTTPHeaderField: @"Referer"];

三、支付宝支付问题解决

微信支付完成后都会打开safari，支付宝就更过分了，支付完成后仍然停留在支付宝，没有任何反应，只能通过点击屏幕状态栏左上角的返回某某某来实现返回，这个设计显然是反人类的，但是产品经理要求支付完成后必须回到App中，在我再三解释这是支付宝的设计缺陷无果后，我的内心毫无波动甚至有点想笑。但是没办法，毕竟吹了那么久自己是高级工程师，该解决还是要解决的

通过监听网页支付实时链接，发现打开支付宝过程中，webview加载了下图链接

alipay.png

前面alipay://显然是通过Schemes唤醒支付宝App，后面跟的几个类似参数的东西

requestType
SafePay
fromAppUrlScheme
alipays
dataString
h5_route_token
is_h5_route

猜想通过更改这几个参数中的某一个，可实现从支付完成后，回到自己的App，所以先对此url进行解码，解码得到的结果

alipay://alipayclient/?{"requestType":"SafePay","fromAppUrlScheme":"alipays","dataString":"h5_route_token="RZ134OtaBpVjK7uU2X5XAbhOgW7GBhmobilecashierRZ13"&is_h5_route="true""}

发现后面是一个json字符串，为了方便分析，我将json字符串转换成key：value的形式如下所示

参数json.png

很显然，这个fromAppUrlScheme就是支付来源，将这个参数的值替换成我们App自己的Scheme，就可以在支付宝支付完成后，成功打开我们的App。代码如下

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSString *url = navigationAction.request.URL.absoluteString;
    if ([url containsString:@"alipay://"]) {
        
        if ([url containsString:@"fromAppUrlScheme"]) {
            
            //先解码
            NSString *encodeUrl = [url stringByRemovingPercentEncoding];
            
            //取出域名后面的参数  用“？”分割的
            NSArray *urlParArry = [encodeUrl componentsSeparatedByString:@"?"];
            
            //工具类将json字符串转成字典(自行替换) 
            NSMutableDictionary *beSetParDic = [ZMSDKTools dictionaryWithJsonString:urlParArry.lastObject];

            [beSetParDic setObject:@"1001.www.baidu.com" forKey:@"fromAppUrlScheme"];

            //将替换参数之后的dic转为json字符串
            NSString *overJsonStr = [ZMSDKTools getJsonStringFromObject:beSetParDic];
            
            //拼接前面的域名
            NSString *overUrlStr = [NSString stringWithFormat:@"%@?%@",urlParArry.firstObject,overJsonStr];
            
            //编码一下
            NSString *canUseEncodeUrl = [overUrlStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
            [[UIApplication sharedApplication] openURL:[NSURL URLWithString:canUseEncodeUrl]];
            
        }
        
        decisionHandler(WKNavigationActionPolicyCancel);
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }

}

结语

支付宝，微信网页支付所遇到的问题基本解决，剩下就是在支付完成之后去服务器验证支付结果，展示给用户，此处不做过多赘述。最后，绕内购有风险，过审核需谨慎，祝我好运，祝你也是。