一步一步將支付寶集成到 react-native 應用

如今不少 APP 都有集成第三方支付平臺的需求，用來支付本身的產品，可是官方通常都沒有介紹如何集成到 react-native 的應用中，本篇文章將基於官方提供的集成文檔，介紹如何將支付寶集成到 react-native 應用中。

場景介紹

適用於商家在App應用中集成支付寶支付功能。 商家APP調用支付寶提供的SDK，SDK再調用支付寶APP內的支付模塊。若是用戶已安裝支付寶APP，商家APP會跳轉到支付寶中完成支付，支付完後跳回到商家APP內，最後展現支付結果。若是用戶沒有安裝支付寶APP，商家APP內會調起支付寶網頁支付收銀臺，用戶登陸支付寶帳戶，支付完後展現支付結果。 目前支持手機系統有：iOS（蘋果）、Android（安卓）。

集成SDK

Android

1. 將alipaySdk-xxxxxxxx.jar包放入android/app/libs目錄下，以下圖。

   

2. 將libs目錄下的alipaySDK-xxxxxxxx.jar導入，在android/app/build.gradle裏添加以下代碼：

dependencies {
    ......
    compile files('libs/alipaySdk-20170725.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
6. 編寫 Module，在com.xx.xx.alipay包下建立AlipayModule.java，代碼以下：

package com.xx.xx.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，在com.xx.xx.alipay包下建立AlipayPackage.java，代碼以下：

package com.xx.xx.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 這邊要作的最後一件事就是註冊這個模塊，在com.xx.xx.MainApplication中註冊模塊：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        // ...other packages
        new AlipayPackage() // <-- 註冊模塊
    );
}
複製代碼

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，並建立AlipayModule模塊，以下圖所示：

   

4. 編寫AlipayModule.h代碼以下：

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

@interface AlipayModule : NSObject <RCTBridgeModule>
@end
複製代碼

5. 編寫AlipayModule.m代碼以下：

#import "AlipayModule.h"
#import <AlipaySDK/AlipaySDK.h>

@implementation AlipayModule

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. 至此，iOS端支付寶SDK集成成功

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模塊發起支付寶支付：

import Alipay from './your/path/to/Alipay';
async pay(params){ // params 爲後端提供的參數
  let res = await call(getOrderInfo, params); // 從後端獲取簽名字串，參考支付接口調用
  let ret = await call(Alipay.pay, res.data); // 調起支付寶，發起支付
  if (ret.resultStatus === '9000') {
    // 支付成功回調
  } else {
    // 支付失敗回調
  }
}
複製代碼

4. 支付接口調用參考支付接口調用和支付請求參數說明，本篇將不作贅述。

後記

後面會繼續介紹 react-native 微信支付的集成，相比支付寶集成，微信支付集成會麻煩不少，好比處理回調、應用簽名機制、註冊scheme等都提升了集成的複雜度。

參考文檔

• App支付Android集成流程
• App支付iOS集成流程
• Android調用原生模塊
• iOS調用原生模塊

原文章地址：react-native 集成支付寶

做者：ZevenFang

轉載請註明出處~