# @asyncpay/checkout-react-native 中文文档

规范地址：https://npmcn.com/package/%40asyncpay/checkout-react-native/

版本：0\.0\.5
npm 元数据更新时间：2026-07-03T11:36:53.668Z
中文译文更新时间：2026-11-07T01:39:05.956Z
软件包许可：BSL-1\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40asyncpay/checkout-react-native
原文对照：https://npmcn.com/package/%40asyncpay/checkout-react-native/?lang=original
项目主页：https://github.com/Asyncpay-io/checkout-react-native#readme
源码仓库：https://github.com/Asyncpay-io/checkout-react-native

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：119 kB，100 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \*，react-native \*，react-native-webview \>=13\.12\.5
- 首次发布：2024-12-27T22:25:53.458Z
- 最新版本发布：2026-07-03T11:36:53.477Z
- 近 30 天下载量：21560（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 2 个）

## 中文简介

这个SDK可以使您无缝地连接到多个支付频道,如Flusterwave,Paystack和Frede,并创建一个只有一个集成的出账体验.

## 安装

```sh
npm install @asyncpay/checkout-react-native
```

也可以使用：`pnpm add @asyncpay/checkout-react-native`、`yarn add @asyncpay/checkout-react-native`、`bun add @asyncpay/checkout-react-native`

## README

![](https://asyncpay-imgs.s3.amazonaws.com/Asyncpayyy_Logo.png "Asyncpay")

# Asyncpay 检查 SDK

这个 SDK 允许您无缝连接到多个支付信道, 如 Flutterwave、 Paystack 和 Strepe 以及 创建一个只有一个集成的退出体验.

## 演示

这里可以看到我们离职经历的演示: [https://asyncpay.io/demo (英语)](https://asyncpay.io/demo)

## 所需资源

1.  **支付账户** 前往 [同步付费](https://asyncpay.io/) 创建账户并获取访问权限 仪表板.
2.  **连接您的支付通道 -** 仪表盘为您提供了连接您多个支付渠道与 你的事业。 在您想要整合的支付通道上创建账户,并在仪表板上提供您的密钥 .
3.  **整合此 SDK -** 连接支付渠道后, 您可以在 Asyncpay 公用中初始化支付 在您的仪表盘上找到密钥 .

## 整合此 SDK 的步骤

1.  安装 SDK 及其对等依赖 :

```
$ npm install @asyncpay/checkout-react-native react-native-webview
```

或

```
$ yarn add @asyncpay/checkout-react-native react-native-webview
```

> **说明:** `react-native-webview` 是一个必要的同伴依赖。 如果使用 Expo , 则包含在 Expo SDK 中; 否则运行 `npx pod-install` 在 iOS 上安装后.

2.  SDK 导出自定义按钮组件

```js
import { CheckoutButton } from '@asyncpay/checkout-react-native';

<CheckoutButton
  publicKey="${YOUR_ASYNC_PAY_PUBLIC_KEY}"
  amount={10000}
  currency={'NGN'}
  customer={{
    email: 'example@mail.com',
    first_name: 'John',
    last_name: 'Doe',
  }}
/>;
```

3.  SDK 导出自定义钩

```js
import { useCheckout } from '@asyncpay/checkout-react-native';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

const Checkout = () => {
  const { _handleCheckout, Modal } = useCheckout({
    amount: 10000,
    currency: 'NGN',
    customer: {
      email: 'example@mail.com',
    },
    publicKey: '${YOUR_ASYNC_PAY_PUBLIC_KEY}',
  });

  return (
    <>
      <TouchableOpacity
        style={styles.buttonContainer}
        onPress={_handleCheckout}
      >
        <Text style={styles.text}>Press me</Text>
      </TouchableOpacity>
      <Modal />
    </>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    width: '90%',
    height: heightPercentageToDP(5),
    backgroundColor: '#1059bc',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    marginVertical: heightPercentageToDP(5),
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});
```

## 可用的退出选项

以下列出用于 `AsyncpayCheckout` 按钮和钩子.

`publicKey`, (中文(简体) ), `amount`, (中文(简体) ), `description`, (中文(简体) ), `customer_email`, (中文(简体) ), `customer_uuid`, (中文(简体) ), `subscription_plan_uuid`, (中文(简体) ), `customer`, (中文(简体) ), `paymentChannel`, (中文(简体) ), `onError`, (中文(简体) ), `onSuccess`, (中文(简体) ), `logo`, (中文(简体) ), `buttonStyle`, (中文(简体) ), `buttonTextStyle`, (中文(简体) ), `buttonTitle`

| 名称 | 需求 | 说明 |
| --- | --- | --- |
| `publicKey` | `true` | 你的公用钥匙是从 [同步付费](https://asyncpay.io/) 仪表板. |
| `amount` | `true` 但未考虑何时 `subscription_plan_uuid` 当前 | 您想要向用户收取的金额 . |
| `currency` | `false` 但未考虑何时 `subscription_plan_uuid` 当前 | 您想要向用户收取的金额 . |
| `description` | `false` 但未考虑何时 `subscription_plan_uuid` 当前 | 交易说明. |
| `customer_email` | 如果 `customer_uuid` 财务报告和审定财务报表 `customer` 缺席 | 您想要收费的客户的电子邮件 . |
| `customer_uuid` | 如果 `customer_email` 财务报告和审定财务报表 `customer` 缺席 | 您要收取的客户UUID . |
| `subscription_plan_uuid` | `false` 禁止 `amount`, (中文(简体) ), `currency` 财务报告和审定财务报表 `description` | 您想要订阅客户的订阅计划 UUID . |
| `customer` | 如果 `customer_email` 财务报告和审定财务报表 `customer_uuid` 缺席 | 客户对象. 使用此选项会在用户上创建一个客户端 . |
| `metadata` | `false` | 一个可以用于将元数据添加到取出中的对象. 它期望对象的键和值是字符串. |
| `save_payment_method` | `false` | 此旗帜决定了是否应该保存在 Asyncpay 上, 用于此检查的支付方法 。 为客户保存此方法允许您稍后在所保存的支付方法上启动收费. |
| `reference` | `false` | 您的退出会话的付款请求将附带一个独特的引用 . |
| `payment_channel` | `false` | 您想要将支付引导到的支付通道 。 如果您在此设置一个值, 取出将显示到支付频道, 而不会给用户一个选择 . |
| `buttonStyle` | `false` | 给Styling的退票按钮. |
| `buttonTextStyle` | `false` | 用于设计取出文本. |
| `onCancel` | `false` | 用户取消取出页面后调用 javascript 功能 . |
| `buttonTitle` | `false` | 设置退出按钮的自定义标题 . |
| `onError` | `false` | Javascript 函数用于在退出过程中出现错误时调用 。 一种类型的争论 `Error` 用于描述错误. |
| `onSuccess` | `false` | 一个javascript功能在用户成功完成取出后调用. |
| `logo` | `false` | 如果想要覆盖仪表板上设置的标志,则要在支付页面上显示的标志. |

## 可用的客户对象选项

下表列出了可附加于 `customer` 对象,如果您选择使用它来初始化 SDK 的付款请求.

| 名称 | 需求 |
| --- | --- |
| `first_name` | `true` |
| `last_name` | `true` |
| `email` | `true` |
| `phone_code` | 如果电子邮件缺席, 则需要 |
| `phone_number` | 如果电子邮件缺席, 则需要 |
| `address_line_1` | `false` |
| `address_line_2` | `false` |
| `city` | `false` |
| `state` | `false` |
| `country` | `false` |
| `zip` | `false` |

## 支助

随便你给 `info@asyncpay.io` 用于支持使用此 SDK 或创建问题 打开 [吉图布](https://github.com/Asyncpay-io/checkout-js/issues)

## 常见问题

### @asyncpay/checkout-react-native 是什么？

这个SDK可以使您无缝地连接到多个支付频道,如Flusterwave,Paystack和Frede,并创建一个只有一个集成的出账体验\.

### 如何安装 @asyncpay/checkout-react-native？

在项目目录运行 npm install @asyncpay/checkout-react-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-webview（\>=13\.12\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @asyncpay/checkout-react-native 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @asyncpay/checkout-react-native 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @asyncpay/checkout-react-native 可以商用吗？

@asyncpay/checkout-react-native 使用 BSL-1\.0 许可。声明的许可为 BSL-1\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @asyncpay/checkout-react-native 的下载量有多少？

根据 npm 官方下载统计，@asyncpay/checkout-react-native 在 2026/10/07 – 2026/11/05 这 30 天内被下载 21,560 次，日均约 719 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @asyncpay/checkout-react-native 还在维护吗？

最新版本 0\.0\.5 发布于 2026/07/03（4 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/12/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。