还是和微信支付一样,不使用任何的npm第三方包(react-native-yunpeng-alipay),使用rn+调用原生方法,所以要有一定的ios和android原生开发经验。
参考
http://fangzf.me/2017/12/05/react-native-集成支付宝/
但是还有坑,请注意:
1 ,申请应用
在蚂蚁金服开放平台
https://open.alipay.com/platform/manageHome.htm申请应用,并签约,在此不做详细介绍
总体下来,支付宝要比微信简单的多,支付宝app这边不需要在APP端配置appid等,只要后台配好返回给app就可以了
2,android集成
1)
将alipaySdk-20180403.jar (目前最新版的sdk类库)包放入
android/app/libs
目录下,如下图。
2)
将libs目录下的alipaySDK-20180403.jar导入,在
android/app/build.gradle
里添加如下代码:
dependencies {
......
compile files('libs/alipaySdk-20180403.jar')
......
}
3)
在android/app/src/AndroidManifest.xml文件里面添加声明:
<!-- 支付宝 activity 声明 -->
<activity
android:name="com.alipay.sdk.app.H5PayActivity"
android:configChanges="orientation|keyboardHidden|navigation|screenSize"
android:exported="false"
android:screenOrientation="behind"
android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
<activity
android:name="com.alipay.sdk.app.H5AuthActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind"
android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
<!-- 支付宝权限声明 -->
<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)
在com.xx.xx创建包名alipay
比如项目的工程叫zftest,那么在zftest的文件里面创建alipay文件夹,和微信支付一样,处理回调
6)
编写 Module,在alipay包下创建AlipayModule.java,代码如下:
package com.项目工程名.alipay;
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 {
public AlipayModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "Alipay";
}
@ReactMethod
public void pay(final String orderInfo, final Promise promise) {
Runnable payRunnable = new Runnable() {
@Override
public void run() {
WritableMap map = Arguments.createMap();
PayTask alipay = new PayTask(getCurrentActivity());
Map<String, String> result = alipay.payV2(orderInfo,true);
for (Map.Entry<String, String> entry: result.entrySet())
map.putString(entry.getKey(), entry.getValue());
promise.resolve(map);
}
};
// 必须异步调用
Thread payThread = new Thread(payRunnable);
payThread.start();
}
}
7)
编写 Package,在alipay包下创建AlipayPackage.java,代码如下:
package com.项目工程名.alipay;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class AlipayPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new AlipayModule(reactContext));
return modules;
}
}
8)
最后在 Android 这边要做的最后一件事就是注册这个模块,在MainApplication中注册模块:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// ...other packages
new AlipayPackage() // <-- 注册模块
);
}
注意了前提是需要import导入
AlipayPackage这个包
3, ios集成
1)启动IDE(如Xcode),把iOS包中的压缩文件中以下文件拷贝到项目文件夹下,并导入到项目工程中。
AlipaySDK.bundle
AlipaySDK.framework
2)
在Build Phases选项卡的Link Binary With Libraries中,增加以下依赖:
- 如果是Xcode 7.0之后的版本,需要添加libc++.tbd、libz.tbd;
- 如果是Xcode 7.0之前的版本,需要添加libc++.dylib、libz.dylib。
3)
在项目目录下创建Group Alipay,并创建AlipayMoudle模块,如下图所示:
4)
编写AlipayModule.h代码如下:
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface AlipayMoudle : NSObject <RCTBridgeModule>
@end
5)编写AlipayModule.m代码如下:
#import "AlipayMoudle.h"
#import <AlipaySDK/AlipaySDK.h>
@implementation AlipayMoudle
RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject){
//应用注册scheme,在AliSDKDemo-Info.plist定义URL types
NSString *appScheme = @"alisdkdemo";
[[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
resolve(resultDic);
}];
}
RCT_EXPORT_MODULE(Alipay);
@end
6)
应用注册scheme,在AliSDKDemo-Info.plist定义URL types
箭头所指的设置必须和上一步中的
NSString
*
appScheme
=
@"zftest"
;必须保持一致,
否则在支付成功后没法回到商户app中,同样和无法拿到成功与否的结果,这是一个坑,注意了,原文博客是没有注明的。
4,react-native
编写调用原生模块的方法,调起支付宝支付
1)
修改原生代码后,需要重新打包运行程序:
react-native run-android # 运行Android端
react-native run-ios # 运行iOS端
2
)编写
Alipay.js
工具类
import { NativeModules } from 'react-native';
export default NativeModules.Alipay;
3)
调用
Alipay
模块发起支付宝支付:
async pay(res) { // params 为后端提供的参数
let ret = await Alipay.pay(res.result); // 调起支付宝,发起支付
if (ret.resultStatus === '9000') {
console.log('支付宝支付成功了', ret);
// 支付成功回调
} else {
console.log('支付宝支付失败了.', ret);
// 支付失败回调
}
}
res是支付宝服务器返回的数据,格式为:
{
"code": 200,
"status": "success",
"message": "",
"result": "alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2xxxxxxxxxx"
}