React Native之支付集成(微信支付寶)(ios android)

時間 2019-11-30

標籤 react native 支付集成微信支付寶 ios android 欄目 React 简体版

原文原文鏈接

React Native之支付集成(微信支付寶)(ios android)

一,需求分析

1.1,app在線充值與提現 html

二,技術介紹與集成

2.1,微信支付

2.1.1,Android配置

詳細配置可查看React Native之微信分享(iOS Android),這裏主要介紹的是支付方面的配置java

第一步:建立名爲'wxapi'的文件夾，並在文件夾內建立WXPayEntryActivity.java，用於得到微信的受權和支付權限。react

 1 package your.package.wxapi;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import com.theweflex.react.WeChatModule;
 6 
 7 public class WXPayEntryActivity extends Activity {
 8   @Override
 9   protected void onCreate(Bundle savedInstanceState) {
10     super.onCreate(savedInstanceState);
11     WeChatModule.handleIntent(getIntent());
12     finish();
13   }
14 }

第二步:在AndroidManifest.xml文件中添加剛剛建立的Actiivty的配置android

 1 <manifest>
 2   <application>
 3 
 4    ...
 5 
 6     <activity
 7       android:name=".wxapi.WXPayEntryActivity"
 8       android:label="@string/app_name"
 9       android:exported="true"
10     />
11   </application>
12 </manifest>

第三步:添加混淆設置,在proguard-rules.pro中添加以下代碼，固然若是不混淆就不安全啦ios

1 -keep class com.tencent.mm.sdk.** {
2    *;
3 }

2.1.2,ios配置

詳細配置可查看React Native之微信分享(iOS Android),支付方面的配置在React Native之微信分享(iOS Android)已完成json

2.2,支付寶支付

在螞蟻金服開放平臺https://open.alipay.com/platform/manageHome.htm申請應用，並簽約https://open.alipay.com/platform/home.htm後端

2.2.1,Android配置

第一步:在android/app目錄下新建libs目錄react-native

第二步:將alipaySdk-15.5.7-20181023110917.aar (目前最新版的sdk類庫)包放入android/app/libs目錄下，以下圖。api

第三步:在android/build.gradle 中，添加下面的內容，將 libs 目錄做爲依賴倉庫：promise

 1 allprojects {
 2     repositories {
 3          // 添加下面的內容
 4         flatDir {
 5             dirs 'libs'
 6         }
 7       // ... jcenter() 等其餘倉庫
 8         jcenter()
 9         google()
10     }
11 }

第四步:在android/app/build.gradle文件裏面支付寶 SDK 做爲項目依賴：

1 dependencies {
2 
3     // 添加下面的內容
4     implementation (name: 'alipaySdk-15.5.7-20181023110917', ext: 'aar')
5 
6     // ... 其餘依賴項
7 }

第五步:在android/app/proguard-rules.pro添加混淆規則，增長安全性

 1 -keep class com.alipay.android.app.IAlixPay{*;}
 2 -keep class com.alipay.android.app.IAlixPay$Stub{*;}
 3 -keep class com.alipay.android.app.IRemoteServiceCallback{*;}
 4 -keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
 5 -keep class com.alipay.sdk.app.PayTask{ public *;}
 6 -keep class com.alipay.sdk.app.AuthTask{ public *;}
 7 -keep class com.alipay.sdk.app.H5PayCallback {
 8  <fields>;
 9  <methods>;
10 }
11 -keep class com.alipay.android.phone.mrpc.core.** { *; }
12 -keep class com.alipay.apmobilesecuritysdk.** { *; }
13 -keep class com.alipay.mobile.framework.service.annotation.** { *; }
14 -keep class com.alipay.mobilesecuritysdk.face.** { *; }
15 -keep class com.alipay.tscenter.biz.rpc.** { *; }
16 -keep class org.json.alipay.** { *; }
17 -keep class com.alipay.tscenter.** { *; }
18 -keep class com.ta.utdid2.** { *;}
19 -keep class com.ut.device.** { *;}

第六步:在android/app/src/com/main/java/xx/xx下建立包名alipay,和微信支付同樣，處理回調

第七步:編寫 Module，在alipay包下建立AlipayModule.java，代碼以下：

 1 package com.項目工程名.alipay;
 2  
 3 import com.alipay.sdk.app.PayTask;
 4 import com.facebook.react.bridge.Arguments;
 5 import com.facebook.react.bridge.Promise;
 6 import com.facebook.react.bridge.ReactApplicationContext;
 7 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 8 import com.facebook.react.bridge.ReactMethod;
 9 import com.facebook.react.bridge.WritableMap;
10 import java.util.Map;
11  
12 public class AlipayModule extends ReactContextBaseJavaModule {
13  
14  public AlipayModule(ReactApplicationContext reactContext) {
15    super(reactContext);
16  }
17  
18  @Override
19  public String getName() {
20    return "Alipay";
21  }
22  
23  @ReactMethod
24  public void pay(final String orderInfo, final Promise promise) {
25    Runnable payRunnable = new Runnable() {
26      @Override
27      public void run() {
28        WritableMap map = Arguments.createMap();
29        PayTask alipay = new PayTask(getCurrentActivity());
30        Map<String, String> result = alipay.payV2(orderInfo,true);
31        for (Map.Entry<String, String> entry: result.entrySet())
32          map.putString(entry.getKey(), entry.getValue());
33        promise.resolve(map);
34      }
35    };
36    // 必須異步調用
37    Thread payThread = new Thread(payRunnable);
38    payThread.start();
39  }
40  
41 }

第八步:編寫 Package，在alipay包下建立AlipayPackage.java，代碼以下：

 1 package com.項目工程名.alipay;
 2  
 3 import com.facebook.react.ReactPackage;
 4 import com.facebook.react.bridge.NativeModule;
 5 import com.facebook.react.bridge.ReactApplicationContext;
 6 import com.facebook.react.uimanager.ViewManager;
 7 import java.util.ArrayList;
 8 import java.util.Collections;
 9 import java.util.List;
10  
11 public class AlipayPackage implements ReactPackage {
12  
13  @Override
14  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
15    return Collections.emptyList();
16  }
17  
18  @Override
19  public List<NativeModule> createNativeModules(
20          ReactApplicationContext reactContext) {
21    List<NativeModule> modules = new ArrayList<>();
22    modules.add(new AlipayModule(reactContext));
23    return modules;
24  }
25  
26 }

第九步:在MainApplication中註冊模塊：

 1 ...
 2 
 3 import com.項目工程名. AlipayPackage; 
 4 
 5 ...
 6 
 7 @Override
 8 protected List<ReactPackage> getPackages() {
 9  return Arrays.<ReactPackage>asList(
10      new MainReactPackage(),
11      // ...other packages
12      new AlipayPackage() // <-- 註冊模塊
13  );
14 }

2.2.2,iOS配置

第一步:啓動Xcode，把iOS包中的壓縮文件中如下文件拷貝到項目文件夾下，並導入到項目工程中。

AlipaySDK.bundle
AlipaySDK.framework

第二步:在Build Phases選項卡的Link Binary With Libraries中，增長如下依賴：

第三步:在項目目錄下建立Group Alipay，並建立AlipayMoudle模塊，以下圖所示：

第四步:編寫AlipayModule.h代碼以下：

 1 /**
 2  * Created by jackson影琪 on 2018/12/05.
 3  */
 4 #import <React/RCTBridgeModule.h>
 5 #import <React/RCTLog.h>
 6 #import <Foundation/Foundation.h>
 7  
 8    @interface AlipayModule : NSObject <RCTBridgeModule>
 9    
10 @end

第五步:編寫AlipayModule.m代碼以下：

 1 /**
 2  * Created by jackson影琪 on 2018/12/05.
 3  */
 4 
 5 #import <Foundation/Foundation.h>
 6 #import "AlipayModule.h"
 7 #import <AlipaySDK/AlipaySDK.h>
 8  
 9    @implementation AlipayModule
10  
11    RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
12     resolver:(RCTPromiseResolveBlock)resolve
13     rejecter:(RCTPromiseRejectBlock)reject)
14 {
15     //應用註冊scheme,在AliSDKDemo-Info.plist定義URL types
16     NSString *appScheme = @"zftest";
17      [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
18     resolve(resultDic);
19   }];
20  }
21  
22 RCT_EXPORT_MODULE(Alipay);
23  
24 @end

第六步:應用註冊scheme,在AliSDKDemo-Info.plist定義URL types，箭頭所指的設置必須和上一步中的NSString *appScheme = @"zftest";必須保持一致，不然在支付成功後無法回到商戶app中，一樣和沒法拿到成功與否的結果，這是一個坑，注意了。

第七步:.iOS9 以上，添加白名單,直接編輯編輯 Info.plist：

1 <key>LSApplicationQueriesSchemes</key>
2 <array>
3     <string>alipay</string>
4     <string>weixin</string>
5     <string>wechat</string>
6 </array>

或給 LSApplicationQueriesSchemes 添加三個值 alipay、weixin、wechat

到此爲止,基本配置完成

三,使用

3.1,微信支付使用

詳細使用可查看React Native之微信分享(iOS Android),這裏主要介紹的是支付方面的使用

 1 // 微信支付
 2     WeChatPayment = () => {
 3        WeChat.isWXAppInstalled()
 4                                             .then((isInstalled) => {
 5                                                    if (isInstalled) {
 6                                                         WeChat.pay({
 7                                                             partnerId: 'xxxxxx',  // 商家向財付通申請的商家id
 8                                                             prepayId: 'xxxxxx',   // 預支付訂單
 9                                                             nonceStr:'xxxxxx',   // 隨機串，防重發
10                                                             timeStamp: 'xxxxxxx'    ,  // 時間戳，防重發.
11                                                             package: 'Sign=WXPay',    // 商家根據財付通文檔填寫的數據和簽名
12                                                             sign: 'xxxxxxxxx'       // 商家根據微信開放平臺文檔對數據作的簽名
13                                                             }).then((requestJson)=>{
14                                                                       //支付成功回調                                           
15                                                                       if (requestJson.errCode=="0"){
16                                                                        //回調成功處理
17 Toast.show('已成功支付')
18                                                                       }
19                                                                   }).catch((err)=>{
20                                                                         Toast.show('支付失敗')
21                                                                   })
22                                                     } else {
23                                                        Toast.show('您尚未安裝微信，請安裝微信以後再試');
24                                                     }
25                                              });
26 
27     }

如下數據從後臺獲取

1 {
2     partnerId: '',  // 商家向財付通申請的商家id
3     prepayId: '',   // 預支付訂單
4     nonceStr: '',   // 隨機串，防重發
5     timeStamp: '',  // 時間戳，防重發
6     package: '',    // 商家根據財付通文檔填寫的數據和簽名
7     sign: ''        // 商家根據微信開放平臺文檔對數據作的簽名
8   }

微信支付狀態監聽

 1 //監聽 支付狀態
 2         // 'SendMessageToWX.Resp' 分享監聽字段
 3         // 'PayReq.Resp'          支付監聽字段
 4         // 'SendAuth.Resp'        登陸監聽字段
 5         wechat.addListener(
 6             'PayReq.Resp',
 7             (response) => {
 8                 if (parseInt(response.errCode) === 0) {
 9                     toastShort('支付成功');
10                 } else {
11                     toastShort('支付失敗');
12                 }
13             }
14         );

3.2,支付寶支付使用

支付寶支付調用:

 1 import { NativeModules } from 'react-native';
 2 
 3 ...
 4 
 5 async pay(res) { // params 爲後端提供的參數
 6     let ret = await NativeModules.Alipay.pay(res.result); // 調起支付寶，發起支付
 7     if (ret.resultStatus === '9000') {
 8        Toast.show('已成功支付');
 9       // 支付成功回調
10     } else {
11       Toast.show('支付失敗');
12       // 支付失敗回調
13     }
14   }
15

返回的狀態碼對應的信息:

 1  switch (data[0].resultStatus) {
 2             case "9000":
 3               opt.success && opt.success(data)
 4               break;
 5             case "8000":
 6               opt.fail && opt.fail('支付結果未知,請查詢訂單狀態')
 7               break;
 8             case "4000":
 9               opt.fail && opt.fail('訂單支付失敗')
10               break;
11             case "5000":
12               opt.fail && opt.fail('重複請求')
13               break;
14             case "6001":
15               opt.fail && opt.fail('用戶中途取消')
16               break;
17             case "6002":
18               opt.fail && opt.fail('網絡鏈接出錯')
19               break;
20             case "6004":
21               opt.fail && opt.fail('支付結果未知,請查詢訂單狀態')
22               break;
23             default:
24               opt.fail && opt.fail('其餘失敗緣由')
25               break;
26           }

後臺返回的數據格式爲:

1 //res是支付寶服務器返回的數據，格式爲：
2 {
3     "code": 200,
4     "status": "success",
5     "message": "",
6     "result": "alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2xxxxxxxxxx"
7 }