react-native集成支付宝支付

还是和微信支付一样，不使用任何的npm第三方包(react-native-yunpeng-alipay)，使用rn+调用原生方法，所以要有一定的ios和android原生开发经验。

参考

http://fangzf.me/2017/12/05/react-native-集成支付宝/

但是还有坑，请注意：

1 ，申请应用

在蚂蚁金服开放平台 https://open.alipay.com/platform/manageHome.htm申请应用，并签约，在此不做详细介绍

总体下来，支付宝要比微信简单的多，支付宝app这边不需要在APP端配置appid等，只要后台配好返回给app就可以了

2，android集成

1） 将alipaySdk-20180403.jar (目前最新版的sdk类库)包放入 android/app/libs 目录下，如下图。

2） 将libs目录下的alipaySDK-20180403.jar导入，在 android/app/build.gradle 里添加如下代码：

dependencies {
     ......
    compile files('libs/alipaySdk-20180403.jar')

     ......
    }  

3） 在android/app/src/AndroidManifest.xml文件里面添加声明：

<!-- 支付宝 activity 声明 -->
<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" />

4） 在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.** { *;}

5） 在com.xx.xx创建包名alipay

比如项目的工程叫zftest，那么在zftest的文件里面创建alipay文件夹，和微信支付一样，处理回调

6） 编写 Module，在alipay包下创建AlipayModule.java，代码如下：

package com.项目工程名.alipay;

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<String, String> result = alipay.payV2(orderInfo,true);
       for (Map.Entry<String, String> entry: result.entrySet())
         map.putString(entry.getKey(), entry.getValue());
       promise.resolve(map);
     }
   };
   // 必须异步调用
   Thread payThread = new Thread(payRunnable);
   payThread.start();
 }

}

7） 编写 Package，在alipay包下创建AlipayPackage.java，代码如下：

package com.项目工程名.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<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
   return Collections.emptyList();
 }

 @Override
 public List<NativeModule> createNativeModules(
         ReactApplicationContext reactContext) {
   List<NativeModule> modules = new ArrayList<>();
   modules.add(new AlipayModule(reactContext));
   return modules;
 }

}

8） 最后在 Android 这边要做的最后一件事就是注册这个模块，在MainApplication中注册模块：

@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     // ...other packages
     new AlipayPackage() // <-- 注册模块
 );
}

注意了前提是需要import导入 AlipayPackage这个包

3， ios集成

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

AlipaySDK.bundle

AlipaySDK.framework

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

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

3） 在项目目录下创建Group Alipay，并创建AlipayMoudle模块，如下图所示：

4） 编写AlipayModule.h代码如下：

#import <React/RCTBridgeModule.h>
   #import <React/RCTLog.h>

   @interface AlipayMoudle : NSObject <RCTBridgeModule>
   
@end

5）编写AlipayModule.m代码如下：

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

6） 应用注册scheme,在AliSDKDemo-Info.plist定义URL types

箭头所指的设置必须和上一步中的 NSString * appScheme = @"zftest" ;必须保持一致，

否则在支付成功后没法回到商户app中，同样和无法拿到成功与否的结果，这是一个坑，注意了，原文博客是没有注明的。

4，react-native 

编写调用原生模块的方法，调起支付宝支付

1） 修改原生代码后，需要重新打包运行程序：

react-native run-android # 运行Android端
react-native run-ios # 运行iOS端

2 ）编写 Alipay.js 工具类

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

3） 调用 Alipay 模块发起支付宝支付：

async pay(res) { // params 为后端提供的参数
    let ret = await Alipay.pay(res.result); // 调起支付宝，发起支付
    if (ret.resultStatus === '9000') {
      console.log('支付宝支付成功了', ret);
      // 支付成功回调
    } else {
      console.log('支付宝支付失败了.', ret);
      // 支付失败回调
    }
  }

res是支付宝服务器返回的数据，格式为：
{
    "code": 200,
    "status": "success",
    "message": "",
    "result": "alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2xxxxxxxxxx"
}