reactNative 集成支付宝支付
一、android集成
1、下载支付宝sdk，在android/app下新建libs文件夹，将sdk放入此目录
sdk下载地址
2、将libs目录下的alipaySDK-20180403.aar导入，在android/app/build.gradle里添加如下代码：
dependencies {
......
compile (name: 'alipaySdk-15.6.8-20191021122514', ext: 'aar')
.....
}
2.5、在android/build.gradle添加如下：
allprojects {
repositories {
mavenLocal()
flatDir {
//支付宝需要
dirs 'libs'
}
......
}
}
3、在android/app/src/AndroidManifest.xml文件里面添加声明：
<!-- 支付宝权限声明 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
4、在android/app/proguard-rules.pro添加混淆规则
-keep class com.alipay.android.app.IAlixPay{
*;}
-keep class com.alipay.android.app.IAlixPay$Stub{
*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{
*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{
*;}
-keep class com.alipay.sdk.app.PayTask{
public *;}
-keep class com.alipay.sdk.app.AuthTask{
public *;}
-keep class com.alipay.sdk.app.H5PayCallback {
<fields>;
<methods>;
}
-keep class com.alipay.android.phone.mrpc.core.** {
*; }
-keep class com.alipay.apmobilesecuritysdk.** {
*; }
-keep class com.alipay.mobile.framework.service.annotation.** {
*; }
-keep class com.alipay.mobilesecuritysdk.face.** {
*; }
-keep class com.alipay.tscenter.biz.rpc.** {
*; }
-keep class org.json.alipay.** {
*; }
-keep class com.alipay.tscenter.** {
*; }
-keep class com.ta.utdid2.** {
*;}
-keep class com.ut.device.** {
*;}
5、在android/app/src/main/java/com/项目文件里面创建alipay文件夹，和微信支付一样，处理回调
6、编写 Module，在alipay包下创建AlipayModule.java，代码如下：
package com.test.alipay; //test是包名，根据不同项目进行修改
import com.alipay.sdk.app.EnvUtils;
import com.alipay.sdk.app.H5PayCallback;
import com.alipay.sdk.util.H5PayResultModel;
import com.alipay.sdk.app.AuthTask;
import com.alipay.sdk.app.PayTask;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import java.util.Map;
public class AlipayModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext reactContext;
public AlipayModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}
@Override
public String getName() {
return "RCTAlipay";
}
@ReactMethod
public void authWithInfo(final String infoStr, final Promise promise) {
Runnable runnable = new Runnable() {
@Override
public void run() {
AuthTask authTask = new AuthTask(getCurrentActivity());
Map<String, String> map = authTask.authV2(infoStr, true);
promise.resolve(getWritableMap(map));
}
};
Thread thread = new Thread(runnable);
thread.start();
}
// 添加沙箱模式
@ReactMethod
public void setAlipaySandbox(Boolean isSandbox) {
if(isSandbox){
EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
}else {
EnvUtils.setEnv(EnvUtils.EnvEnum.ONLINE);
}
}
@ReactMethod
public void pay(final String orderInfo, final Promise promise) {
Runnable runnable = new Runnable() {
@Override
public void run() {
PayTask payTask = new PayTask(getCurrentActivity());
Map<String, String> map = payTask.payV2(orderInfo, true);
promise.resolve(getWritableMap(map));
}
};
Thread thread = new Thread(runnable);
thread.start();
}
@ReactMethod
public void payInterceptorWithUrl(final String h5PayUrl, final Promise promise) {
PayTask payTask = new PayTask(getCurrentActivity());
payTask.payInterceptorWithUrl(h5PayUrl, true, new H5PayCallback() {
@Override
public void onPayResult(H5PayResultModel h5PayResultModel) {
WritableMap map = Arguments.createMap();
map.putString("resultCode", h5PayResultModel.getResultCode());
map.putString("returnUrl", h5PayResultModel.getReturnUrl());
promise.resolve(map);
}
});
}
@ReactMethod
public void getVersion(Promise promise) {
PayTask payTask = new PayTask(getCurrentActivity());
promise.resolve(payTask.getVersion());
}
private WritableMap getWritableMap(Map<String, String> map) {
WritableMap writableMap = Arguments.createMap();
for (Map.Entry<String, String> entry : map.entrySet()) {
writableMap.putString(entry.getKey(), entry.getValue());
}
return writableMap;
}
}
7、编写 Package，在alipay包下创建AlipayPackage.java，代码如下：
package com.test.alipay; //test是包名，根据不同项目进行修改
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;
public class AlipayPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new AlipayModule(reactContext));
}
// Deprecated from RN 0.47
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
8、最后在 Android 这边要做的最后一件事就是注册这个模块，在MainApplication中注册模块：
import com.test.alipay.AlipayPackage; //test是包名，根据不同项目进行修改
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new AlipayPackage()); // <-- 注册模块
return packages;
}
二、ios集成
1、进入ios目录，cmd输入命令pod install
2、下载sdk，将AlipaySDK.bundle，AlipaySDK.framework文件放入ios目录下，进入xcode中点击项目右键add file …导入这两个文件到项目中
3、在Build Phases选项卡的Link Binary With Libraries中，增加以下依赖：
- 如果是Xcode 7.0之后的版本，需要添加libc++.tbd、libz.tbd；
如果是Xcode 7.0之前的版本，需要添加libc++.dylib、libz.dylib。
4、在项目目录下创建Alipay文件夹，并创建AlipayMoudle模块，如下图所示：
5、编写AlipayModule.h代码如下：
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface AlipayMoudle : NSObject <RCTBridgeModule>
@end
6、编写AlipayModule.m代码如下：
#import <Foundation/Foundation.h>
#import "AlipayModule.h"
#import <AlipaySDK/AlipaySDK.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTBridge.h>
#import <React/RCTLog.h>
#import <React/RCTImageLoader.h>
@implementation AlipayMoudle{
RCTPromiseResolveBlock relustBlock;
}
@synthesize bridge = _bridge;
- (instancetype)init
{
self = [super init];
if (self) {
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleOpenURL:) name:@"RCTOpenURLNotification" object:nil];
}
return self;
}
RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
relustBlock = resolve;
//应用注册scheme,在AliSDKDemo-Info.plist定义URL types
NSString *appScheme = @"alisdkdemo";
if ([NSThread isMainThread]) {
[[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
resolve(resultDic);
}];
}else{
dispatch_async(dispatch_get_main_queue(), ^{
[[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
resolve(resultDic);
}];
});
}
}
- (BOOL)handleOpenURL:(NSNotification *)aNotification
{
NSString * aURLString = [aNotification userInfo][@"url"];
if (![aURLString containsString:@"alisdkdemo"]) {
return NO;
}
NSArray *relustArr = [aURLString componentsSeparatedByString:@"?"];
if (relustArr.lastObject) {
NSString *jsonStr = (__bridge_transfer NSString *)CFURLCreateStringByReplacingPercentEscapesUsingEncoding(NULL,(__bridge CFStringRef)relustArr.lastObject,CFSTR(""),CFStringConvertNSStringEncodingToEncoding(NSUTF8StringEncoding));
NSData *jsonData = [jsonStr dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:jsonData
options:NSJSONReadingMutableContainers
error:nil];
relustBlock(dict);
}
return YES;
}
RCT_EXPORT_MODULE(Alipay);
@end
7、配置
应用注册scheme,在AliSDKDemo-Info.plist定义URL types
箭头所指的设置必须和上一步中的NSString *appScheme = @“alisdkdemo”;必须保持一致，
Identifler填写为alipay
8、编写调用原生模块的方法，调起支付宝支付-------调用
import {
NativeModules ,Platform} from 'react-native';
async pay(payData) {
// NativeModules.Alipay.setAlipaySandbox(true) //沙箱---仅限于android
NativeModules.Alipay.pay(payData).then((alipayData)=>{
if(Platform.OS === 'ios'){
if(alipayData.memo.ResultStatus==9000){
callback(alipayData)
}
}else{
if(alipayData.resultStatus==9000){
callback(alipayData)
}
}
})
}