美文网首页
接入网页版微信支付

接入网页版微信支付

作者: 卞泽 | 来源:发表于2018-05-15 11:58 被阅读963次

    产品给了个需求:我们的应用需要接第三方支付(微信和支付宝)

    由于我们的APP内需要购买的是虚拟物品(比如金币,钻石等),所以苹果是不让使用第三方支付的,那怎么办嘞?

    首先,客户端的第三方支付是肯定接不了的,因为提交应用的时候,苹果会扫描代码。接了客户端版的第三方支付,后果很严重啊!

    其次,既然要接第三方支付,又不能直接使用客户端去接第三方支付。那结果就很明显了,接网页版的第三方支付。

    最后,接网页版的好啊,客户端都不需要啥工作,直接掉一个网页就搞定了,多么美好的生活啊。可惜,事与愿违!

    具体的支付代码就略过了,网上一大堆。

    问题一:网页版第三方支付如何跳转微信客户端

    UIWebView:

    不用做任何处理,能够直接调起微信客户端

    WKWebView:

    需要H5和Native交互

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(nonnull WKNavigationAction *)navigationAction decisionHandler:(nonnull void (^)(WKNavigationActionPolicy))decisionHandler
    
    {
    
        NSString *url = navigationAction.request.URL.absoluteString;
    
        // WKWebView 处理特殊标签方法
    
        if ([url hasPrefix:@"weixin://"]) {
    
            decisionHandler(WKNavigationActionPolicyCancel);
    
            [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]];
    
        }
    
    }
    

    问题二:支付成后如何返回APP

    这一步比较麻烦。不管是UIWebView还是WKWebView,支付成功或失败时都是返回safari的一个页面。不会直接返回APP。

    这里参考

    可能是遇到的情况不同吧,按照参考链接的步骤并没有解决我的问题,还是不能跳转到APP。但是这也给了我一下参考。

    创建一个UIWebView的子类

    .h
    
    #import <UIKit/UIKit.h>
    
    @interface TDWeChatPayH5View : UIView
    
    - (void)loadingURL:(NSString *)url;
    
    @end
    
    .m
    
    #import "TDWeChatPayH5View.h"
    
    @interface TDWeChatPayH5View ()<UIWebViewDelegate>
    
    @property (strong, nonatomic) UIWebView *myWebView;
    
    @end
    
    @implementation TDWeChatPayH5View
    
    - (instancetype)initWithFrame:(CGRect)frame
    
    {
    
        self = [super initWithFrame:frame];
    
        if (self) {
    
            self.myWebView = [[UIWebView alloc] initWithFrame:self.frame];
    
            self.myWebView.delegate = self;
    
            [self addSubview:self.myWebView];
    
        }
    
        return self;
    
    }
    
    - (void)loadingURL:(NSString *)url
    
    {
    
        NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    
        [self.myWebView loadRequest:request];
    
    }
    
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    
    {
    
        NSURL *url = [request URL];
    
        NSString *newUrl = url.absoluteString;
    
        NSMutableURLRequest* newRequest = [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0];
    
        if ([newUrl hasPrefix:@"weixin://"]) {
    
            self.myWebView = nil;
    
            UIWebView *web = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 1, 1)];
    
            [self addSubview:web];
    
            [web loadRequest:newRequest];
    
            return YES;
    
        }
    
        return YES;
    
    }
    
    - (void)webViewDidFinishLoad:(UIWebView *)webView
    
    {
    
        [self removeFromSuperview];
    
    }
    
    - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
    
    {
    
        [self removeFromSuperview];
    
    }
    
    @end
    

    1.然后在微信支付页面拦截URL进行处理

    // WKWebView

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(nonnull WKNavigationAction *)navigationAction decisionHandler:(nonnull void (^)(WKNavigationActionPolicy))decisionHandler
    
    {
    
        NSString *url = navigationAction.request.URL.absoluteString;
    
        if ([url hasPrefix:@"weixin://"]) {
    
            decisionHandler(WKNavigationActionPolicyCancel);
    
            TDWeChatPayH5View *h5View = [[TDWeChatPayH5View alloc] initWithFrame:CGRectMake(0, 0, 1, 1)];
    
            [h5View loadingURL:url];
    
            [self.view addSubview:h5View];
    
        }
    
    }
    

    2.info.plist文件修改

    在 URL types中添加

    <key>CFBundleURLTypes</key>
    
    <array>
    
        <dict>
    
            <key>CFBundleURLName</key>
    
            <string>com.xxx.xxx</string>
    
            <key>CFBundleURLSchemes</key>
    
            <array>
    
                <string>[www.test.com](http://www.test.com)</string>
    
            </array>
    
        </dict>
    
    </array>
    

    这里的string是自己定义的,随便填写。但是CFBundleURLSchemes对应的xxx.xxx.com必须是域名形式,而且此域名需要在微信支付平台提前填写好的。

    3.服务端修改内容

    redirect_url = @"[www.test.com://](www.test.com://)";
    

    相信大家都懂这个意思。我们在safari中输入www.test.com://可以打开我们的应用,前提是在info.plist配置了相应的信息。

    这样我们就可以返回APP了。

    问题三:返回应用后如何通知用户购买成功或失败

    问题又来了,既然是H5支付,那么如何通知用户购买成功或失败呢?

    // WKWebView

    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(nonnull WKNavigationAction *)navigationAction decisionHandler:(nonnull void (^)(WKNavigationActionPolicy))decisionHandler
    
    {
    
        // WKWebView 处理特殊标签方法
    
        NSString *url = navigationAction.request.URL.absoluteString;
    
        if ([url hasPrefix:@"weixin://"]) {
    
            decisionHandler(WKNavigationActionPolicyCancel);
    
            TDWeChatPayH5View *h5View = [[TDWeChatPayH5View alloc] initWithFrame:CGRectMake(0, 0, 1, 1)];
    
            [h5View loadingURL:url];
    
            [self.view addSubview:h5View];
    
        }else if ([url hasPrefix:@"[www.test.com://](www.test.com://)"]) {
    
            decisionHandler(WKNavigationActionPolicyCancel);
    
            // 上面提到我们需要服务端配置redirect_url = @"[www.test.com://](www.test.com://)"。这里在双斜杠后面我们可以加上查询返回结果的H5页面,H5页面需要的订单号信息由服务端一起配置好。
    
            NSString *payResultUrl = [url substringFromIndex:15];
    
            _linkUrl = [NSString stringWithFormat:@"%@%@",URLHEADER,payResultUrl];
    
            //  配置好完整的结果查询链接,有服务端根据订单号查询结果,并显示页面。
    
            [self loadRequest];
    
        }
    
    微信支付的官方文档中提到:如果在微信客户端停留超过5秒,就会主动调用redirect_url的返回链接。这就会造成还没有支付成功,就调用了结果页。所以我们不要直接配置结果页,而是配置一个结果查询页面,提供查询按钮,让用户返回应用后主动去查询结果。

    问题四:如何使苹果支付和第三方支付共存

    这里我们采取的是采用同一个链接的方式。即支付页面链接不变,由服务端控制显示苹果支付还是微信支付。

    具体的实现需要WKWebView与js交互。

    相关文章

      网友评论

          本文标题:接入网页版微信支付

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