React-Native之android集成支付宝

支付宝流程效果图

原文：http://www.jianshu.com/p/7bb00d8e8524



充值



android原生确认支付界面



付款详情



正在付款

整体思路：

1.在蚂蚁金服开放平台申请应用

2.在android原生集成支付宝

3.封装android原生

4.RN与android的通信

一.在蚂蚁金服开放平台申请应用

蚂蚁金服开放平台链接：https://openhome.alipay.com/platform/manageHome.htm

1.在注册登录成功之后选择应用



选择应用

2.选择创建应用，按照文档流程申请应用



申请应用

二、在android原生集成支付宝

1.在app目录下面新建一个libs的目录

2.把支付宝的SDK复制粘贴到libs目录下



粘贴SDK.png

3.选择SDK右键选择add as library

4.修改Manifest，在工程的AndroidManifest.xml文件里面添加声明：

<activity
android:name="com.alipay.sdk.app.H5PayActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" >
</activity>
<activity
android:name="com.alipay.sdk.auth.AuthActivity"
android:configChanges="orientation|keyboardHidden|navigation"
android:exported="false"
android:screenOrientation="behind" >
</activity>

如果此时com.alipay.sdk.auth.AuthActivity报红说明未找到这个包。解决方法：

往build.gradle（有app的）中添加下面篮框的内容



00682750-1D48-4548-B851-7047C71D14D8.png

和权限声明：

<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" />

三.封装android原生

1.新建一个支付的acitivity,



新建一个新的acitivity.png



输入activity的name.png

2.进入activity_pay.xml文件点击text



activity_pay.xml文件.png

3.把activity_pay.xml的源码删除，改成我现在的布局：



activity_pay.xml的源码.png

4.PayActivity文件 添加取消按键onBack点击方法，

public void onBack(View v){
finish();
}

5.根据蚂蚁金服开放平台提供的alipay_demo中的PayDemoActivity.java中添加支付接口，这里我的加签过程是在服务端配置返回的key,EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX)（生产环境不需要调用）中如果EnvUtils报红，选中alt+enter就能引入头文件

public void payV2(View v) {
Bundle bundle = getIntent().getExtras();
String key = bundle.getString("key");
final String orderInfo = key;
//支付宝沙箱android测试需要调用
EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX);
Runnable payRunnable = new Runnable() {
@Override
public void run() {
PayTask alipay = new PayTask(PayActivity.this);
Map<String, String> result = alipay.payV2(orderInfo, true);
Log.i("msp", result.toString());

Message msg = new Message();
msg.what = SDK_PAY_FLAG;
msg.obj = result;
mHandler.sendMessage(msg);
}
};
Thread payThread = new Thread(payRunnable);
payThread.start();
}

6.此时会报SDK_PAY_FLAG，所以我们要添加进去

private static final int SDK_PAY_FLAG = 1;
private static final int SDK_AUTH_FLAG = 2;

支付回调mHandler方法

@SuppressLint("HandlerLeak")
private Handler mHandler = new Handler() {
@SuppressWarnings("unused")
public void handleMessage(Message msg) {
switch (msg.what) {
case SDK_PAY_FLAG: {
@SuppressWarnings("unchecked")
PayResult payResult = new PayResult((Map<String, String>) msg.obj);
String resultInfo = payResult.getResult();
String resultStatus = payResult.getResultStatus();
Toast.makeText(PayActivity.this, resultStatus, Toast.LENGTH_SHORT).show();
// 判断resultStatus 为9000则代表支付成功
if (TextUtils.equals(resultStatus, "9000")) {
// 该笔订单是否真实支付成功，需要依赖服务端的异步通知。
Toast.makeText(PayActivity.this, "支付成功", Toast.LENGTH_SHORT).show();
} else {
// 该笔订单真实的支付结果，需要依赖服务端的异步通知。
Toast.makeText(PayActivity.this, "支付失败", Toast.LENGTH_SHORT).show();
}
break;
}
case SDK_AUTH_FLAG: {
@SuppressWarnings("unchecked")
AuthResult authResult = new AuthResult((Map<String, String>) msg.obj, true);
String resultStatus = authResult.getResultStatus();

// 判断resultStatus 为“9000”且result_code
// 为“200”则代表授权成功，具体状态码代表含义可参考授权接口文档
if (TextUtils.equals(resultStatus, "9000") && TextUtils.equals(authResult.getResultCode(), "200")) {
// 获取alipay_open_id，调支付时作为参数extern_token 的value
// 传入，则支付账户为该授权账户
Toast.makeText(PayActivity.this,
"授权成功\n" + String.format("authCode:%s", authResult.getAuthCode()), Toast.LENGTH_SHORT)
.show();
} else {
// 其他状态值则为授权失败
Toast.makeText(PayActivity.this,
"授权失败" + String.format("authCode:%s", authResult.getAuthCode()), Toast.LENGTH_SHORT).show();

}
break;
}
default:
break;
}
};
};

此时报红的PayResult，AuthResult，需要去到支付宝的alipay_demo中往工程中加入这两个文件，方法是复制这两个文件到工程的相应目录下粘贴

7.获取SDK版本号

public void getSDKVersion() {
PayTask payTask = new PayTask(this);
String version = payTask.getVersion();
Toast.makeText(this, version, Toast.LENGTH_SHORT).show();
}

PayActivity.java文件源码完成

此时支付宝的原生集成已经完成 所有调用全在PayActivity.java中

四.RN与android的通信

1.创建一个类继承ReactContextBaseJavaModule，这个类放入被RN调用的方法封装成有个原生模块

package com.cloudprocessing;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
* Created by  on 2017/3/3.
*/

public class MyNativeModule  extends ReactContextBaseJavaModule{
private Context mContext;
//构造方法
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}
@Override
public String getName() {
//MyNativeModule 需要此名字来调用该类方法
return "MyNativeModule";
}
//函数不能有返回值,被调用的原生代码是异步的,原生代码执行结束之后只能通过回调函数发送消息给RN

//rnCallNative为RN需要调用的方法
@ReactMethod
public void rnCallNative(String msg){
//添加意图
Intent intent = new Intent(mContext,PayActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
//bundle为需要传给PayActivity的加密签名
Bundle bundle = new Bundle();
bundle.putString("key",msg);
intent.putExtras(bundle);
//startActivity
mContext.startActivity(intent,bundle);
}

}

2.创建一个类实现接口ReactPackage包管理器，把上面一步创建的类添加到原生模块（nativeModule）列表里

package com.cloudprocessing;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Collection;
import java.util.Collections;
import java.util.List;
import java.util.ArrayList;

/**
* Created by  on 2017/3/3.
*/

public class MyReactPackge implements ReactPackage{
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new MyNativeModule(reactContext));
return modules;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

3.将第二步中创建的包管理器添加到ReactPackage列表里的getPackges方法 MainApplication中加入new MyReactPackge()

package com.cloudprocessing;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.lwansbrough.RCTCamera.RCTCameraPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTCameraPackage(),
new MyReactPackge()
);
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

五.js调用封装的android原生组件

1.引入NativeModules

import { NativeModules} from 'react-native';

2.定义一个view,当点击的时候触发原生事件

<TouchableHighlight style={{width:width-80,height:40,alignItems:'center',marginTop:50}} underlayColor='#28780b'
onPress={()=>this.nativeAndroid()}>
<View style={{width:width-80,height:40,alignItems:'center',justifyContent:'center',
backgroundColor:'#35a40c',borderRadius:5}}>
<Text style={{color:'white',fontSize:17}}>确定</Text>
</View>
</TouchableHighlight>

3.点击的nativeAndroid方法，MyNativeModule是安卓原生MyNativeModule文件中的getName返回的名字，rnCallNative是rnCallNative为RN需要调用的方法,下面的触发方法中的this.state.signedString是服务器对支付宝加签返回的签名，也就是客户端调支付宝时用到的orderInfo

nativeAndroid(){
var sign = this.state.signedString
if(sign){
NativeModules.MyNativeModule.rnCallNative(sign)
}
}

到这里RN调用安卓原生支付宝的步骤已全部完成