React-Native之iOS集成支付宝支付

支付宝没有支持RN，所以只能通过在原生封装支付宝让RN调用。来一波效果图：

原文http://www.jianshu.com/p/bde956449299



选择支付宝支付.png



充值提示.png

在没有安装支付宝APP的情况下，跳转网页支付宝页面：



支付宝网页页面.png

整体流程：

1.在蚂蚁金服开放平台申请应用

2.原生集成支付宝

3.原生封装支付宝

4.RN调用参数定义

5.RN调用原生支付宝支付

一.在蚂蚁金服开放平台申请应用

蚂蚁金服开发平台：https://openhome.alipay.com/platform/manageHome.htm

进入应用：



55CCD31C-C591-4570-AE82-226840C54F60.png

按照支付宝文档要求逐步走创建应用流程（审核需要一天左右）：



9E1793DD-9407-4999-9D95-47F1E0DEAA46.png

审核通过之后在接口加签方式上传RSA2(SHA256)密钥(推荐)



添加密钥.png

进入开发文档，选择APP支付：



0012210B-4DC1-4446-AEE4-5BB15D2391E7.png

二：原生集成支付宝

1.导入代码，进入SDK及DEMO下载，下载含有demo的一项，



646B6C0C-FF0E-41C3-AFC1-0E87DA542C00.png

2.回到进入iOS集成流程，按照文档一步步集成到xcode中

（1）把两个包AlipaySDK.bundle，AlipaySDK.framework导入到xcode中

（2）底层依赖库的添加：项目 --> build phases --> link binary with libraries

在link binary with libraries中点加号，添加上图中的依赖文件，如下图所示。



1C97D616-57A4-4C34-9A11-6446B501A9FC.png

（3）导入支付宝iosDemo_2.0中的Order.h和Order.m。之后Build一下



88B58AA3-470D-4D3E-9CF3-973A96E00C88.png

（4）在AppDelegate.m中，引入：

import <AlipaySDK/AlipaySDK.h> 添加下面代理（注意区分是否是iOS9之后）

- (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;
}

三.原生封装支付宝

1.新建一个支付按钮继承与UIButton的类(我的是WeChatPayBtn)

在WeChatPayBtn.h中引入头文件：#import "Order.h"，#import <AlipaySDK/AlipaySDK.h>，#import <RCTBridge.h>，#import <RCTConvert.h>，#import <RCTComponent.h>，#import <UIView+React.h>，#import <RCTEventDispatcher.h>并集成



引入文件.png

2.在WeChatPayBtn.m中 doAlipayPay是调用支付宝支付，按钮点击方法pay中用到一个代理。WeChatPayBtn的代理是即将要新建的继承于RCTViewManager的WeChatPayManager, _signedString是与JS通信传入的参数，下面的第四条RN调用参数定义会介绍

#import "WeChatPayBtn.h"
#import "WXApiManager.h"
#import "WXApiObject.h"
#import "WXApi.h"

@implementation WeChatPayBtn
-(instancetype)initWithFrame:(CGRect)frame{
if ((self = [super initWithFrame:frame])) {
[self addTarget:self action:@selector(pay)
forControlEvents:UIControlEventTouchUpInside];
[self setBackgroundColor:[UIColor redColor]];
}
return self;
}
//调起支付宝支付
- (void)doAlipayPay
{
NSString *appScheme = @"CloudProcessing";
NSLog(@"支付宝签名：%@",_signedString);
// NOTE: 调用支付结果开始支付
[[AlipaySDK defaultService] payOrder:_signedString fromScheme:appScheme callback:^(NSDictionary *resultDic) {
NSLog(@"支付宝支付结果：reslut = %@",resultDic);
}];
}
//点击btn时 触发支付宝支付
-(void)pay{
if([_delegate respondsToSelector:@selector(ButtonClicked)]){
[self.delegate ButtonClicked];
}
//支付宝支付
[self doAlipayPay];
}

3.新建新建的继承于RCTViewManager的WeChatPayManager

注意看WeChatPayManager.h只引入了#import <Foundation/Foundation.h>



WeChatPayManager.h.png

4.WeChatPayManager.m，WeChatPay（重点）js 中会用到。添加标记宏RCT_EXPORT_MODULE()将该模块导出作为一个组件，实现-(UIView *)view方法，在view方法中初始化了之前建立的WeChatPayBtn。



WeChatPayManager.m.png

#import "WeChatPayManager.h"
#import "WXApi.h"
#import "RCTViewManager.h"
#import "WeChatPayBtn.h"
@interface WeChatPay : RCTViewManager
@property (nonatomic,strong) WeChatPayBtn *bt;
@end

@implementation WeChatPay
RCT_EXPORT_MODULE()
-(UIView *)view{
_bt = [[WeChatPayBtn alloc]initWithFrame:CGRectMake(20, 250, 200, 40)];
_bt.delegate = self;
NSLog(@"进入_we_btn");
return _bt;
}
@end

原生部分代码最基本的部分完成了，下面还需要定义参数（作用是从react native 的js传值给WeChatPayBtn中的支付宝支付签名_signedString）

四.RN调用参数定义

需要用到的参数是signedString，服务端返回的支付宝订单加签，在调用支付宝支付的入参。

1.在WeChatPayBtn.h文件中定义参数signedString

//支付宝签名
@property (nonatomic,copy) NSString *signedString;

2.WeChatPayManager.m文件 中导出参数 RCT_EXPORT_VIEW_PROPERTY(signedString, NSString)

#import "WeChatPayManager.h"
#import "WXApi.h"
#import "RCTViewManager.h"
#import "WeChatPayBtn.h"
@interface WeChatPay : RCTViewManager<WeChatDelegate>
@property (nonatomic,strong) WeChatPayBtn *bt;
@end

@implementation WeChatPay
RCT_EXPORT_MODULE()
//将参数导出给JS
RCT_EXPORT_VIEW_PROPERTY(signedString, NSString)
-(UIView *)view{
_bt = [[WeChatPayBtn alloc]initWithFrame:CGRectMake(20, 250, 200, 40)];
_bt.delegate = self;
NSLog(@"进入_we_btn");
return _bt;
}

五.RN调用原生支付宝支付

1.接下来实现JS中的组件封装与简单调用。我是在一个JS文件中完成组件封装和调用。你也可以分组件完成。首先导入原生组件，从导入中取到创建的组件，作为默认的组件导出，以供其他JS调用。这里，我们其实可以直接在其他JS中调用了，但是为了进行参数的封装，我们也需要将其封装成一个单独的组件

js中引入import {requireNativeComponent} from 'react-native'，

var PayManage = requireNativeComponent('WeChatPay',WeChatPayMan)

WeChatPay就是在原生中WeChatPayManager.m中定义的, PayManage 是调用原生的组件，

export class WeChatPayMan extends Component {
//传递到原生的属性
static propTypes = {
signedString:PropTypes.string,
};
render() {
return (
<PayManage {...this.props}/>
);
}

componentDidMount() {
console.log('支付宝支付JS界面')
}
}

上面代码中static propTypes中的signedString是需要传递到原生的支付宝加签

2.封装组件的调用。下面代码所示是前面封装组件的调用，这里我们已经封装了很多JS需要传递给原生的参数, signedString就是原生中调起支付宝支付的签名（在服务器后台配置通过网络请求返回）

<WeChatPayMan
style={{marginTop:100,width:width-80,height:40,alignItems:'center',
justifyContent:'center',borderRadius:5,backgroundColor:'#35a40c'
}}
signedString={this.state.signedString}
}}
>

到这里RN调用iOS原生支付已全部实现完成