@dfeidao/fd-am000050 v4.6.201909161537

支付宝支付

Installation

yarn add --dev @dfeidao/fd-am000050

配置

android配置

1. 文件android/app/src/main/java/[...]/MainApplication.java，在方法getPackages()添加new AlipayPackage()

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() // Add this line
		  );
		}
	};
}

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添加如下内容

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

5. 文件android/app/proguard-rules.pro添加如下内容

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

IOS配置

• 1. 添加原子操作依赖
• 2. 将该项目导入到XCode中的Libraries文件夹中，操作步骤
  • 2.1. 右键Libraries文件夹
  • 2.2. 点击Add Files
  • 2.3. 在弹出的界面中搜索该项目名（react-native-alipay）然后点击该项目的工程文件来添加
  • 2.4. 如果不想搜索的话可以直接区文件夹找，一般来说在node_modules文件夹下的0x5e文件夹下react-native-alipay文件夹下的ios目录当中如下图步骤所示，最后双击该项目即可导入
• 3. 将下面的依赖导入进项目下 General 选项卡下的Linked Frameworks and 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
  • 其中除了最后一个是alipay的依赖以外，其余都是IOS自带的，导入方式如下
    • 导入自带项目依赖 - 导入第三方项目依赖
• 4. 应用注册scheme
  • 4.1. 在AliSDKDemo-Info.plist定义URL types，其中Identifier 配置为alipay，Role 为Editor，URL Schemes 填申请的 AppID
  • 4.2. 在Information Property List下添加LSApplicationQueriesSchemes，并在其中添加字段alipay。或者，将构建模式转化为文本模式（XCode右上角双向箭头按钮），将以下代码复制到info.plist文件中的Information Property List节点下一个项目有多个Target，注意不要选择test目标下的info.plist，配置完成之后如图所示会看到一个alipay的项

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>alipay</string> <!-- Add this line -->
</array>

• 5. 配置AppDelegate.m文件
  • 5.1. 打开项目主目录下的 AppDelegate.m文件，将以下代码添加进该文件中，在这里要注意一点，是添加不是直接复制进去。

#import <React/RCTLinkingManager.h>

@implementation 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

param

result

{
	code: string; // 错误码 https://docs.open.alipay.com/common/105806
	msg: string; // 处理结果的描述，信息来自于code返回结果的描述
	app_id: string; // 支付宝分配给开发者的应用Id
	out_trade_no: string; // 商户网站唯一订单号
	trade_no: string; // 该交易在支付宝系统中的交易流水号
	total_amount: string; // 该笔订单的资金总额，单位为RMB-Yuan
	seller_id: string; // 收款支付宝账号对应的支付宝唯一用户号
	charset: string; // 编码格式
	timestamp: string; // 时间
}
// 示例
{
	"code": "10000",
	"msg": "Success",
	"app_id": "2019070265726453",
	"auth_app_id": "2019070265726453",
	"charset": "utf-8",
	"timestamp": "2019-08-12 15:30:16",
	"out_trade_no": "1565595006150",
	"total_amount": "0.01",
	"trade_no": "2019081222001444200548655850",
	"seller_id": "2088212298633152"
}

result-error

Example

import am050 from '@dfeidao/fd-am000050';

const param = {
	subject: 'subject',
	body: 'body',
	out_trade_no: 'out_trade_no',
	passback_params: 'passback_params',
	timeout_express: 'timeout_express',
	total_amount: 'total_amount'
};
try{
	const res = await am050('spaceid', 'systemid', 'usercode', param);
}catch(error){
	console.log(error.message);
}