This paper only discusses the problem that you cannot return to your APP after successfully activating wechat payment. IOS wechat H5 payment is not included in the discussion. The following reference is provided: official document of wechat H5 Payment Official Demo of wechat H5 Payment

Your App-> wechat client -> Pay or cancel -> your App This scheme supports multiple apps, different apps added after processing will not appear to return chaotic situation.

In addition, iOS Alipay H5 payment cannot return to the APP solution

solution

There is a paragraph about the “callback page” in the official wechat document:

Normal process After the payment is complete, the user is returned to the page that initiates the payment. If the user needs to return to the specified page, add the redirect_URL parameter after MWEB_URL to specify the callback page.

For example, if you want the user to go to www.wechatpay.com.cn after the payment is complete, perform the following operations: Suppose you get the MWEB_URL= through the unified single interface https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096 MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&r edirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

Wechat H5 payment provides a redirect_URL parameter on the URL of the middle page, which is used to specify the callback page after the payment ends (there is no redirect_URL parameter by default, wechat will take the value of the referer parameter in the request header as the callback page). The wechat client will return the callback page through the [[UIApplication sharedApplication] openURL: URL] method. If we set redirect_UR to URLSchemes for our App, can we return our App?

The solution

  1. Register a level 1 domain name, such as company.com, in the wechat Merchant background (wechat Merchant platform – Product Center – Development configuration -H5 Payment (the bottom one).

Company.com here should be consistent with the level 1 domain name you placed the order on wechat, that is, the value corresponding to the Referer field in the request header ** of wx.tenpay.com** in the middle page of wechat. Because in the middle page of wechat, the Referer and redirect_URL values will be checked whether they have been registered in the wechat background. 2. Set the URL Scheme in the APP project configuration, for example, A.company.com. Redirect_url =URLEncode(A.company.com://); cancel the original request. The webView reloads the new request.

// Take WKWebView as an example. Please adjust according to actual situation) - (void) webView: (WKWebView *) webView decidePolicyForNavigationAction: (navigationAction WKNavigationAction *)  decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { NSURLRequest *request = navigationAction.request;  Do not write this string directly in the code, otherwise it will be scanned by MAC to pay field, resulting in rejection. Can be processed to encrypt or return back to its nsstrings * wxPre = @ "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb"; if ([request.URL.absoluteString hasPrefix:wxPre] && [request.URL.absoluteString RangeOfString :@" redirect_URL "]. Length ==0) {// start wechat payment will go here // will request wechat middle page, and the middle page has not append redirect_URL parameter, append redirect_URL NSMutableURLRequest *newRequest = [[NSMutableURLRequest alloc] init]; newRequest.allHTTPHeaderFields = request.allHTTPHeaderFields; NSString *newURLStr = nil; //TODO: append newURLStr redirect_URL =URLEncode(@"A.company.com://") newRequest.URL = [NSURL URLWithString:newURLStr]; [webView loadRequest:newRequest]; decisionHandler(WKNavigationActionPolicyCancel); } else if ([request.URL.scheme rangeOfString:@"company.com"].length! =0) {// wechat pay will go here after completion (cancel (timeout)) //TODO: Closed WeChat middle page, such as dismiss webViewController, or [webView goBack]} else {decisionHandler (WKNavigationActionPolicyAllow); }}Copy the code
  1. After wechat payment is complete, your webView will send a redirect_URL request to “company.com://” and intercept the request to close the wechat middle page. (More on that later)

Issues that need attention

  1. The domain names in the Referer header and redirect_URL must have been registered in the wechat background. Otherwise, an error message “The merchant has unconfigured parameters, please contact the merchant” will be displayed on the middle page of wechat. Common error types
  2. Redirect_url needs to be URLEncode handled with a colon backslash.
  3. Wechat Pay to complete the callback redirect_URL timing is not reliable, may be wechat pay before the end of the callback.

The official document of wechat describes redirect_URL as follows: After setting redirect_URL, the operation of hopping back to the specified page may occur as follows: 1. The user clicks “Cancel payment” or clicks “Finish” button after the payment is completed. Therefore, there is no guarantee that when the page jumps back, the payment process has finished, so the redirect_URL address set by the merchant cannot automatically perform the order lookup operation, and users should click the button to trigger the order lookup operation

  1. Do not write the prefix string of the interception wechat middle page request directly in the code, otherwise it will be detected by the computer audit to “pay” field and be rejected, please encrypt it by yourself or return it in the background.
  2. The reason for wechat background domain name registration is that it can support “multiple apps”, your first App’s URLScheme is A.company.com, your second App’s URLScheme is B.company.com, and you don’t have to go to wechat background to register domain name again.

Wechat Pay returns a blank screen

I didn’t know the reason for the white screen problem before, but I only knew how to avoid it. This time, I studied it again and finally figured out the reason.

Phenomenon: First of all, when you do not use the method in this article, after wechat payment is over, you will manually return to the App, and there will be no white screen problem. Secondly, if the method in this article is used, some readers report that although wechat payment can automatically jump back to the App, the whole screen of the App will be blank and the operation cannot be continued.

The screen goes blank after redirect_URL is added

Wechat middle page wx.tenpay.com/cgi-bin/mmp…

window.onload = function() { ... Omit var url = "weixin://wap/pay? prepayid%3Dwx18xxxxxxxxx&package=156xxxxxx&noncestr=157xxxxx&sign=719bxxxxxxxxxxx"; var redirect_url = "A.company.com://"; top.location.href = url; if (redirect_url) { setTimeout(function() { top.location.href = redirect_url; }, 5000); } else { setTimeout(function() { window.history.back(); }, 5000); }}Copy the code

You know, it just makes sense.

Summary of reasons for blank screen: When initiating wechat payment, the page will be redirected to the middle page, which can also be understood as the verification page. There is an error message indicating the cause of the error (as shown below). If there is no error, the pure white page will pull up wechat client payment at the same time. If not, it will return to the previous page window.history.back() after 5s, which will return to the H5 page before payment. Redirect_url = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://” redirect_URL = “A.company.com://”

How to solve the white screen problem

The blank screen can be solved by closing the wechat middle page after payment. There are two points, one is the time when the payment ends, the other is to close the wechat middle page.

When the payment ends, as I mentioned above

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { NSURLRequest *request = navigationAction.request; if ([request.URL.scheme rangeOfString:@"company.com"].length! TODO: Close the middle page of wechat, such as dismiss webViewController, or [webView goBack]}... }Copy the code

Close the middle page of wechat. Here I offer two ideas:

  1. Open a new native webViewController to load your cashier page (choose wechat, Alipay page), and dismiss this webViewController after payment.
  2. Referring to the idea of wechat, after the payment, [webView goBack] to return to the original page.

Frequently asked questions self-check

1. After following the steps in the article, the App will jump to wechat, and the payment or cancellation will jump to Safari instead of returning to App

  1. Check whether the domain name (with colon backslash) and App URLScheme(without colon backslash) in redirect_URL are filled correctly and consistent, and whether the wechat merchant background has registered the corresponding domain name.
  2. If you still have :// after URLEncode, this is not correct, you can compare your URLEncode value with the online URLEncode site.

If you found this article helpful, please give it a thumbs up. If you have any questions you can follow my public number to leave a message to me. Please indicate the source of reprint, thank you!

IOS tO solve the problem of wechat H5 payment can not be directly returned to the APP iOS to achieve wechat external H5 payment after completion of the original APP(multiple apps can also be achieved)