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;
    }
}

然后修改MainActivity里的方法，使MainActivity可以在PayAction中可以获取，修改后代码如下：

package com.app_demo;

import android.app.Activity;
import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.facebook.soloader.SoLoader;

public class MainActivity extends ReactActivity {

    private static Activity mCurrentMainActivity = null;

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "App_Demo";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mCurrentMainActivity = this;
    }

    public static Activity getActivity() {
        Activity activity = mCurrentMainActivity;
        return activity;
    }
}

接着在MainApplication 里添加刚刚写好的AlipayReactPackage包，代码如下：

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

最后编写React Native Js内容，调用该pay方法：

_alipay = () => {
    var payAction = NativeModules.PayAction
    //调用支付宝服务端集成的方法，获取订单信息
    axios.post('http://192.168.1.45:3000/alipay/pay').then(({ data }) => {
      return payAction.pay(data)
    }).then((res) => {
      alert(res)
      //此处处理支付成功的方法
      console.log(res)
    }).catch((err) => {
      alert(err)
      console.log(err)
    })

  }

render(){
    return <View><Button title='Alipay 支付' onPress={this._alipay} /></View>
}

至此支付宝Android端的集成就全部完成了，总体来说，比较简单，代码也很清晰，建议在开发过程中，多以真实App的环境进行开发，因为沙箱偶尔会出现网络或者其他未知的问题，而如果在真实环境中，也会出现各种问题，那就绝对是你代码的问题，例如签名错误。

鸣谢：我是一名来自盛安德的Shinetecher,感谢盛安德公司及同事们对IT技术的支持，分享和热情，让我有时间和动力完成此博文。

联系：欢迎各位朋友有任何问题和建议留言至此博客下，或者添加本人微信号：liyijia428 进行沟通交流学习

源码：https://github.com/likeconan/Alipay_Wechat_Integration

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

猜你喜欢