React Native (IOS和Android) 支付宝和微信支付集成实战（支付宝Android篇）

序言：React Native无论是在社区和应用程度上，在国内外是十分广泛和普及的。而支付宝和微信在支付模块上都有或多或少的支持，虽然没有完整的Demo，不过在我做过一个相关集成的项目后，在此我把相关的步骤和方法总结出来和大家分享，希望能够帮助大家少走弯路，快速集成。

支付宝——Android集成

一、下载客户端SDK并且进行配置

在支付宝官网下载其SDKhttps://docs.open.alipay.com/54/104509

用Android Studio 打开你项目里的/android，以Project形式展开项目，并且在/app目录下新建文件夹libs（如果没有该文件夹），

将下载的SDK jar包拖入或复制至libs文件夹内，如下图：

接着在 /android/app/build.gradle 内添加依赖，如下图，注意jar包的名字要统一：

然后修改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" />

最后再在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.** { *;}

至此Android配置已经完成，如果你在AndroidManifest.xml下，用Android Studio发现 alipay的 <actvity> 标签是红色未知引用状态，重启Android Studio即可，若还是红色，右键 alipaySdk jar包，选择Add as library 并且点击OK 即可。

二、编写React Native原生代码

React Native 提供了调用原生代码的方法，具体可以参考官方文档 Native Modules http://facebook.github.io/react-native/docs/native-modules-android.html

首先我们用Android Studio 以Android文件目录格式打开，并且在java/com.app_demo目录下创建alipay package, 并且在其目录下新建PayAction.java和PayResult.java文件，如下图：

接着调用react native 原生内容，编写方法，PayAction代码如下：

package com.app_demo.alipay;
import android.app.Activity;
import android.text.TextUtils;
import com.alipay.sdk.app.EnvUtils;
import com.alipay.sdk.app.PayTask;
import com.app_demo.MainActivity;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
public class PayAction extends ReactContextBaseJavaModule {
public PayAction(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "PayAction";
}
@ReactMethod
public void pay(final String orderInfo, final Promise promise) {
//支付宝沙箱android测试需要调用
//EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
Runnable payRunnable = new Runnable() {
@Override
public void run() {
Activity activty = MainActivity.getActivity();
PayTask alipay = new PayTask(activty);
Map<String, String> result = alipay.payV2(orderInfo, true);
PayResult payResult = new PayResult((Map<String, String>) result);
String resultInfo = payResult.getResult();
String resultStatus = payResult.getResultStatus();
String memo = payResult.getMemo();
try {
if (TextUtils.equals(resultStatus, "9000")) {
promise.resolve(resultInfo);
} else {
promise.reject("error", memo);
}
} catch (Exception e) {
promise.reject("error", e.getMessage());
}
}
};
Thread payThread = new Thread(payRunnable);
payThread.start();
}
}

PayResult 代码如下：

package com.app_demo.alipay;
import java.util.Map;
import android.text.TextUtils;
public class PayResult {
private String resultStatus;
private String result;
private String memo;
public PayResult(Map<String, String> rawResult) {
if (rawResult == null) {
return;
}
for (String key : rawResult.keySet()) {
if (TextUtils.equals(key, "resultStatus")) {
resultStatus = rawResult.get(key);
} else if (TextUtils.equals(key, "result")) {
result = rawResult.get(key);
} else if (TextUtils.equals(key, "memo")) {
memo = rawResult.get(key);
}
}
}
@Override
public String toString() {
return "resultStatus={" + resultStatus + "};memo={" + memo
+ "};result={" + result + "}";
}
/**
* @return the resultStatus
*/
public String getResultStatus() {
return resultStatus;
}
/**
* @return the memo
*/
public String getMemo() {
return memo;
}
/**
* @return the result
*/
public String getResult() {
return result;
}
}

紧接着将该方法暴露出来给React Native 前端使用，即在com.app_demo下创建AlipayReactPackage.java文件，代码如下

package com.app_demo;
import com.app_demo.alipay.PayAction;
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 AlipayReactPackage 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 PayAction(reactContext));
return modules;
}
}