現在很多 APP 都有整合第三方支付平臺的需求，用來支付自己的產品，但是官方一般都沒有介紹如何整合到 react-native 的應用中，本篇文章將基於官方提供的整合文件，介紹如何將支付寶整合到 react-native 應用中。
場景介紹
適用於商家在App應用中整合支付寶支付功能。 商家APP呼叫支付寶提供的SDK，SDK再呼叫支付寶APP內的支付模組。如果使用者已安裝支付寶APP，商家APP會跳轉到支付寶中完成支付，支付完後跳回到商家APP內，最後展示支付結果。如果使用者沒有安裝支付寶APP，商家APP內會調起支付寶網頁支付收銀臺，使用者登入支付寶賬戶，支付完後展示支付結果。 目前支援手機系統有：iOS（蘋果）、Android（安卓）。
整合SDK
Android
- 將alipaySdk-xxxxxxxx.jar包放入
android/app/libs目錄下，如下圖。
- 將libs目錄下的alipaySDK-xxxxxxxx.jar匯入，在
android/app/build.gradle裡新增如下程式碼：
dependencies {
......
compile files('libs/alipaySdk-20170725.jar')
......
}
複製程式碼- 在
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" />
複製程式碼- 在
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.** { *;}
複製程式碼- 在
com.xx.xx建立包名alipay - 編寫 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();
}
}
複製程式碼- 編寫 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;
}
}
複製程式碼- 最後在 Android 這邊要做的最後一件事就是註冊這個模組，在
com.xx.xx.MainApplication中註冊模組：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// ...other packages
new AlipayPackage() // <-- 註冊模組
);
}
複製程式碼iOS
- 啟動IDE（如Xcode），把iOS包中的壓縮檔案中以下檔案拷貝到專案資料夾下，並匯入到專案工程中。 AlipaySDK.bundle AlipaySDK.framework
- 在Build Phases選項卡的Link Binary With Libraries中，增加以下依賴：
- 如果是Xcode 7.0之後的版本，需要新增libc++.tbd、libz.tbd；
- 如果是Xcode 7.0之前的版本，需要新增libc++.dylib、libz.dylib。
- 在專案目錄下建立Group
Alipay，並建立AlipayModule模組，如下圖所示：
- 編寫
AlipayModule.h程式碼如下：
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface AlipayModule : NSObject <RCTBridgeModule>
@end
複製程式碼- 編寫
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
複製程式碼- 至此，iOS端支付寶SDK整合成功
React-Native
- 修改原生程式碼後，需要重新打包執行程式：
react-native run-android # 執行Android端
react-native run-ios # 執行iOS端
複製程式碼- 編寫
Alipay.js工具類
import { NativeModules } from 'react-native';
export default NativeModules.Alipay;
複製程式碼- 呼叫
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 {
// 支付失敗回撥
}
}
複製程式碼後記
後面會繼續介紹 react-native 微信支付的整合，相比支付寶整合，微信支付整合會麻煩很多，比如處理回撥、應用簽名機制、註冊scheme等都提高了整合的複雜度。
參考文件
原文章地址：react-native 整合支付寶
作者：ZevenFang
轉載請註明出處~