支付寶沒有支持RN，所以只能通過在原生封裝支付寶讓RN調用。來一波效果圖：
在沒有安裝支付寶APP的情況下，跳轉網頁支付寶頁面：
整體流程：
1.在螞蟻金服開放平臺申請應用
2.原生集成支付寶
3.原生封裝支付寶
4.RN調用參數定義
5.RN調用原生支付寶支付
一.在螞蟻金服開放平臺申請應用
螞蟻金服開發平臺：https://openhome.alipay.com/platform/manageHome.htm
進入應用：
按照支付寶文檔要求逐步走創建應用流程（審核需要一天左右）：
審核通過之后在接口加簽方式上傳RSA2(SHA256)密鑰(推薦)
進入開發文檔，選擇APP支付：
二：原生集成支付寶
1.導入代碼，進入SDK及DEMO下載，下載含有demo的一項，
2.回到進入iOS集成流程，按照文檔一步步集成到xcode中
（1）把兩個包AlipaySDK.bundle，AlipaySDK.framework導入到xcode中
（2）底層依賴庫的添加：項目 --> build phases --> link binary with libraries
在link binary with libraries中點加號，添加上圖中的依賴文件，如下圖所示。
（3）導入支付寶iosDemo_2.0中的Order.h和Order.m。之后Build一下
（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>并集成
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>
4.WeChatPayManager.m，WeChatPay（重點）js 中會用到。添加標記宏RCT_EXPORT_MODULE()將該模塊導出作為一個組件，實現-(UIView *)view方法，在view方法中初始化了之前建立的WeChatPayBtn。
#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原生支付已全部實現完成
