In fact, wechat payment is often contacted in daily development, but there are more or less pit in the H5 jump problem, among which the most difficult problem is to return to the App after payment, and return to the App to solve the blank screen. This time use Swift: WKWebview OC and WebView

Recommended reading time: 10 minutes

  • Problem analysis

    The normal H5 payment process is as follows

    Follow the above payment process will appear App -> wechat -> Pay -> Click Finish -> Safari access redirect_URL set URL, this process is actually a little bad user experience, We expect App -> wechat -> Pay -> Click Finish -> App to access redirect_URL set URL

    Problem analysis to the above has been very clear, nothing more than interception processing, the following to talk about the specific implementation.

  • Problem analysis

    According to the above analysis, the solution should be very clear

    Intercept request

    First intercept payment request intercept in decidePolicyFor callback string: https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb if contains the link to do the following treatment, The isload variable controls whether the redirect_URL parameter was not modified for the first time to prevent repeated requests

    if urlString? .range(of: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb") ! = nil && ! self.isload{ if let mUrlStr = urlString{ let array : Array = mUrlStr.components(separatedBy: "redirect_url=") self.redirect_url = array[1] let rs = "\(WXH5SchemeURL)://".urlEncoded() let mNewUrl = array[0] + "redirect_url=\(rs)" let newURLS = URL(string: mNewUrl) var mRequest = URLRequest.init(url: newURLS! , cachePolicy: .useProtocolCachePolicy, timeoutInterval: 60) mRequest.setValue("\(WXH5SchemeURL)://", forHTTPHeaderField: "Referer") webView.load(mRequest) self.isload = true decisionHandler(.cancel) return } } self.isload = false decisionHandler(.allow) }Copy the code

    Intercept weixin: / / wap/pay? Open the WeChat

    if urlString? .range(of: "weixin://wap/pay?" )! = nil{ if let mUrlStr = urlString{ let openWX = URL(string: mUrlStr) if (UIApplication.shared.canOpenURL(openWX!) #) {if available (iOS 10.0. *) {UIApplication. Shared. Open (openWX! , options: [UIApplicationOpenSettingsURLString:false], completionHandler: nil) }else{ UIApplication.shared.openURL(openWX!) } } decisionHandler(.cancel) return } }Copy the code

    This step is not very good introduction is to intercept open wechat payment.

    Return to App after project setup Scheme link is used for payment

    The specific operation is shown below

    Now that you’re halfway there, you’ll notice that you can now return to your App after you’ve made the payment but when you return, your webView is blank. Redirect_url = redirect_URL = redirect_URL = redirect_URL

    Listen for the value of url.scheme in the AppDelegate

    If it is xxxx.com, send a notification to inform webView that it loads the pre-recorded redirect_URL URL

    if ([url.scheme rangeOfString:@"quanzidian.net"].length! =0) { [NSNotificationCenter defaultCenter] postNotificationName:@"WX_H5_PAY" object:nil]; return YES; }Copy the code

    Receive notifications at wkWebView

      NotificationCenter.default.addObserver(self, selector: #selector(goBackWhitWXPay), name: NSNotification.Name(rawValue: "WX_H5_PAY"), object: nil)
Copy the code

    Refresh WKWebview

    @objc func goBackWhitWXPay(){ if ! self.redirect_url.isEmpty{ self.request = URLRequest(url: URL(string: self.redirect_url)!) redirect_url = "" } }Copy the code

    If the oc/Swift mix used in the project is inconsistent with your language, please imitate and write by yourself.

    The only catch is that when intercepting the request, redirect_URL is overridden with the protocol of the authorized URL://.

    Please visit https://siterzzz.github.io for more details