『壹』 iOS H5調用微信(支付寶)支付與回調
利用WKWebView載入網頁,在app中處理H5頁面調用微信支付 ------ 實現WKNavigationDelegate協議
該方法是決定H5頁面是否允許跳轉的
- (void)webView:(WKWebView*)webView :(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{
WKNavigationActionPolicy actionPolicy =WKNavigationActionPolicyAllow;//允許
NSString*urlScheme = navigationAction.request.URL.scheme;
NSString*urlString = navigationAction.request.URL.absoluteString;
NSString *wxPre = @"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb";
NSURLRequest*request = navigationAction.request;
NSLog(@"urlScheme:%@",urlScheme);
NSLog(@"urlStr:%@",urlString);
if([urlString containsString:@"weixin://wap/pay?"]) {
actionPolicy =;//不唯則允許跳轉
NSURL*url = [NSURLURLWithString:urlString];
if([[]respondsToSelector:@selector(openURL:options:completionHandler:)]){
if(@available(iOS10.0, *)) {
[[UIApplication sharedApplication] openURL:url options:@{: @NO} completionHandler:^(BOOL success) {
}];
}else{
// Fallback on earlier versions
[[]openURL:url];
}
}else{
碼謹 [[UIApplication sharedApplication]openURL:url];
}
}
decisionHandler(actionPolicy);//這句是必須加上的,不然會異常
}
很多小夥伴兒都遇到回跳的問題,點擊「完成」或「取消」跳到了Safari卻跳不回APP。
2.1、配置URL Types 添加schemes:www.xxxx.com
2.2、配置 Referer
[requestsetValue:@"www.suxiangshidai.com://" forHTTPHeaderField:@"Referer"];
2.3、伺服器回調的URL中一定要寫成 www.suxiangshidai.com:// , 如果一定要拼接,可以讓後台區分一下,如指模棚果是iOS 前面一定要寫成 www.suxiangshidai.com:// ,不然跳不回APP。
注意:www.xxxx.com 此域名一定是H5授權的域名,如果是二級域名,可以寫成:aaa.xxxx.com
一般支付完 不管完成與否都要調一下回調地址來刷新支付頁面的,但問題是iOS的回調地址中一定要寫成 www.xxxx.com:// 這樣的格式才能跳回來,但是調回來後沒有執行回調地址,頁面又刷新不了,或者跳回來後是個空白頁,這又產生了一個新的問題。當點擊微信支付頁上的「完成」或「取消」返回APP時,會調用 AppDelegate 中的 openURL: 方法
-(BOOL)application:(UIApplication*)app openURL:(NSURL*)url options:(NSDictionary *)options{
// url.scheme 就是 www.suxiangshidai.com,你只需要在這做一個判斷,如果是 www.suxiangshidai.com 你就給外部發一個通知,那外部接收到這個通知,刷新界面就行了。
//刷新地址也就是支付完的回調地址,後台可以把回調地址拼接在 www.xxxx.com:// 後面,例如:www.xxxx.com://http://www..com 。 那麼 url 就是 www.xxxx.com:// http://www..com ,你向外部發通知時把 url 作為參數傳出去即可
if ([url.scheme containsString:@"www.suxiangshidai.com"]) {
[[NSNotificationCenter defaultCenter] postNotificationName:@"weChatPayHandle" object:nil userInfo:@{@"url":url}];
}
return YES;
}
//微信支付後刷新主界面 (處理通知的方法 )
-(void)refreshOrderData:(NSNotification*)notifi{
NSDictionary*dic = notifi.userInfo;
NSString*url = [NSStringstringWithFormat:@"%@",dic[@"url"]];
NSRange range = [url rangeOfString:@"www.suxiangshidai.com://"];
NSString*lastUrl = [urlsubstringFromIndex:range.length];
NSLog(@"%@",lastUrl);
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:lastUrl]]];
}
解決h5的支付寶支付問題 可以提供兩種解決辦法
第一種 調用支付寶網頁支付
(問題 支付成功後回調到了游覽器,無法返回APP,解決如下)
//以WKWebView為例
- (void)webView:(WKWebView*)webView :(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler {
WKNavigationActionPolicy actionPolicy =WKNavigationActionPolicyAllow;//允許
NSString*urlScheme = navigationAction.request.URL.scheme;
NSString*urlString = navigationAction.request.URL.absoluteString;
NSString *wxPre = @"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb";
NSURLRequest*request = navigationAction.request;
NSLog(@"urlScheme:%@",urlScheme);
NSLog(@"urlStr:%@",urlString);
// 先判斷一下,找到需要跳轉的再做處理
if([urlSchemeisEqualToString:@"alipay"]) {
// 1.以?號來切割字元串
NSArray* urlBaseArr = [:@"?"];
NSString* urlBaseStr = urlBaseArr.firstObject;
NSString* urlNeedDecode = urlBaseArr.lastObject;
// 2.將截取以後的Str,做一下URLDecode,方便我們處理數據
// NSMutableString * afterDecodeStr = [NSMutableString stringWithString:[self URLDecodedString:urlNeedDecode]];
NSString*afterDecodeStr =WebURLDecodedString(urlNeedDecode);
// 3.替換裡面的默認Scheme為自己的Scheme
NSString* afterHandleStr = [:@"alipays"withString:@"QEQuickEnjoyment"];
// 4.然後把處理後的,和最開始切割的做下拼接,就得到了最終的字元串
NSString* finalStr = [NSStringstringWithFormat:@"%@?%@",urlBaseStr,WebURLEncode(afterHandleStr)];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 判斷一下,是否安裝了支付寶APP(也就是看看能不能打開這個URL)
if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:finalStr]]) {
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:finalStr]];
}
});
// 2.這里告訴頁面不走了 -_-
decisionHandler();
return;
}
decisionHandler(actionPolicy);//這句是必須加上的,不然會異常
}
// OC 做URLEncode的方法
staticinlineNSString* WebURLEncode(NSString* str){
NSString*charactersToEscape =@"#[]@!$'()*+,;\"<>%{}|^~`";
NSCharacterSet*allowedCharacters = [[:charactersToEscape]invertedSet];
NSString *encodedUrl = [[str description] :allowedCharacters];
return encodedUrl; }
staticinlineNSString*WebURLDecodedString(NSString* str)
{ return [str ]; }
這樣h5處理支付寶就可以了
但是如果想在支付寶成功後app處理事件 處理如下:
回到Appdelegate的代理方法
-(BOOL)application:(UIApplication*)app openURL:(NSURL*)url options:(NSDictionary *)options{// 判斷一下這個host,safepay就是支付寶的if([url.host isEqualToString:@"safepay"]) {// 拿到這個鏈接的數據,數據大概是這樣的/*
mushRoomBox://safepay/?%7B%22memo%22:%7B%22result%22:%22%7B%5C%22alipay_trade_wap_pay_response%5C%22:%7B%5C%22code%5C%22:%5C%2210000%5C%22,%5C%22msg%5C%22:%5C%22Success%5C%22,%5C%22app_id%5C%22:%5C%222017020505522491%5C%22,%5C%22auth_app_id%5C%22:%5C%222017020505522491%5C%22,%5C%22charset%5C%22:%5C%22GBK%5C%22,%5C%22timestamp%5C%22:%5C%222018-11-09%2011:43:06%5C%22,%5C%22out_trade_no%5C%22:%5C%222018100001_simple_%5C%22,%5C%22total_amount%5C%22:%5C%220.01%5C%22,%5C%22trade_no%5C%22:%5C%%5C%22,%5C%22seller_id%5C%22:%5C%222088221175674834%5C%22%7D,%5C%22sign%5C%22:%5C%22T6jn7QSsvjjG%5C/%5C/%5C/QHc++1TZnraDfm0I%5C/OwAnA5iCTOhq%5C/fkm%5C/i0vLk17W8s+LjcOUT%5C/zB6K6gN+fyCefm8FOJ+8g4GUAreuZDcW0MuGE1OOmaxDrXg==%5C%22,%5C%22sign_type%5C%22:%5C%22RSA2%5C%22%7D%22,%22ResultStatus%22:%229000%22,%22memo%22:%22%22%7D,%22requestType%22:%22safepay%22%7D
*/// 然後,一樣的套路方法
NSString* urlNeedjsonStr = url.absoluteString;
NSArray* afterComStr = [urlNeedJsonStr componentsSeparatedByString:@"?"];/
/ 這個decode方法,在上面找哈NSString* lastStr = [self WebURLDecodedString:afterComStr.lastObject];// 這個lastStr,其實是一個jsonStr,轉一下,就看到了數據
NSDictionary* dict = [self dictionaryWithJsonString:lastStr];// dict的結構差不多是這樣/*
"memo": {
"result":"訂單相關信息,如訂單號,支付金額等等";
"ResultStatus":"9000";
},
******
*/// 和支付寶SDK的返回結果一次,這個ResultStatus,就是我們要的數據// 9000 :支付成功// 8000 :訂單處理中// 4000 :訂單支付失敗// 6001 :用戶中途取消// 6002 :網路連接出錯// 這里的話,就可以根據狀態,去處理自己的業務了}returnYES;}
- (NSDictionary*)dictionaryWithJsonString:(NSString*)jsonString{
if(jsonString ==nil) {
return nil;
}
NSData*jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
NSError*err;NSDictionary*dic = [:jsonData options::&err];
if(err)
{NSLog(@"json解析失敗:%@",err);
return nil;
}return dic;
}
接支付寶提供的SDK,schemeStr參數傳入自己APP的URLScheme即可。 具體的 手機網站支付轉Native支付
1.1、掉起支付寶APP
1.2、支付完成後,支付寶APP要返回到我們的APP裡面來
- (void)webView:(WKWebView*)webView :(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{
BOOL isIntercepted = [[AlipaySDK defaultService] payInterceptorWithUrl:[navigationAction.request.URL absoluteString] fromScheme:@"WRWarehouseHasRice" callback:^(NSDictionary *result) {
// 處理支付結果
NSLog(@"%@", result);
// isProcessUrlPay 代表 支付寶已經處理該URL
if([result[@"isProcessUrlPay"]boolValue]) {
// returnUrl 代表 第三方App需要跳轉的成功頁URL
NSString*urlStr = result[@"returnUrl"];
}
}];
if(isIntercepted) {
decisionHandler();
return;
}
decisionHandler(WKNavigationActionPolicyAllow);
}
『貳』 h5+ app 第三方支付調用步驟
1 在頁面onload中獲取支付通道,支付的時候再獲取支付通道會浪費用戶等待時間:
// 獲取支付通道 (微信&支付寶)
var wxChannel,aliChannel;
plus.payment.getChannels(function(channels) {
for(var i in channels) {
if(channels[i].id == "wxpay") {
wxChannel = channels[i];
} else {
aliChannel = channels[i];
}
}
}, function(e) {
mui.toast("獲取支付通道失敗:" + e.message);
});
2 調起後台支付介面 ,傳參 userId , log_id , type , pay_pass,後台處理成功返回支付金額(如果是余額支付到這一步就支付成功結束了)
3 調起支付 :
//channel 支付通道類型(wxpay/alipay), pay 支付金額
plus.payment.request(channel,pay,function(result){
//支付成功回調......
},function(error){
//取消/支付失敗回調......
});
『叄』 微信H5支付流程
1、用戶在商戶側完成下單,使用微信支付進行支付
2、由商戶後台向微信支付發起下單請求( 調用統一下單介面 )註:交易類型trade_type=MWEB
3、統一下單介面返回支付相關參數給商戶後台,如支付跳轉url(參數名「mweb_url」),商戶通過mweb_url調起微信支付中間頁
4、中間頁進行H5許可權的校驗,安全性檢查(此處常見錯誤請見下文)
5、如支付成功,商戶後台會接收到微信側的非同步通知
6、用戶在微信支付收銀台完成支付或取消支付,返回商戶頁面(默認為返回支付發起頁面)
7、商戶在展示頁面,引導用戶主動發起支付結果的查詢
8,9、商戶後台判斷是否接收到微信側的支付結果通知,如沒有,後台調用我們的 訂單查詢介面 確認訂單狀態(查單實現可參考: 支付回調和查單實現指引 )
10、展示最終的訂單支付結果給用戶
常見問題
一、回調頁面
正常流程用戶支付完成後會返回至發起支付的頁面,如需返回至指定頁面,則可以在MWEB_URL後拼接上redirect_url參數,來指定回調頁面。
如,您希望用戶支付完成後跳轉至 https://www.wechatpay.com.cn ,則可以做如下處理:
假設您通過統一下單介面獲到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=&package=1037687096
則拼接後的地址為MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn
注意:
1.需對redirect_url進行urlencode處理
2.由於設置redirect_url後,回跳指定頁面的操作可能發生在:
a、微信支付中間頁調起微信收銀台後超過5秒
b、用戶點擊「取消支付」或支付完成後點擊「完成」按鈕。因此無法保證頁面回跳時,支付流程已結束,所以商戶設置的redirect_url地址不能自動執行查單操作,應讓用戶去點擊按鈕觸發查單操作。回跳頁面展示效果可參考下圖
二、其它常見錯誤
| 網路環境未能通過安全驗證,請稍後再試 | 1. 商戶側統一下單傳的終端IP(spbill_create_ip)與用戶實際調起支付時微信側檢測到的終端IP不一致導致的,這個問題一般是商戶在統一下單時沒有傳遞正確的終端IP到spbill_create_ip導致,詳細可參見 客戶端ip獲取指引
2. 統一下單與調起支付時的網路有變動,如統一下單時是WIFI網路,下單成功後切換成4G網路再調起支付,這樣可能會引發我們的正常攔截,請保持網路環境一致的情況下重新發起支付流程
|
| 2 |
| 商家參數格式有誤,請聯系商家解決 |
1. 當前調起H5支付的referer為空導致,一般是因為直接訪問頁面調起H5支付,請按正常流程進行頁面跳轉後發起支付,或自行抓包確認referer值是否為空
2. 如果是APP里調起H5支付,需要在webview中手動設置referer,如(
Map<string> extraHeaders = new HashMap<string>();
extraHeaders.put("Referer", "商戶申請H5時提交的授權域名");//例如 http://www..com )</string></string>
|
| 3 |
| 商家存在未配置的參數,請聯系商家解決 | 1,當前調起H5支付的域名(微信側從referer中獲取)與申請H5支付時提交的授權域名不一致,如需添加或修改授權域名,請登錄商戶號對應的【商戶平台->產品中心->開發配置】自行配置
2,如果設置了回跳地址redirect_url,請確認設置的回跳地址的域名與申請H5支付時提交的授權域名是否一致 |
| 4 |
| 支付請求已失效,請重新發起支付 | 統一下單返回的MWEB_URL生成後,有效期為5分鍾,如超時請重新生成MWEB_URL後再發起支付 |
| 5 |
| 請在微信外打開訂單,進行支付 | H5支付不能直接在微信客戶端內調起,請在外部瀏覽器調起 |
| 6 |
| IOS:簽名驗證失敗
安卓:系統繁忙,請稍後再試 | 1,請確認同一個MWEB_URL只被一個微信號調起,如果不同微信號調起請重新下單生成新的MWEB_URL
2,如MWEB_URL有添加redirect_url,請確認參數拼接格式是否有誤,是否有對redirect_url的值做urlencode,可對比以下例子格式:
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn |
|
|
| 7 |
| 由於商家傳入的H5交易參數有誤,該筆交易暫時無法完成,請聯系商家解決 | 統一下單中 spbill_create_ip 欄位必須為客戶端IP地址 |
三、QA
Q1:
1、傳遞redirect_url safari瀏覽器時支付完成後會新開一個頁面;
2、還有就是有些ios手機使用其他瀏覽器支付完成後默認會回到safari瀏覽器。
A1:
1、目前邏輯就是這樣設計的,防止商戶無限循環調用微信客戶端
2、對的,返回需要瀏覽器的schema信息,部分瀏覽器隱藏了這個信息,在無法拿到schema信息的情況下,就會回到safari瀏覽器