iOS实现H5支付(微信、支付宝)原生封装

前言

支付分APP支付、H5支付、扫码支付等。app支付一般在app中使用,并且需要集成相应的支付SDK,H5支付多用于网页。如果你的APP不想集成支付SDK,又想实现支付功能,你可以在项目中使用H5支付。本文主要讲述如何将H5支付封装成一个原生可调用的组件。

1.H5支付流程

注:以下为网页H5支付流程,原生调用需要修改部分流程

1.1 微信支付

  • 统一下单,获取微信中间页地址mweb_url
  • 页面重定向到微信中间页
  • 微信中间页发起支付请求
  • safari浏览器拦截支付请求打开微信APP开始支付(如果在app中,需要在shouldStartLoadWithRequest:方法里面拦截支付请求,并打开微信)

微信中间页重新向到redirect_url

1.2 支付宝支付

  • 发起网页支付请求,H5为一个form表单提交。
  • 页面重定向到支付宝收银台页面
  • 发起APP支付请求,并且开始倒计时,如果打开支付宝超时页面跳转到网页支付界面,如果唤起支付宝,倒计时结束。
  • 支付完毕页面跳转到return_url页面,需用户手动触发。

2.原生封装思路

新开一个webView加载支付中间页,拦截中间页支付请求并唤起支付,然后关闭webView流程结束。

webView需要加到window(或者当前控制器的view上),并设置一个大小(肉眼不可见就行)。因为使用wkwebview时,webView不显示的情况下,H5请求会被挂起,会导致支付宝页面不能唤起支付请求。

3.代码实现

具体步骤见代码注释

@interface HJH5WebPayManager()<UIWebViewDelegate>

@property (nonatomic,strong) UIWebView *payWebview;

@property (nonatomic,strong) void(^sendPayResult)(HJH5SendWebPayResult);

@end

@implementation HJH5WebPayManager

+(instancetype)sharedInstance{
 static dispatch_once_t once ;
 static HJH5WebPayManager *_instace = nil;
 dispatch_once(&once, ^{
 _instace = [[self alloc] init];
 });
 return _instace;
}

-(void)loadWebPayTransitionPage:(NSString *)html handleBlock:(void (^)(HJH5SendWebPayResult))handle{
 NSMutableURLRequest *request = nil;
 if ([html hasPrefix:@"https://wx.tenpay.com"]) {
 //微信安全域名
 NSString *wxScheme = @"";
 NSString *referer = [NSString stringWithFormat:@"%@://",wxScheme];
 //将redirect_url替换成scheme,微信支付完毕才能跳回APP,否则会打开Safari浏览器(因为redirect_url一般为一个HTTP的地址)
 NSRange range = [html rangeOfString:@"redirect_url="];
 NSString *reqUrl;
 if (range.length>0) {
  reqUrl = [html substringToIndex:range.location+range.length];
  reqUrl = [reqUrl stringByAppendingString:referer];
 }else{
  reqUrl = [html stringByAppendingString:[NSString stringWithFormat:@"&redirect_url=%@",referer]];
 }
 request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:reqUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];
 //设置授权域名,伪造Referer头,因为微信中间页会检验Referer头,并且Referer对应的值需要包含安全域名
 [request setValue:referer forHTTPHeaderField:@"Referer"];
 if (self.payWebview) {
  [self.payWebview removeFromSuperview];
  self.payWebview = nil;
 }
 self.payWebview = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 0.1, 0.1)];
 self.sendPayResult = handle;
 [[UIApplication sharedApplication].keyWindow addSubview:self.payWebview];
 self.payWebview.delegate = self;
 [self.payWebview loadRequest:request];
 }else if ([html hasPrefix:@"<form"]){
 //如果是支付宝,html对应的应该是一段form表单提交脚本,需要调用loadString方法加载
 if (self.payWebview) {
  [self.payWebview removeFromSuperview];
  self.payWebview = nil;
 }
 self.payWebview = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 0.1, 0.1)];
 self.sendPayResult = handle;
 [[UIApplication sharedApplication].keyWindow addSubview:self.payWebview];
 self.payWebview.delegate = self;
 NSString *payStr = html;
 NSString *htmlString = [NSString stringWithFormat:@"htmlString:<html> \n"
    "<head> \n"
    "<meta name=\"viewport\" content=\"initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /> \n"
    "<style type=\"text/css\"> \n"
    "body {font-size:16px;}\n"
    "</style> \n"
    "</head> \n"
    "<body>"
    "%@"
    "</body>"
    "</html>",payStr];
 [self.payWebview loadHTMLString:htmlString baseURL:nil];

 }else{
 //非法html,返回错误
 handle(HJH5SendWebPayResultOther);
 return;
 }

 //容错处理,20秒没唤起支付,当错误处理。
 __weak typeof(self) weakSelf = self;
 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(20 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
 if (weakSelf.sendPayResult) {
  weakSelf.sendPayResult(HJH5SendWebPayResultOther);
 }
 [weakSelf endPayment];
 });
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
//页面加载失败,返回错误
 if (self.sendPayResult) {
 self.sendPayResult(HJH5SendWebPayResultLoadFail);
 }
 [self endPayment];
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
 NSURL *url = request.URL;
 NSString *newUrl = url.absoluteString;
 //拦截微信支付请求,并打开微信
 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];
  }
  if (self.sendPayResult) {
  self.sendPayResult(HJH5SendWebPayResultSuccess);
  }
  [self endPayment];
 }else{
  if (self.sendPayResult) {
  self.sendPayResult(HJH5SendWebPayResultSendFail);
  }
  [self endPayment];
 }
 return NO;
 }else if([newUrl rangeOfString:@"alipay://alipayclient/?"].location != NSNotFound){
 //拦截支付宝支付请求,并且替换fromAppUrlScheme参数为当前APP的scheme,实现支付完毕返回APP功能。
 NSString *aliScheme = @"支付宝支付scheme,支付完毕可通过scheme返回到当前APP";
 newUrl = [HJStringHelper decodeURL:newUrl];
 NSString *parameterString = [newUrl stringByReplacingOccurrencesOfString:@"alipay://alipayclient/?" withString:@""];
 NSError *error = nil;
 id dict = [NSJSONSerialization JSONObjectWithData:[parameterString dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingMutableContainers error:&error];
 if (!error) {
  if ([dict isKindOfClass:[NSMutableDictionary class]]) {
  dict[@"fromAppUrlScheme"] = aliScheme;
  NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dict options:NSJSONWritingPrettyPrinted error:&error];
  if (!error) {
   parameterString = [HJStringHelper escapeURL:[[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding]];
   NSString *payUrl = [NSString stringWithFormat:@"alipay://alipayclient/?%@",parameterString];
   dispatch_async(dispatch_get_main_queue(), ^{
   //判断是否能打开支付宝
   if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:payUrl]]) {
    if (@available(iOS 10.0, *)){
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:payUrl] options:@{} completionHandler:nil];
    }else{
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:payUrl]];
    }
    if (self.sendPayResult) {
    self.sendPayResult(HJH5SendWebPayResultSuccess);
    }
    [self endPayment];
   }else{
    if (self.sendPayResult) {
    self.sendPayResult(HJH5SendWebPayResultSendFail);
    }
    [self endPayment];
   }
   });
  }
  }
 }
 return NO;
 }else{
 return YES;
 }
}

-(void)endPayment{
 self.sendPayResult = nil;
 [self.payWebview removeFromSuperview];
 self.payWebview = nil;
}

@end

3.1入参说明

调用该方法唤起支付-(void)loadWebPayTransitionPage:(NSString *)html handleBlock:(void (^)(HJH5SendWebPayResult))handle.

其中html为微信中间页地址和支付宝form表单脚本。如:

微信: https://wx.tenpay.com ?xxxx

支付宝:<form id=" alipaysubmit " name="alipaysubmit" action=xxxx></form><script>document.forms[' alipaysubmit '].submit();</script>

见1.H5支付流程,微信下单之后可以获取中间页地址,支付则需要form表单提交加载中间页。

3.2错误处理

typedef NS_ENUM(NSUInteger,HJH5SendWebPayResult) {
 HJH5SendWebPayResultSuccess = 0, //唤起登录成功
 HJH5SendWebPayResultLoadFail, //支付页面加载失败
 HJH5SendWebPayResultSendFail, //调起支付失败,可能是没添加未安装微信或者支付宝
 HJH5SendWebPayResultOther //其他
};

支付请求发送成功则表示这次H5支付发起完成,具体支付结果需要查询后台获得。所以需要对一些异常情况进行处理,比如页面加载失败,微信或支付宝未安装等异常进行处理。

4.说明

这种方案可以统一微信和支付宝H5支付的流程,并且隐式地显示支付中间页,不会影响H5单页面应用的路由。APP不需要集成支付SDK,可以绕过苹果扫描代码。

由于支付宝支付流程改成和微信一样,所以支付宝网页支付功能被砍掉,只能通过打开支付宝APP去支付。这也是这种方案的不足之处。

iOS-APP实现微信H5支付总结

到此这篇关于iOS实现H5支付(微信、支付宝)原生封装的文章就介绍到这了,更多相关iOS H5支付内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • IOS 仿支付宝支付屏幕亮度变化机制

    1.首先,在需要实现的界面viewDidLoad中先保存亮度没有变化之前的亮度,因为这个界面消失之后还要变回原来的亮度,变化亮度也相当于用户的一种设置,所以也要保存一下这个状态,因为之后当APP在active和非active切换时候需要知道是否需要为用户做这个功能 // 保存原来的亮度 [[NSUserDefaults standardUserDefaults] setObject:@([UIScreen mainScreen].brightness) forKey:@"brightness&q

  • 微信支付终于成功了(安卓、iOS)在此分享

    经过了几天的痛苦煎熬,终于把微信支付调通,整个调试过程很痛苦,痛苦的主要来源是微信支付的调试真的是,以前调试公众号支付也是一波三折啊.好吧,开始!首先说明,我这里主要没有使用getToken,getOrder方法,我的所有参数全部是在后端生成传递给前端的,看了一下前面朋友分享的源代码,还用到了jquery,md5,sha对于新手来说简直是天文啊,而且jquery在apicloud中效率不好,所以放弃了研究那个代码,另外官方也说了,最好签名等参数全部服务器端生成,微信也是这么说的. 注意:微信本身

  • 微信支付开发IOS图文教程案例

    前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要知道的,打开下面链接: https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=3_1 然后可以看到下面的页面,这个就是微信支付商户平台的开发文档,很多东西是可以查阅和了解的,在开发使用微信SDK支付功能的时候,遇到了问题也可以到这找找相关须知信

  • iOS 9.0后微信支付回调处理实例

    如果是iOS 9.0之前,处理微信回调时,首先在APPDelegate中写如下的代码: //iOS 9.0 之前的处理方法不保证正确,如有错误还望指正 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { if ([url.host isEqualToStrin

  • iOS开发支付宝支付成功返回字符串的处理操作

    { memo=""; result="partner=\"311811\"&seller_id=\"nse@gmail.com\"&out_trade_no=\"S005372\"&subject=\"\U522b\U5885\U8ba2\U5355\"&body=\"\U5885\"&total_fee=\"0.1\"

  • iOS仿支付宝芝麻信用分数仪表盘动画效果

    先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

  • iOS支付宝支付方法详解

    支付宝SDK下载地址:https://doc.open.alipay.com/doc2/detail?treeId=54&articleId=103419&docType=1 支付宝集成 在支付宝集成的过程中,会遇到一些报错,下面就碰到的报错,和大家一起解决. 集成参考官方文档: 导入代码文档:https://doc.open.alipay.com/doc2/detail.htm?spm=0.0.0.0.RiFaVa&treeId=59&articleId=103676&a

  • 解决iOS调起微信支付显示系统繁忙问题

    最新刚到新公司接手一个项目,当微信支付时可以跳转到微信界面,但会弹出对话框显示 '系统繁忙',点击确定就留在微信,不返回APP,然后就各种调试,微信的DEMO和接入文档都看穿了,都还没能解决问题,网上也是找了各种答案,什么降低微信支付SDK版本,还有检查传过去的参数,也反复检查了参数,确实没发现问题,也没能解决我的问题,安卓那边可以微信支付,iOS这边不行,参数都是由服务器返回的一样的参数,所以也解决参数不会有问题,然后无意中看到了网上一个哥们的问题说和友盟分享SDK冲突了,刚好这个工程也集成了

  • IOS客户端接入微信支付

    实际上,从代码的角度,调起支付APP就是把一些关键的参数通过一定方式打包成为一个订单,然后发送到支付平台的服务器.所以,只要搞清楚了参数设置,搞清楚了每个支付平台的SDK里面一些关键API的使用,基本上就可以很简单的支持支付. 今天记录一下客户端里面,如何支持微信支付.首先.我们要仔细阅读一下微信SDK的开发文档,了解一下整个支付的大概流程. 然后根据提示,把相应的SDK下载下来,所谓的SDK,也就是一个链接库和两个头文件,很简单. 下载完毕,需要把SDK导入到工程里面,并且配置一下工程.因为开

  • iOS微信支付开发案例

    微信支付有很多坑的,官方提供的文档一点都不全面,而且demo也比较"羞涩"难懂.很多注意的细节都没有体现出来,走了很多弯路.于是,系统的开发流程如下.(完整的demo附在博客最后面)这里面包括微信支付开发和支付宝开发调用客户端的兼容处理.(两次签名放在移动端,博客中没提到没安装微信客户端的情况,也很简单[WXApi sendReq:request]调用这个方法的返回值为0即可判断.) 一.环境配置 1.首先是https协议访问,在plist设置白名单 2.当你工程中有微信分享.收藏.支

  • iOS支付宝、微信、银联支付集成封装调用(上)

    一.集成支付宝支付 支付宝集成官方教程 https://docs.open.alipay.com/204/105295/ 支付宝集成官方demo https://docs.open.alipay.com/54/104509/ 1.导入SDK并添加依赖库 启动IDE(如Xcode),把iOS包中的压缩文件中以下文件拷贝到项目文件夹下,并导入到项目工程中. AlipaySDK.bundle AlipaySDK.framework 在Build Phases选项卡的Link Binary With L

  • iOS实现微信支付流程详解

    背景 自微信支付.支付宝支付入世以来,移动端的支付日渐火热.虚拟货币有取代实体货币的趋向(这句纯属扯淡,不用管),支付在app开发中是一项基本的功能,有必要去掌握.从难易程度上讲,不管是微信支付还是支付宝支付都是非常简单的,因为第三方的支付文档非常详细,而且他们内部的安全性也非常高.作为使用这些支付策略的我们,只需要掌握流程,能够实现正常支付的功能即可.为什么要写下这篇博文,原因有二.其一,微信支付流程中有坑,其二,以后忘记了可以拿出来看看. 配置 1.微信支付需要两个账号,财付通和微信开发者,

随机推荐