WeChat H5 payment process
1. Make an order request (Call unified single interface) Note: Transaction type trade_type=MWEB
2. Unify the single interface and return payment-related parameters to the merchant’s backend. For example, payment jumps to the url (parameter name "mweb_url"), the merchant adjusts the WeChat payment intermediate page through mweb_url. For example: /cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx27142704550165900edae5270331515985&package=600759311&redirect_url=http%3a%2f%
3. Check H5 permissions in the middle page and check security (See the official WeChat document for specific errors）
4. If the permission verification is successful, the payment request will be initiated on the WeChat Pay intermediate page. After the request is completed, jump to the callback page (determined by redirect_url). The APP needs to listen to this request in the webView and open WeChat to make payment. For example: weixin://wap/pay?prepayid%3Dwx2718114258281033efb8751f1574826586&package=2965581453&noncestr=1545905512&sign=cb0f6dbd067549a04aada9c3eef09aac
5. After WeChat payment is completed, jump back to the APP.
Referer and redirect_url description
HTTP Referer is part of the header. When the browser initiates a request to the web server, it usually brings a Referer to tell the server which page I link to. The WeChat middle page will verify the Referer, and non-secure domain names will not be loaded normally.
redirect_url is the address where the page is redirected after the WeChat middle page calls on WeChat payment. After the middle page calls WeChat payment, it will jump to the specified redirect_url. Moreover, when the payment is completed, the WeChat APP also passes the redirect_url callback result. Redirect_url is generally a page address, so the Safari browser will be opened after the WeChat payment is completed. This article changes redirect_url to achieve the following WeChat payment return to the current APP.
Note: WeChat will verify whether Referer (source) and redirect_url (target) are secure domain names. If redirect_url is not transmitted, WeChat will treat Referer as redirect_url, and after calling payment, it will be redirected to the page corresponding to Referer.
It is recommended to bring redirect_url with it.
Code implementation
1. Configure the scheme
The secure domain name of WeChat H5 payment needs to be configured as a scheme. After WeChat payment is completed, it will jump back to the APP through this scheme.
<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>wxPay</string> <key>CFBundleURLSchemes</key> <array> <string>WeChatscheme(Security domain name)</string> </array> </dict> </array> <key>LSApplicationQueriesSchemes</key> <array> <string>wechat</string> <string>weixin</string> </array>
2. Intercept the WeChat middle page and intercept the redirect_url
Then shouldStartLoadWithRequest: The method intercepts the WeChat middle page (request starting with "") and intercepts the redirect_url. If the redirect_url has been replaced with the scheme, it will not intercept, if it is not replaced, intercept the request and save the current redirect_url. Create a new WeChat middle page request and replace redirect_url with "secure domain name://" (WeChat payment will open the current APP through openURL. If redirect_url is not replaced, Safari will open after WeChat payment will be completed.). Set "Referer" to the secure domain name (WeChat will verify the Referer, but if it is not a secure domain name, it will fail to load), and reload the request.
//This referer is consistent with the security domain name and configuration in the scheme NSString *referer = [NSString stringWithFormat:@"%@://",wxScheme];
if ([newUrl rangeOfString:@""].location != NSNotFound) {
//Intercept the corresponding value of redirect_url NSDictionary *params = [HJStringHelper getUrlParam:newUrl];
NSString *backUrl = params[@"redirect_url"];
if ([backUrl isEqualToString:referer]) {
//Intercept redirect_url is replaced with referer and does not intercept return YES;
}else{
//Record the current redirectUrl and intercept the request = [HJStringHelper decodeURL:backUrl];
dispatch_async(dispatch_get_main_queue(), ^{
NSRange range = [newUrl rangeOfString:@"redirect_url="];
NSString *reqUrl;
if (>0) {
reqUrl = [newUrl substringToIndex:+];
reqUrl = [reqUrl stringByAppendingString:referer];
}else{
reqUrl = [newUrl stringByAppendingString:[NSString stringWithFormat:@"&redirect_url=%@",referer]];
}
NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:reqUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];
//Set the authorized domain name [request setValue:referer forHTTPHeaderField:@"Referer"];
[ loadRequest:request];
});
return NO;
}
}
2. Intercept the WeChat request to open WeChat in the middle page
After the WeChat middle page is loaded successfully, a request to open WeChat will be received, and openURL: open this url to jump to WeChat payment.
if([newUrl rangeOfString:@"weixin://wap/pay"].location != NSNotFound){
if ([[UIApplication sharedApplication] canOpenURL:url]) {
if (@available(iOS 10.0, *)){
[[UIApplication sharedApplication] openURL:url options:@{} completionHandler:nil];
}else{
[[UIApplication sharedApplication] openURL:url];
}
}else{
}
return NO;
}
3. Load the redirection address
When the WeChat middle page jumps to WeChat, the page will be directed from redirect_url. Since redirect_url has been modified to scheme, we need to intercept this illegal scheme request and replace it with the recorded redirect_url.
if([newUrl isEqualToString:referer]){
dispatch_async(dispatch_get_main_queue(), ^{
if () {
//Note that this place needs to be decoded for redirectUrl, because the intercepted redirectUrl is fully encoded and needs to be decoded before loading = [HJStringHelper decodeURL:];
NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:[HJStringHelper encodeURL:]] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];
[ loadRequest:request];
= nil;
}
});
return NO;
}
The complete code is as follows
Take UIWebView as an example
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//Add WeChat payment function NSURL *url = [request URL];
NSString *newUrl = ;
//Get WeChat security domain name NSString *wxScheme = [h5WXPayScheme copy];
if (>0) {
//Use secure domain name splicing referer NSString *referer = [NSString stringWithFormat:@"%@://",wxScheme];
if ([newUrl rangeOfString:@""].location != NSNotFound) {
NSDictionary *params = [HJStringHelper getUrlParam:newUrl];
NSString *backUrl = params[@"redirect_url"];
if ([backUrl isEqualToString:referer]) {
return YES;
}else{
= [HJStringHelper decodeURL:backUrl];
dispatch_async(dispatch_get_main_queue(), ^{
NSRange range = [newUrl rangeOfString:@"redirect_url="];
NSString *reqUrl;
if (>0) {
reqUrl = [newUrl substringToIndex:+];
reqUrl = [reqUrl stringByAppendingString:referer];
}else{
reqUrl = [newUrl stringByAppendingString:[NSString stringWithFormat:@"&redirect_url=%@",referer]];
}
NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:reqUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];
//Set the authorized domain name [request setValue:referer forHTTPHeaderField:@"Referer"];
[ loadRequest:request];
});
return NO;
}
}else if([newUrl rangeOfString:@"weixin://wap/pay"].location != NSNotFound){
if ([[UIApplication sharedApplication] canOpenURL:url]) {
if (@available(iOS 10.0, *)){
[[UIApplication sharedApplication] openURL:url options:@{} completionHandler:nil];
}else{
[[UIApplication sharedApplication] openURL:url];
}
}else{
}
return NO;
}else if([newUrl isEqualToString:referer]){
dispatch_async(dispatch_get_main_queue(), ^{
if () {
= [HJStringHelper decodeURL:];
NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:[HJStringHelper encodeURL:]] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];
[ loadRequest:request];
= nil;
}
});
return NO;
}
}
return [super webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
}
There is another article about H5 payment encapsulation. H5 payment can not only be used on web pages, but also natively. See the details for details: iOS-H5 payment (WeChat, Alipay) native packaging
This is the article about the summary of the examples of implementing WeChat H5 payment on iOS APP. For more related content on iOS APP to implement WeChat H5 payment, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!