react-native 集成支付宝sdk

Z时代
2024-01-10
分类：综合

react

Android

1.在蚂蚁金服开放平台下载支付宝SDK

2.在项目的android/app文件夹下新建文件夹libs，并将sdk放入其中

3.修改android/app/build.gradle

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"]) // 若有这一行，则自动将libs下的所有jar包引入
compile “com.android.support:appcompat-v7:23.0.1”
compile project(‘:RCTWeChat’)
compile files('libs/alipaySdk-20180601.jar') //集成支付宝sdk添加这一行
compile “com.facebook.react:react-native:+” // From node_modules
}

4.修改android/app/src/main/AndroidManifest.xml


<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" />
注意参考原文件将标签加入相应位置

5.修改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.** { *;}

6.在com.xx.xx创建包名alipay

7.编写 Module

在com.xx.xx.alipay包下创建AlipayModule.java，代码如下：

package com.xxx.alipay; // 注意这里com.xxx要修改成你的包名
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

8.编写 Package，在com.xx.xx.alipay包下创建AlipayPackage.java，代码如下：

package com.xxx.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 createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List createNativeModules(
ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
modules.add(new AlipayModule(reactContext));
return modules;
}
}

9.在com.xx.xx.MainApplication中注册模块

…
import com.xxx.alipay.AlipayPackage; //引入模块
…
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
// …other packages
new AlipayPackage() // <-- 注册模块
);
}

10.在RN中调用

1.编写Alipay.js

import { NativeModules } from ‘react-native’;
export default NativeModules.Alipay;

2.在要使用的页面引入Alipay.js

import Alipay from './your/path/to/Alipay'; //这里修改成你Alipay.js的地址

然后就可以调用了

try{
console.log(‘开始’)
let ret = await Alipay.pay(allOrderInfo)
console.log(ret)
console.log(‘结束’)
}
catch (e){
console.log(‘出错了’)
console.log(e)
}

这里的传参请参考开发平台中的请求参数文档

IOS

1.启动IDE(如Xcode),把iOS包中的压缩文件中以下文件拷贝到项目文件夹下，并导入到项目工程中

用xcode打开ios工程，右键target选择New Group，新建一个Group Alipay。并将IOS包中的AlipaySDK.bundle、AlipaySDK.framework拷贝在其中

将AlipaySDK.bundle添加到工程中(右键根项目，选择Add Files to)

在Build Phases选项卡的Link Binary With Libraries中，增加以下依赖：

其中支付宝依赖库在新建的文件夹alipaysdk中选择获取;

如果是Xcode 7.0之后的版本，需要添加libc++.tbd、libz.tbd；

如果是Xcode 7.0之前的版本，需要添加libc++.dylib、libz.dylib

2.在Alipay下新建AlipayModule.h和AlipayModule.m

编写AlipayModule.h代码如下：

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface AlipayMoudle : NSObject <RCTBridgeModule>
@end

编写AlipayModule.m代码如下：

#import "AlipayModule.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