React Native (IOS和Android) 支付宝和微信支付集成实战(支付宝IOS篇)
2018-01-08 18:03
851 查看
序言:React Native无论是在社区和应用程度上,在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持,虽然没有完整的Demo,不过在我做过一个相关集成的项目后,在此我把相关的步骤和方法总结出来和大家分享,希望能够帮助大家少走弯路,快速集成。
支付宝——IOS集成
一、下载客户端SDK并且进行配置
在支付宝官网下载
其SDK https://docs.open.alipay.com/54/104509
1.用XCode打开你的项目即/ios文件夹,打开后在App_Demo文件夹下新建Group,命名为Alipay。接着在实际路径下,
ios/APP_Demo,创建文件夹Alipay,并且粘贴两个sdk文件至该目录下。 然后再将该目录下的AlipaySDK两个文件拖入Alipay目录下,点击OK即可。
2.
XCode选择Build Phases选项卡,展开 Link Binary With Libraries 添加支付宝相关依赖
添加完毕后如下图:
3.在Alipay下新建PayAction.hHeader File 头文件和PayAction.m
Objective-C 文件 ,注意在新建的时候,如果没有实际Alipay的文件夹路径,要新建该文件夹,如下图:
4. 编写IOS端的代码,实现React Native调用原生方法,PayAction.h 和PayAction.m的代码如下:
至此支付宝在IOS端的配置就完成了。
二、在客户端调用React Native方法
由于我们定义的方法名和方法和Android的一致,所以在此无需进行其他修改,可以直接执行。
鸣谢:我是一名来自盛安德的Shinetecher,感谢盛安德公司及同事们对IT技术的支持,分享和热情,让我有时间和动力完成此博文。
联系:欢迎各位朋友有任何问题和建议留言至此博客下,或者添加本人微信号:liyijia428 进行沟通交流学习
源码:https://github.com/likeconan/Alipay_Wechat_Integration
支付宝——IOS集成
一、下载客户端SDK并且进行配置
在支付宝官网下载
其SDK https://docs.open.alipay.com/54/104509
1.用XCode打开你的项目即/ios文件夹,打开后在App_Demo文件夹下新建Group,命名为Alipay。接着在实际路径下,
ios/APP_Demo,创建文件夹Alipay,并且粘贴两个sdk文件至该目录下。 然后再将该目录下的AlipaySDK两个文件拖入Alipay目录下,点击OK即可。
2.
XCode选择Build Phases选项卡,展开 Link Binary With Libraries 添加支付宝相关依赖
添加完毕后如下图:
3.在Alipay下新建PayAction.hHeader File 头文件和PayAction.m
Objective-C 文件 ,注意在新建的时候,如果没有实际Alipay的文件夹路径,要新建该文件夹,如下图:
4. 编写IOS端的代码,实现React Native调用原生方法,PayAction.h 和PayAction.m的代码如下:
// // PayAction.h // App_Demo // // Created by Conan on 2018/1/9. // Copyright © 2018年 Facebook. All rights reserved. // #import <React/RCTBridgeModule.h> @interface PayAction : NSObject <RCTBridgeModule> @end
// // PayAction.m // App_Demo // // Created by Conan on 2018/1/9. // Copyright © 2018年 Facebook. All rights reserved. // #import <Foundation/Foundation.h> #import "PayAction.h" #import <AlipaySDK/AlipaySDK.h> @implementation PayAction RCT_EXPORT_MODULE(); RCT_REMAP_METHOD(findEvents, orderString:(NSString *)orderString findEventsWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSString *appScheme = @"alisdkdemo"; [[AlipaySDK defaultService] payOrder:orderString fromScheme:appScheme callback:^(NSDictionary *resultDic) { resolve(resultDic); }]; } @end5.最后修改AppDelegate.m文件,新增更改内容如下:
#import <AlipaySDK/AlipaySDK.h> - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { if ([url.host isEqualToString:@"safepay"]) { //跳转支付宝钱包进行支付,处理支付结果 [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) { NSLog(@"result = %@",resultDic); }]; } return YES; } // NOTE: 9.0以后使用新API接口 - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options { if ([url.host isEqualToString:@"safepay"]) { //跳转支付宝钱包进行支付,处理支付结果 [[AlipaySDK defaultService] processOrderWithPaymentResult:url standbyCallback:^(NSDictionary *resultDic) { NSLog(@"result = %@",resultDic); }]; } return YES; }然后尝试build该项目,如果你发现Build不成功,并且提示的是AlipaySDK.h 头文件无法找到,那么你就需要在Build Settings里的Search Paths 中修改 Header Search Paths 如下图显示:
至此支付宝在IOS端的配置就完成了。
二、在客户端调用React Native方法
由于我们定义的方法名和方法和Android的一致,所以在此无需进行其他修改,可以直接执行。
鸣谢:我是一名来自盛安德的Shinetecher,感谢盛安德公司及同事们对IT技术的支持,分享和热情,让我有时间和动力完成此博文。
联系:欢迎各位朋友有任何问题和建议留言至此博客下,或者添加本人微信号:liyijia428 进行沟通交流学习
源码:https://github.com/likeconan/Alipay_Wechat_Integration
相关文章推荐
- React Native (IOS和Android) 支付宝和微信支付集成实战(支付宝Android篇)
- React Native (IOS和Android) 支付宝和微信支付集成实战(微信支付Android篇)
- React Native (IOS和Android) 支付宝和微信支付集成实战(介绍篇)
- React Native (IOS和Android) 支付宝和微信支付集成实战(微信支付服务端篇)
- React Native (IOS和Android) 支付宝和微信支付集成实战(微信IOS篇)
- React Native (IOS和Android) 支付宝和微信支付集成实战(支付宝服务端篇)
- React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)
- React-Native之android集成支付宝
- (Android集成支付宝支付)react-native实现支付宝支付
- React Native iOS 集成支付宝支付功能--回调问题
- React Native 中实现原生android集成微信支付
- React-Native之iOS集成支付宝支付
- react-native,android-ios同时开发Hybrid开发
- React Native之图片保存到本地相册(ios android)
- React Native 轻松集成分享功能(Android 篇)
- 用 jpush-react-native 插件快速集成推送功能(Android 篇)
- React-Native Android 与 IOS App使用一份代码实现方法
- react-native-smart-barcode目前最好用的二维码扫描组件(IOS、android)
- ios原生集成React Native
- 【转】iOS集成 jpush-react-native常见问题