React Native支付宝支付(IOS)

React Native支付宝支付(IOS)

刘老板

刘老板

2023年6月16日 08:26

IOS的集成文章更是少之又少,大多数都是复制别人的文章,掐头去尾的。

下面找了一篇比较好的文章记录一下

1、下载支付宝客户端SDK

https://opendocs.alipay.com/open/04km1h

2、导入刚刚下载的SDK包

启动Xcode,把iOS包中的压缩文件中AlipaySDK.bundle、AlipaySDK.framework文件拷贝到RN项目中IOS文件夹下,如下图:
咱们俩博客

3、导入AlipaySDK.bundle、AlipaySDK.framework到项目工程中。

咱们俩博客

4、添加支付宝SDK依赖项

咱们俩博客


除了阿里的sdk文件、其他的文件通过下面的+号,然后搜索添加

5.在项目目录下右键创建Group Alipay,并创建AlipayMoudle模块文件,如下图所示:

咱们俩博客

文件类型是看图标哦

6、AlipayModule.h代码如下

#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <Foundation/Foundation.h>

   @interface AlipayModule : NSObject <RCTBridgeModule>

@end

7、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)
{
    //应用注册scheme,在AliSDKDemo-Info.plist定义URL types
    NSString *appScheme = @"yourschemenvalue";
     [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:appScheme callback:^(NSDictionary *resultDic) {
    resolve(resultDic);
  }];
 }
RCT_EXPORT_MODULE(Alipay);
@end

8.点击项目,选择Info选项卡,然后选择URL Types中,设置yourschemevalue,如下图

咱们俩博客

一般这个url schemes不能跟其他的app重复,我推荐ap+你的支付宝申请appid,记住这里的url schemes要在AlipayModule.m中一致哦

9、直接编辑Info.plist添加白名单:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>alipay</string>
    <string>weixin</string>
    <string>wechat</string>
</array>

10、使用方法

import { NativeModules ,Platform} from 'react-native';
 
async pay(payData) {
    // NativeModules.Alipay.setAlipaySandbox(true)          //沙箱---仅限于android
    NativeModules.Alipay.pay(payData).then((alipayData)=>{
       if(alipayData.memo.ResultStatus==9000){
            callback(alipayData)
        }
 }

参考文章: https://blog.csdn.net/TanHao8/article/details/104142098

                    https://www.jianshu.com/p/3e385f6b106f

原文链接:链接
THE END
点赞(0)
收藏
评论(0)
分享