飞道科技

飞道科技文档总汇

IOS 移动端支付宝支付配置

第三方库配置流程

采用 @/0x5e/react-native-alipay 库,该库封装了一些常用的操作,只需要配置即可

1. 导入第三方项目

(1)首先在npm上搜索@/0x5e/react-native-alipay库,按照指示加入到当前项目的依赖当中,链接如下

@/0x5e/react-native-alipay

(2)按照常见错误中所说的方法,将该项目导入到XCode中的Libraries文件夹中

2.导入其它依赖

将下面的依赖导入进项目下 General 选项卡下的Linked Frameworks and Libraries 项中,其中除了最后一个是alipay的依赖以外,其余都是IOS自带的

3.应用注册scheme

在AliSDKDemo-Info.plist定义URL types,其中Identifier 配置为alipay,Role 为Editor,URL Schemes 随意填

URL Schemes

在Information Property List下添加LSApplicationQueriesSchemes,并在其中添加字段alipay。或者,将构建模式转化为文本模式,将以下代码复制到info.plist文件中的Information Property List节点下一个项目有多个Target,注意不要选择test目标下的info.plist,配置完成之后如图所示会看到一个alipay的项
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
</array>

URL Schemes

4.配置AppDelegate.m文件

打开项目主目录下的 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

到此,配置完成

原生IOS SDK支付配置

1.下载Alipay SDK iOS

下载

下载地址

2.导入

启动Xcode,把iOS包中的压缩文件中以下文件拷贝到项目文件夹下(你能找到就行),并导入到项目工程中,如下图所示,如何导包请看

如何导包点这里

下载

3.创建文件

在工程文件夹下新建一个文件夹Alipay,在其中创建两个文件分别是:AlipayModule.h和AlipayModule.m如下图所示,.m文件当中需要写入Module代码

下载

在AlipayModule.h中复制进如下代码
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <Foundation/Foundation.h>
 @interface AlipayModule : NSObject <RCTBridgeModule>
@end
在AlipayModule.m中复制进如下代码
#import <Foundation/Foundation.h>
#import "AlipayModule.h"
#import <AlipaySDK/AlipaySDK.h>

   @implementation AlipayModule

   RCT_EXPORT_METHOD(pay:(NSString *)orderInfo
    resolver:(RCTPromiseResolveBlock)resolve
    rejecter:(RCTPromiseRejectBlock)reject)
{

    NSString *appScheme = @"zftest";
     [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
    resolve(resultDic);
  }];
 }

RCT_EXPORT_MODULE(Alipay);

@end

4.应用注册scheme

在AliSDKDemo-Info.plist定义URL types,箭头所指的设置必须和上一步中的NSString *appScheme = @"zftest";必须保持一致,否则在支付成功后没法回到商户app中,同样和无法拿到成功与否的结果,如下图所示,找到Info下的URLTypes,在右边URL Schemes中输入在AlipayModule.m中输入的zftest

URL Schemes

将以下代码复制到info.plist文件中的Information Property List节点下,将构建模式转化为文本使用双箭头图标,注意不是test目录下的info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
</array>

URL Schemes

到此配置完成