WKWebView对接h5微信与支付宝支付

本文需要解决的三个问题

1.打开微信支付
2.微信支付后，无法跳转回APP
3.打开支付宝支付

遗留问题

1.本文只做了调起支付与返回app的逻辑没有处理支付完成后的逻辑。
1.支付宝支付跳转订单结果页的逻辑未处理。

设置schemes

1.在项目的Info.plist中添加一个URL Schemes（用于跳回我们项目）
2.cm.manniuhealth.com【manniuhealth.com这个域名必须和 微信H5商家后台提交的授权域名一致，不然会报[商家参数格式有误，请联系商家解决]，cm 为前缀，可任意填写】

截屏2021-04-09 下午2.34.04.png

支付有关的全部代码

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
//微信支付后，无法跳转回APP【解决问题2】
    NSURLRequest *request = navigationAction.request;
    NSString *absoluteString = [navigationAction.request.URL.absoluteString stringByRemovingPercentEncoding];
    
    // 拦截WKWebView加载的微信支付统一下单链接, 将redirect_url参数修改为唤起自己App的URLScheme
    if ([absoluteString hasPrefix:@"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb"] && ![absoluteString containsString:[NSString stringWithFormat:@"redirect_url=cm.manniuhealth.com://"]]&&!self.isOpenWxPay) {
        decisionHandler(WKNavigationActionPolicyCancel);
        NSString *redirectUrl = nil;

        if ([absoluteString containsString:@"redirect_url="]) {
            NSRange redirectRange = [absoluteString rangeOfString:@"redirect_url"];
            self.WxPayOrderResultUrl = [absoluteString substringFromIndex:redirectRange.location+13];

            redirectUrl = [[absoluteString substringToIndex:redirectRange.location] stringByAppendingString:[NSString stringWithFormat:@"redirect_url=cm.manniuhealth.com://"]];

        } else {
            redirectUrl = [absoluteString stringByAppendingString:[NSString stringWithFormat:@"redirect_url=cm.manniuhealth.com://"]];
        }
        NSMutableURLRequest *newRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:redirectUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30];
        newRequest.allHTTPHeaderFields = request.allHTTPHeaderFields;

        NSLog(@"处理前的支付链接---%@",absoluteString);
        NSLog(@"处理后的支付链接---%@",redirectUrl);
        newRequest.URL = [NSURL URLWithString:redirectUrl];
        [webView loadRequest:newRequest];
        return;
    }else{
//微信支付完成后，跳转入订单结果页
        if (self.isOpenWxPay) {
            
            NSMutableURLRequest *orderResultRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:self.WxPayOrderResultUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30];
            orderResultRequest.allHTTPHeaderFields = request.allHTTPHeaderFields;
            orderResultRequest.URL = [NSURL URLWithString:self.WxPayOrderResultUrl];
            [webView loadRequest:orderResultRequest];
            
            decisionHandler(WKNavigationActionPolicyAllow);
            
            self.isOpenWxPay = false;
            return;
        }
        
    }
//打开微信支付【解决问题1】
    if ([navigationAction.request.URL.scheme isEqualToString:@"weixin"]) {
        NSLog(@"处理后的支付链接--跳转微信支付---%@",navigationAction.request.URL.absoluteString);
        self.isOpenWxPay = true;
        // 2.微信支付
        [[UIApplication sharedApplication] openURL:navigationAction.request.URL options:@{} completionHandler:nil];
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    //打开支付宝支付【解决问题3】
     if ([navigationAction.request.URL.host isEqualToString:@"mclient.alipay.com"]) {
            // 1.支付宝支付
            [[AlipaySDK defaultService] payInterceptorWithUrl:navigationAction.request.URL.absoluteString fromScheme:@"CMPatientZFB" callback:^(NSDictionary *resultDic) {
                // 支付成功或者失败的 回调处理
            }];
    
          decisionHandler(WKNavigationActionPolicyCancel);
            return;
      }
    decisionHandler(WKNavigationActionPolicyAllow);

}

处理微信支付的返回逻辑

因为微信h5支付有个weixin重定向中间页，不处理的话，从订单结果页返回到weixin中间页时，会再次调起微信支付。

//返回按钮事件-多层h5跳转后的判断
-(void)leftBackBtnAction{
    
    if ([self.bgWebView canGoBack]) {
        
        YuToolNSLog(@"backListURL数组---%ld",self.bgWebView.backForwardList.backList.count);
        YuToolNSLog(@"forwardListURL数组---%ld",self.bgWebView.backForwardList.forwardList.count);
        
        BOOL isWxpay = false;
        BOOL isAppointmentResult = false;
      
        for (int i=0; i<self.bgWebView.backForwardList.backList.count; i++) {
            
            WKBackForwardListItem * item = self.bgWebView.backForwardList.backList[i];
            NSLog(@"h5页面栈---%@",item.URL);
            if ([item.URL.absoluteString containsString:@"https://wx.tenpay.com"]) {
                isWxpay = true;
            }
            if ([item.URL.absoluteString containsString:@"redirect_url=cm.manniuhealth.com"]) {
                isAppointmentResult = true;
            }
            
            if (isWxpay&&isAppointmentResult) {
               if (self.bgWebView.backForwardList.backList.count>=2) {
                    WKBackForwardListItem * itemBack = self.bgWebView.backForwardList.backList[self.bgWebView.backForwardList.backList.count-2];
                    [self.bgWebView goToBackForwardListItem:itemBack];
                }else{
                    [self.navigationController popViewControllerAnimated:YES];
                }
                
                return;
            }
        }
        
        //如果有则返回
        [self.bgWebView goBack];
        
    } else {
        
        [self.navigationController popViewControllerAnimated:YES];
    }
}

处理前的支付链接

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx09141320308058d028ca6427cebcd60000&package=2761507236&redirect_url=https://member-test.manniuhealth.com/h5-appointment/appointmentResult?orderId=84044138093326399&isShow=true&order_no=CCPE84044148715630621&amount=3000&channel=wechat_wap&txnmode=1

处理后的支付链接

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx09141320308058d028ca6427cebcd60000&package=2761507236&redirect_url=cm.manniuhealth.com://

解释

必须为格式 cm.manniuhealth.com:// 用来解决微信支付后，无法回到app的问题，如何配置在文章开头

redirect_url=https://member-test.manniuhealth.com/h5-appointment/appointmentResult?orderId=84044138093326399&isShow=true&order_no=CCPE84044148715630621&amount=3000&channel=wechat_wap&txnmode=1后跟的是订单结果页，支付调起后，回到app时需要跳转该页面