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 WeChatPayRCT_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 WeChatPayRCT_EXPORT_MODULE()//将参数导出给JSRCT_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原生支付已全部实现完成