美文网首页
iOS集成支付宝H5支付实现跳转与回调的解决方案

iOS集成支付宝H5支付实现跳转与回调的解决方案

作者: CoderLGL | 来源:发表于2019-12-13 16:57 被阅读0次

前言

由于不能在iOS客户端内集成支付宝和微信的App支付SDK(为了防苹果审核检测SDK),因此使用H5支付,虽然微信和支付宝的H5支付文档都说不要在App内使用H5支付而是使用App支付,但办法总是有的。

这篇讲的是支付宝H5支付如何从App跳转支付宝以及如何从支付宝跳转回App,微信支付的见这篇:

iOS集成H5微信支付实现跳转与回调的解决方案

实现的效果是:App→支付宝→支付(成功失败或取消)→App

前置准备

准备时大家需要看下官方文档: 支付宝手机网站支付产品介绍
本项目使用WKWebView,前置动作是后端小伙伴已经处理好支付宝H5支付下单流程,客户端接收到下单链接后的操作。

操作步骤

1. 添加 URL Scheme 并把支付宝加入白名单

URL Scheme

添加 URL Scheme。在 xcodeproj 文件 Info选项卡最下面的URL Types内设置。 该 URL Scheme不像微信支付因为要校验必须设置商户后台填的一级域名,支付宝的这个可以任意设置。

把支付宝加入白名单

把支付宝的 URL Scheme alipayalipays 填入项目的白名单。在xcodeproj文件 Info选项卡内的Custom iOS Target PropertiesLSApplicationQueriesSchemes 里添加上述两个字符串,若没有LSApplicationQueriesSchemes 就手动输入添加,类型为数组 Array

2. WKWebView加载链接

添加协议 WKNavigationDelegateWKUIDelegate

创建一个WKWebView,并加载统一下单链接。

- (void)buildWKWebView {
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.width, self.view.height)];
    [self.view addSubview:webView];
    webView.navigationDelegate = self;
    webView.UIDelegate = self;
    NSURL *payURL = [NSURL URLWithString:self.payString];
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:payURL];
    [webView loadRequest:request];
}

然后你会发现出来这个页面


支付宝支付

这时就需要我们拦截web里的下单链接跳转到支付宝

3. 实现代理方法拦截链接并跳转支付宝

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

    if ([navigationAction.request.URL.scheme isEqualToString:@"alipay"]) {
        //  1.以?号来切割字符串
        NSArray *urlBaseArr = [navigationAction.request.URL.absoluteString componentsSeparatedByString:@"?"];
        NSString *urlBaseStr = urlBaseArr.firstObject;
        NSString *urlNeedDecode = urlBaseArr.lastObject;
        //  2.将截取以后的Str,做一下URLDecode,方便我们处理数据
        NSMutableString *afterDecodeStr = [NSMutableString stringWithString:[self decoderUrlEncodeStr:urlNeedDecode]];
        //  3.替换里面的默认Scheme为自己的Scheme
        NSString *afterHandleStr = [afterDecodeStr stringByReplacingOccurrencesOfString:@"alipays" withString:@"alipayreturn.company.com"];
        //  4.然后把处理后的,和最开始切割的做下拼接,就得到了最终的字符串
        NSString *finalStr = [NSString stringWithFormat:@"%@?%@",urlBaseStr, [self urlEncodeStr:afterHandleStr]];
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            //  判断一下,是否安装了支付宝APP(也就是看看能不能打开这个URL)
            if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:finalStr]]) {
                [[UIApplication sharedApplication] openURL:[NSURL URLWithString:finalStr]];
            } else {
                //未安装支付宝, 自行处理
            }
        });
        
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

顺便附带一下 URL 的 Encode 和 Decode 方法。

//urlEncode编码
- (NSString *)urlEncodeStr:(NSString *)input {
    NSString *charactersToEscape = @"?!@#$^&%*+,:;='\"`<>()[]{}/\\| ";
    NSCharacterSet *allowedCharacters = [[NSCharacterSet characterSetWithCharactersInString:charactersToEscape] invertedSet];
    NSString *upSign = [input stringByAddingPercentEncodingWithAllowedCharacters:allowedCharacters];
    return upSign;
}
//urlEncode解码
- (NSString *)decoderUrlEncodeStr: (NSString *) input {
    NSMutableString *outputStr = [NSMutableString stringWithString:input];
    [outputStr replaceOccurrencesOfString:@"+" withString:@"" options:NSLiteralSearch range:NSMakeRange(0,[outputStr length])];
    return [outputStr stringByRemovingPercentEncoding];
}

4. AppDelegate 中接收跳转回调

当然你也不一定需要在AppDelegate里接收返回动作,也可以直接返回支付界面,自行操作后续逻辑。

以下是AppDelegate接收返回动作的示例。

其中支付宝回调的 host 是固定的 safepay,而微信支付的 host 随意定义。

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options{
    //safepay是支付宝H5支付的回调host, 
    if ([url.host isEqualToString:@"wxpaycallback"] || [url.host isEqualToString:@"safepay"]) {
       
    }
}

参考: https://paaatrick.com/2019-03-22-ios-alipay-h5-solution/

相关文章

网友评论

      本文标题:iOS集成支付宝H5支付实现跳转与回调的解决方案

      本文链接:https://www.haomeiwen.com/subject/manfnctx.html