React-Native之android集成支付宝

支付宝流程效果图

充值 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调用安卓原生支付宝的步骤已全部完成