之前把微信支付寫了一下，今天再把支付寶支付總結一下。

首先在項目更目錄輸入：
npm install @0x5e/react-native-alipay --save

Android集成

1、在MainApplication.java下添加以下代碼：

// ...

import com.reactlibrary.AlipayPackage; //添加此代碼

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new AlipayPackage()  //添加此代碼
      );
    }
  };

  // ...
}

2、在 android/settings.gradle下添加

include ':@0x5e_react-native-alipay'
project(':@0x5e_react-native-alipay').projectDir = new File(rootProject.projectDir, '../node_modules/@0x5e/react-native-alipay/android')

3、在android/app/build.gradle下添加

  compile project(':@0x5e_react-native-alipay')

4、在android/build.gradle??allprojects??repositories下添加

  flatDir {
    dirs "$rootDir/../node_modules/@0x5e/react-native-alipay/android/libs"
  }

5、在android/app/proguard-rules.pro下添加

-keep class com.alipay.** { *; }

IOS配置

1、在 Libraries下 點擊 Add Files to [your project's name], 將 node_modules/@0x5e/react-native-alipay 下面的 RCTAlipay.xcodeproj添加過來
2、在Build Phases -> Link Binary With Libraries下添加

libc++.tbd
libz.tbd
CFNetwork.framework
CoreGraphics.framework
CoreMotion.framework
CoreTelephony.framework
CoreText.framework
Foundation.framework
QuartzCore.framework
SystemConfiguration.framework
UIKit.framework
libRCTAlipay.a

3、添加如下代碼

WechatIMG11.png

// ...

#import <React/RCTLinkingManager.h>  

@implementation AppDelegate

// ...下面第一條內容當AppDelegate已存在時，可忽略。

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

@end

5、添加以下內容

WechatIMG14.jpeg

6、頁面引用

 import Alipay from '@0x5e/react-native-alipay';
 async OPay(){
        let infoStr = 'apiname=com.alipay.account.auth&method=alipay.open.auth.sdk.code.get&app_id=xxxx&app_name=mc&biz_type=openservice&pid=xxxx&product_id=APP_FAST_LOGIN&scope=kuaijie&target_id=xxxx&auth_type=AUTHACCOUNT&sign_type=RSA2&sign=xxxx'; // get from server, signed
        let response = await Alipay.authWithInfo(infoStr);
        console.info(response);
        // let { resultStatus, result, memo } = response;
        // let { success, result_code, auth_code, user_id } = QueryString.parse(result);
    }