React Native 支付宝集成 iOS 坑-JavaScript中文网-JavaScript教程资源分享门户

React Native已经成为主流的移动应用开发工具之一，它提供了一个简单易用的框架来构建跨平台应用程序。然而，要成功集成第三方库或服务，还需要解决一些棘手的问题。本文将介绍如何在React Native中集成支付宝，并解决在iOS平台上可能遇到的一些问题。

前置条件

在开始之前，需要确认您已经具备以下条件：

安装好React Native开发环境；
熟悉Xcode，可以编写iOS原生代码并在模拟器或设备上运行；
已经注册了支付宝开发者账号，并创建了应用实例。

集成支付宝SDK

React Native社区提供了一些支付宝SDK的封装库，例如 react-native-alipay。不过，由于支付宝SDK的更新速度较快，这些库可能会存在版本滞后等问题，因此在本文中采用原生方式集成支付宝SDK。

下载支付宝SDK

首先要从支付宝开放平台下载最新的SDK。目前，最新的版本是15.4.4。

下载完成后，将SDK解压，在Xcode中打开解压后的文件夹，将如下图所示的AlipaySDK.framework和AlipaySDK.bundle拖到您的React Native项目中的ios文件夹下：

注意：在将AlipaySDK.framework和AlipaySDK.bundle拖入Xcode项目时，请勾选Copy items if needed选项。

添加依赖库

接下来，还需要将支付宝SDK所需的依赖库添加到Xcode项目中。

在项目导航栏中，选择您的Xcode项目文件；
选择Targets -> Build Phases -> Link Binary With Libraries；

点击“+”按钮，添加以下依赖库：

// javascriptcn.com 代码示例
libz.tbd
libstdc++.6.0.9.tbd
libc++.tbd
SystemConfiguration.framework
Security.framework
CoreTelephony.framework
CoreText.framework
CoreGraphics.framework
CoreMotion.framework
CoreMedia.framework
CoreLocation.framework
CoreFoundation.framework
AVFoundation.framework
AudioToolbox.framework

在添加依赖库时，请检查依赖库名称是否正确，并勾选Add to targets选项。

配置URL Scheme

在Xcode项目设置中，需要为您的应用程序添加一个URL Scheme，以便支付宝SDK在支付完成后能够跳转回您的应用程序。

假设您的应用程序的bundle identifier为com.example.myapp，则可以在Xcode项目设置中，选择Info -> URL Types -> “+”按钮添加一个应用程序URL Scheme。

在URL Schemes中输入myapp001，即可得到完整的URL Scheme：

alipaySDKExample://safepay/?a=1&b=2&c=3

其中，alipaySDKExample为您的应用程序名称，也可以自定义；myapp001为您的应用程序URL Scheme。

添加代码

在您的React Native项目中，创建一个名为Alipay的文件夹，并在该文件夹下创建一个名为AlipayBridge.m的Objective-C文件。

在该文件中，添加以下代码：

// javascriptcn.com 代码示例
#import "AlipayBridge.h"
#import "AlipaySDK/AlipaySDK.h"

@implementation AlipayBridge

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(pay:(NSDictionary *)orderInfo
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSString *orderString = [orderInfo objectForKey:@"orderString"];
    NSString *appScheme = [orderInfo objectForKey:@"appScheme"];
    
    [[AlipaySDK defaultService] payOrder:orderString fromScheme:appScheme callback:^(NSDictionary *resultDic) {
        NSInteger resultStatus = [[resultDic objectForKey:@"resultStatus"] integerValue];
        if (resultStatus == 9000) {
            resolve(@"success");
        } else {
            NSString *memo = [resultDic objectForKey:@"memo"] ?: @"";
            NSError *error = [NSError errorWithDomain:@"Alipay" code:resultStatus userInfo:@{NSLocalizedDescriptionKey: memo}];
            reject(@"pay_error", @"Alipay pay error.", error);
        }
    }];
}

@end

这段代码定义了一个AlipayBridge模块，其中导出了一个名为pay的方法，用于调用支付宝SDK支付接口。pay方法接受一个包含有订单信息的字典，其中包含两个字段：

orderString: 支付订单信息；
appScheme: 您的应用程序URL Scheme。

如果支付成功，resolve回调将会携带success字符串；否则，reject回调将会携带支付错误信息的NSError对象。

在您的React Native项目中，创建一个名为Alipay.js的JavaScript文件，添加以下代码：

// javascriptcn.com 代码示例
import { NativeModules } from "react-native";

const { Alipay } = NativeModules;

export default {
  pay: (orderString, appScheme) =>
    new Promise((resolve, reject) => {
      Alipay.pay({ orderString, appScheme }, resolve, reject);
    }),
};

这段代码定义了一个名为Alipay的模块，其中导出了一个名为pay的方法，用于调用AlipayBridge模块的pay方法。pay方法接受两个参数：

orderString: 支付订单信息；
appScheme: 您的应用程序URL Scheme。

如果支付成功，pay方法将返回一个Promise对象，状态为“已完成”（fulfilled）并携带一个字符串"success"；否则，Promise对象状态为“已拒绝”（rejected）并携带一个描述支付错误信息的对象（例如，包含有错误码和错误描述的Error对象）。

调用支付接口

现在，您可以在React Native项目中，通过如下代码调用支付接口：

// javascriptcn.com 代码示例
import Alipay from "./Alipay";

const pay = async () => {
  try {
    const result = await Alipay.pay(orderString, appScheme);
    console.log("支付成功", result);
  } catch (error) {
    console.error("支付失败", error);
  }
};

其中，orderString是您的订单信息字符串，appScheme是您的应用程序URL Scheme。

解决可能遇到的问题

在iOS平台上，可能会遇到以下问题：

"Linker command failed with exit code..."错误

在运行时，可能会遇到这样的错误：

ld: warning: directory not found for option '-L/Users/username/Library/Developer/Xcode/DerivedData/myapp-xxxxxxx/Build/Products/Debug-iphoneos/tvOSClient'
Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_AlipaySDK", referenced from:
      objc-class-ref in AlipayBridge.o
ld: symbol(s) not found for architecture arm64

如果您使用的是React Native 0.60及以上版本，可以尝试使用Cocoapods来集成支付宝SDK，这可能会解决此问题。

如果您正在使用更早的React Native版本，可以尝试修改项目设置中的“Build Active Architecture Only”为“NO”：

选择您的项目文件；
选择Targets -> Build Settings -> Build Options -> Build Active Architecture Only；
将其修改为“NO”。

"unterminated quoted string"错误

在调用payOrder方法时，可能会遇到以下错误：

error: unterminated quoted string

这通常是因为在传递订单信息时，某个字段中包含有单引号（'）或双引号（"），未被正确转义导致的。确保将订单信息正确转义后再传递给支付接口。

总结

通过本文，您已经了解了如何在React Native中集成支付宝，并解决在iOS平台上遇到的一些问题。希望这篇文章对您的开发工作有所指导。完整的示例代码可以在Github上找到。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535c7667d4982a6ebd596ed