# @checkout\.com/checkout-react-native-components 中文文档

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

版本：1\.0\.0-beta12
npm 元数据更新时间：2026-11-03T10:03:35.536Z
中文译文更新时间：2026-11-09T11:44:19.831Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40checkout.com/checkout-react-native-components
原文对照：https://npmcn.com/package/%40checkout.com/checkout-react-native-components/?lang=original
项目主页：https://www.npmjs.com/package/@checkout.com/checkout-react-native-components

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

- 包体积（解压后）：16.2 MB，605 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：1 个
- peer 依赖：react \*，react-native \*，expo-constants \*
- 首次发布：2025-10-01T12:12:52.495Z
- 最新版本发布：2026-11-03T10:03:35.233Z
- 近 30 天下载量：28788（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 8 个）

## 中文简介

\[BETA——不用于生产\] 对本地 iOS & Android 检查组件进行本地包装

## 安装

```sh
npm install @checkout.com/checkout-react-native-components
```

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

## README

![Checkout.com](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/.github/media/checkout.com.logo.png) ![Checkout.com](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/.github/media/flow-logo.png)

# 移动反应原生 SDK 流量

[![Status: Beta](https://img.shields.io/badge/status-beta-yellow)](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

-   [QQ 快速启动](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--quick-start)
    -   [安装](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-installation)
    -   [平台设置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-platform-setup)
-   [\* 构成部分概览](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--components-overview)
-   [QQ 核心配置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-%EF%B8%8F-core-configuration)
    -   [检查器设置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-checkoutprovider-setup)
    -   [配置选项](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--configuration-options)
-   [组件参考](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--component-reference)
    -   [流动部分](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-flow-component)
    -   [卡片组件](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-card-component)
        -   [卡片配置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--card-configuration)
    -   [苹果支付组件](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-apple-pay-component)
    -   [谷歌付费组件](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-google-pay-component)
-   [高级特性](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--advanced-features)
    -   [强制 API](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-imperative-api)
-   [🎨自定义](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--customization)
    -   [颜色](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--complete-color-token-reference)
    -   [边框半径](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--border-radius)
    -   [本地化](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--supported-locales--custom-translations)
-   [事件处理](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--event-handling)
    -   [组件召回](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--complete-event-reference)
-   [许可证](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--license)

## QQ 快速启动

### 安装

使用软件包安装 **一个** 以下,取决于您的软件包管理器:

```sh
npm install @checkout.com/checkout-react-native-components
```

```sh
yarn add @checkout.com/checkout-react-native-components
```

### 平台设置

此套件支持出框的React Introduct架构(New Architecture/Fabric and Old Architecture/Paper)两种.

#### iOS 设置

```bash
cd ios
pod install
```

取决于哪个版本 `checkout-react-native-components` 你使用,你可能需要钉指印Pro `2.12.0` 或以上(或以上(一). 您可以通过手动修改您的 Pod 文件来做到这一点 :

```ruby
  pod 'FingerprintPro', '2.12.0'
```

对于博览会,请使用 `expo-build-properties` 插件 :

```json
  [
    "expo-build-properties",
    {
      "ios": {
        "extraPods": [
          {
            "name": "FingerprintPro",
            "version": "2.12.0"
          }
        ]
      }
    }
  ]
```

#### QQ Android 设置

在您的应用程序中添加以下寄存器 `settings.gradle`数字 :

```groovy
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
        maven { url = uri("https://maven.fpregistry.io/releases") }
    }
}
```

或者加点 `allProjects` 块到工程 `build.gradle`数字 :

```groovy
allprojects {
  repositories {
    google()
    mavenCentral()
    maven { url 'https://maven.fpregistry.io/releases' }
    maven { url 'https://www.jitpack.io' }
  }
}
```

要启用 Google Pay 支付, 您必须添加以下元数据标签 `AndroidManifest.xml`数字 :

```xml
<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
```

虽然不是强制性的,但我们建议设定 `android:allowBackup` 改为 `false` 在你身边 `AndroidManifest.xml`未能设定为 `false` 或用您的默认值覆盖默认值会导致明显的合并错误.

**所需经费:**

-   **新建拱门 :** Android Studio Otter 3 Feature Drop 2025.2.3 (英语)
-   **旧拱门 :** 安卓工作室 纳华

💡 **提示 :** 使用 [JetBrains 工具箱](https://www.jetbrains.com/toolbox-app/) 用于简单的Android Studio版本管理.

#### 曝光设置

我们的软件包无法在 Expo Go 中运行。 相反, 您需要运行 :

```bash
npx expo prebuild
```

此命令会将您的应用程序编译为包含我们的软件包 .

对于Android来说,上面的寄存器步骤是解决依赖性的艰难要求. 我们的软件包提供了一个通用插件,将上面的Android设置块所定义的寄存器附加起来. 插件还可以将 Google Pay 标签附加到 `AndroidManifest.xml` 如果需要的话.

如果您的应用程序已经使用自定义插件进行修改 `build.gradle` 或者说 `AndroidManifest.xml`,我们建议扩展您现有的插件,或者创建一个额外的插件来自定义添加寄存器块以适应您的使用大小写 。 您可以在写 Expo 插件时找到文档 [这里](https://docs.expo.dev/config-plugins/plugins/)。 。 。 .

这个 `android:allowBackup` 标签和 `plugins` 可设置在 `app.json` 像这样:

```json
"android": {
  "allowBackup": false
},
"plugins": [
  [
    "@checkout.com/checkout-react-native-components",
    {
      "enableGooglePay": true
    }
  ]
]
```

## \* 构成部分概览

| 构成部分 | 说明 | 平台 | 关键特性 |
| --- | --- | --- | --- |
| **流动** | 采用多种支付方法的完整支付流程 | iOS/ Android 软件 | 3DS 支持,动态支付方法,内置验证 |
| **纸牌** | 安全卡输入表 | iOS/ Android 软件 | 卡片校验、标识、自定义样式 |
| **苹果支付** | 原生苹果支付整合 | 仅iOS | 无缝iOS支付经验 |
| **谷歌付费** | 原生谷歌付费集成 | 只有机器人 | 无缝Android支付经验 |
| **标签** | 泰比现在买, 稍后支付( 直接基于APM) | iOS/ Android 软件 | 独立组件或内部 `paymentMethods`; 见 [流动中的杀伤人员地雷](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-apms-in-flow) |

## QQ 核心配置

### 检查器设置

将您的支付屏幕包装为 `CheckoutProvider` 以启用支付功能.

> **注释:** 反应和反应 原生进口(`useState`, (中文(简体) ), `useEffect`, (中文(简体) ), `useRef`, (中文(简体) ), `Button`以下示例中删去了简洁性——从中导入 `react` 编号 : `react-native` 和往常一样.

```typescript
import {
  CheckoutProvider,
  CheckoutConfiguration,
  Locale
} from '@checkout.com/checkout-react-native-components';

const config: CheckoutConfiguration = {
  publicKey: 'pk_test_your_public_key',
  environment: 'sandbox', // or 'production'
  locale: Locale.en_GB,
  merchantIdentifier: 'merchant.com.your-app.name', // Required for Apple Pay
  translations: {
    [Locale.en_GB]: {
      cardNumber: 'Card Number',
      payButtonPay: 'Pay Now'
    }
  },
  style: {
    colorTokens: {
      primary: '#186AFF',
      background: '#FFFFFF',
      border: '#E3E8F2',
      error: '#E01E5A'
    },
    borderButtonRadius: 12,
    borderFormRadius: 8
  }
};

export default function PaymentScreen() {
  const [paymentSession, setPaymentSession] = useState({
    id: '',
    payment_session_secret: ''
  });

  useEffect(() => {
    fetchPaymentSession().then((data) => {
      setPaymentSession(data);
    });
  }, []);

  return (
    <CheckoutProvider 
      config={config}
      onSuccess={(paymentMethod, paymentID) => {
        console.log('Payment successful:', { paymentMethod, paymentID });
      }}
      onError={(error) => {
        console.error('Payment error:', error);
      }}
      paymentSession={paymentSession}
    >
      {/* Your app components */}
    </CheckoutProvider>
  );
}
```

### QQ 配置选项

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `publicKey` | `string` | ✅ | 您的取出.com 公共 API 密钥 |
| `environment` | `'sandbox' | 'production'` | ✅ | API 调用的环境 |
| `locale` | `Locale` | ❌ | UI 文本的语法( 默认为英语) |
| `merchantIdentifier` | `string` | ❌ | 苹果支付商标识符 |
| `translations` | `Record<string, Translations>` | ❌ | 自定义文本翻译 |
| `style` | `Style` | ❌ | 用户界面定制选项 |

### 透视可观察性(OS和React Independence)

原生取出移动 SDK 附加 **设备和操作系统** 数据到 Insight 记录两个平台上的事件:

-   **机器人** (单位:千美元)`checkout-android-components`: `device_data.os_version` 居住人口来自 `Build.VERSION.SDK_INT` (API 关卡为字符串) in `LoggerManager` 编号 : `DeviceData`。 。 。 . `device_data.platform` 是Insight模块使用的Android平台常数.
-   **iOS系统** (单位:千美元)`checkout-ios-components`: `device_data.os_version` 来自 `UIDevice.current.systemVersion` 通过 `Constants.systemVersion` 内 `DeviceData`。 。 。 .

**原生反应** 构建添加可选 `properties.react_native` 提供元数据时日志事件的对象 :

| 外地 | 含义 |
| --- | --- |
| `version` | 反应原生版本(例如来自 `react-native` 软件包) |
| `arch` | 可选( N)`new` 编号 : `old`(中文(简体) ) |
| `engine` | 可选( N)`hermes` 编号 : `jsc`(中文(简体) ) |

默认, `CheckoutProvider` 初始化合并 `getDefaultReactNativeMetadata()` 输入 `initialize`: 已解决 `react-native` **软件包版本**, (中文(简体) ), **`arch`** (单位:千美元)`new` 何时 `nativeFabricUIManager` 在场,否则 `old`),以及 **`engine`** (单位:千美元)`hermes` 何时 `HermesInternal` 在场,否则 `jsc`) (中文(简体) ).

通过原生日志(包括跨平台的RN桥在iOS上的日志)发布的日志使用相同的 **`mobile_session_id`** 作为本地会话的其余部分,所以RN起源的条目与周围的"洞察"事件保持关联.

**`product_version` 在反应原生 SDK 上构建 :** CI 通常发布一个复合字符串, 如 `react-native-{rnSdkVersion}:{nativeSdkVersion}` (例: `react-native-1.0.0-beta7:1.0.1`)变为本地 `device_data.product_version` / 日志 `version` 字段,请参见您的管道或本地 SDK 释放注释.

## 组件参考

### 流动部分

这个 **流动** 组件提供了完整的支付经验,支持多种支付方法、3D安全以及动态支付方法的显示.

#### 基本用途

```typescript
import { Flow } from '@checkout.com/checkout-react-native-components';

const PaymentScreen = () => {
  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <Flow style={{ marginVertical: 20 }} />
    </CheckoutProvider>
  );
};
```

#### 强制 API 使用

```typescript
const PaymentScreen = () => {
  const flowRef = useRef<FlowRef>(null);

  const handleSubmit = () => {
    flowRef.current?.submit(); // Process payment
  };

  const handleTokenize = () => {
    flowRef.current?.tokenize(); // Tokenize card
  };

  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <Flow
        ref={flowRef}
        config={{
          showPayButton: false, // Hide built-in pay button
          cardConfigurations: {
            displayCardHolderName: 'top',
            acceptedCardSchemes: ['visa', 'mastercard', 'americanExpress'],
            acceptedCardTypes: ['credit', 'debit'],
            hideSecurityCode: false,
            cardholderNameMaxLength: 64,
          },
        }}
      />
      <Button title="Pay" onPress={handleSubmit} />
      <Button title="Tokenize Card" onPress={handleTokenize} />
    </CheckoutProvider>
  );
};
```

#### 流线道具

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `config` | `FlowConfig` | ❌ | 流量组合 |
| `style` | `ViewStyle | ViewStyle[]` | ❌ | 反应原生样式 |
| `ref` | `FlowRef` | ❌ | 强制性 API 参考 |

#### 流程配置选项

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `showPayButton` | `boolean` | `true` | 显示/隐藏内置付费按钮 |
| `paymentButtonAction` | `'payment' | 'tokenize'` | `'tokenize'` 何时 `config` 提供; 否则 `'payment'` | 按下支付按钮时的动作 |
| `paymentMethods` | `ReadonlyArray<FlowPaymentMethod> | ReadonlySet<FlowPaymentMethod>` | —— 说 | 流程提供: `'card'`, (中文(简体) ), `'applePay'`, (中文(简体) ), `'googlePay'`, (中文(简体) ), `'tabby'`。 。 。 . |
| `cardConfigurations` | `CardConfigurations` | —— 说 | 字段级卡片格式设置(被接受的方案,卡片类型,持卡人名显示等). 见 [卡片配置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--card-configuration)。 。 。 . |
| `apmConfiguration` | `ApmConfiguration` | —— 说 | Flow中由每行APM共享的付费按钮配置(Tabit today). **仅iOS** ——忽略了Android(英语:Android). 见 [流动中的杀伤人员地雷](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-apms-in-flow)。 。 。 . |
| `applePayConfiguration` | `ApplePayConfiguration` | —— 说 | 流程内显示的 Apple Pay 方法配置(接受的方案/类型, `showApplePayButton`) (中文(简体) ). **仅iOS** ——忽略了Android(英语:Android). 如果省略,Apple Pay会随接受的所有方案/类型显示. 见 [流程中的苹果支付](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-apple-pay-in-flow)。 。 。 . |
| `googlePayConfiguration` | `GooglePayConfiguration` | —— 说 | Google Pay方法的配置在流程内部显示(接受的方案/类型). 与独立的形状相同 [`GooglePayConfiguration`](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-googlepayconfiguration)。 。 。 . |
| `rememberMeConfiguration` | `RememberMeConfiguration` | —— 说 | 启用 Remember Me 复选框和可选预填 `data.email` 编号 : `data.phone` 给一个回来的飞船。 还有 `showPayButton` (必须), `acceptedCardSchemes` 财务报告和审定财务报表 `acceptedCardTypes`。 。 。 . |

#### 流动中的杀伤人员地雷

替代支付方法(APMs)共享一个支付按钮设置,因此每个APM行流程都适用一面旗. 它独立于 `showPayButton`:隐藏卡表的按钮不会隐藏APM的按钮.

> **注释:** `apmConfiguration` 实值 **仅iOS** 却被Android忽略了 提供杀伤人员地雷的来源 `paymentMethods` 和支付会话,不是来自此选项.

```typescript
<Flow
  config={{
    showPayButton: false, // card form renders no button
    apmConfiguration: { showPayButton: true }, // APM rows keep theirs
    paymentMethods: ['card', 'tabby'],
    cardConfigurations,
  }}
/>
```

独立的APM组件通过它们自己的形状也是一样的 `configuration` 道具 :

```typescript
<Tabby configuration={{ showPayButton: false }} />
```

#### 流程中的苹果支付

Flow 制作 Apple Pay 支付方法时,可以限制接受的卡片方案/类型,并切换 Apple Pay 按钮通过 `FlowConfig.applePayConfiguration`。使用同样的 [`ApplePayConfiguration`](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme-applepayconfiguration) 形状为独立 `ApplePay` 组件.

> **注释:** `applePayConfiguration` 实值 **仅iOS** 却被Android忽略了 它只会影响流程内部的Apple Pay方法——卡片形式仍然由 `cardConfigurations`。 。 。 .

```typescript
import { Flow, CheckoutProvider } from '@checkout.com/checkout-react-native-components';
import type { ApplePayConfiguration } from '@checkout.com/checkout-react-native-components';

const applePayConfiguration: ApplePayConfiguration = {
  acceptedCardSchemes: ['visa', 'mastercard'],
  acceptedCardTypes: ['credit', 'debit'],
  showApplePayButton: true,
};

const PaymentScreen = () => {
  return (
    <CheckoutProvider
      config={{ ...config, merchantIdentifier: 'merchant.com.your-app.name' }}
      paymentSession={paymentSession}
    >
      <Flow
        config={{
          cardConfigurations: {
            displayCardHolderName: 'top',
            acceptedCardSchemes: ['visa', 'mastercard'],
            acceptedCardTypes: ['credit', 'debit'],
            hideSecurityCode: false,
            cardholderNameMaxLength: 64,
          },
          applePayConfiguration,
        }}
      />
    </CheckoutProvider>
  );
};
```

### 卡片组件

这个 **纸牌** 组件提供一个安全卡输入格式,用于自定义的取出执行.

#### 基本用途

```typescript
import { Card, CardRef } from '@checkout.com/checkout-react-native-components';

const CardPaymentScreen = () => {
  const cardRef = useRef<CardRef>(null);

  const handleSubmit = () => {
    cardRef.current?.submit();
  };

  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <Card
        ref={cardRef}
        showPayButton={false}
        cardConfiguration={{
          displayCardHolderName: 'top',
          acceptedCardSchemes: ['visa', 'mastercard', 'americanExpress'],
          acceptedCardTypes: ['credit', 'debit'],
          hideSecurityCode: false,
          cardholderNameMaxLength: 64,
        }}
      />
    </CheckoutProvider>
  );
};
```

#### 卡片道具

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `cardConfiguration` | `CardConfigurations` | ❌ | 字段级卡片格式设置. 省略时,原生地层会应用自己的默认. 见 [卡片配置](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/#readme--card-configuration)。 。 。 . |
| `showPayButton` | `boolean` | ❌ | 显示/隐藏内置付费按钮 。 默认为 `true`。 。 。 . |
| `paymentButtonAction` | `'payment' | 'tokenize'` | ❌ | 当内置的付款按钮被监听时动作 。 默认为 `'tokenize'`。 。 。 . |
| `rememberMeConfiguration` | `RememberMeConfiguration` | ❌ | 启用 Remember Me 复选框。 省略后,复选框会隐藏在两个平台上. |
| `style` | `ViewStyle | ViewStyle[]` | ❌ | 反应原生样式 |
| `ref` | `CardRef` | ❌ | 强制性 API 参考 |

#### QQ 卡片配置

`CardConfigurations` 控制卡表的字段级行为。 它被 `Card` 组成部分 `cardConfiguration` 和通过 `Flow` (内部) `FlowConfig.cardConfigurations`) (中文(简体) ).

```typescript
import type { CardConfigurations } from '@checkout.com/checkout-react-native-components';

const cardConfiguration: CardConfigurations = {
  displayCardHolderName: 'top',                              // 'top' | 'bottom' | 'hidden'
  acceptedCardSchemes: ['visa', 'mastercard'],               // Array or Set
  acceptedCardTypes: ['credit', 'debit'],                    // Array or Set
  hideSecurityCode: false,
  cardholderNameMaxLength: 64,                               // clamped to [0, 255]
};
```

##### 字段

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `displayCardHolderName` | `'top' | 'bottom' | 'hidden'` | 持卡人名称字段的位置, 或者全部隐藏 . |
| `acceptedCardSchemes` | `ReadonlySet<CardScheme>` | `ReadonlyArray<CardScheme>` | 允许的卡片计划. 未知值在验证时被过滤出 . |
| `acceptedCardTypes` | `ReadonlySet<CardType>` | `ReadonlyArray<CardType>` | 被允许的牌型(信用,借记等). 未知值在验证时被过滤出 . |
| `hideSecurityCode` | `boolean` | 隐藏 CVV/ 安全码字段 . |
| `cardholderNameMaxLength` | `number` | 持卡人名的最大字符 。 值被夹入范围 `[0, 255]`。 。 。 . |

##### 支持的数值

```typescript
type CardScheme =
  | 'mada'
  | 'cartesBancaires'
  | 'visa'
  | 'mastercard'
  | 'americanExpress'
  | 'dinersClub'
  | 'discover'
  | 'jcb'
  | 'chinaUnionPay'
  | 'jaywan'
  | 'maestro'
  | 'unknown';

type CardType =
  | 'credit'
  | 'debit'
  | 'prepaid'
  | 'deferreddebit'
  | 'charge';
```

##### 收藏字段的矩阵对设置

`acceptedCardSchemes` 财务报告和审定财务报表 `acceptedCardTypes` 接受两者 `Array` 财务报告和审定财务报表 `Set` 按设计分列的投入:

-   **`Array`** 已接受为 **数字化** - 人类学文字学(`['visa', 'mastercard']`),JSON友好的固定装置,更容易传播.
-   **`Set`** 这是 **犬类形态** - 向你们提供独特的保障和成员资格方法(`has`,设置代数),在编组程序化配置时.

校正输入到 a `ReadonlySet` 内部,所以你可以通过任何符合您呼叫网站的表格.

### 苹果支付组件

这个 **苹果支付** 组件为 iOS 设备提供本地的 Apple Pay 集成.

#### 基本用途

```typescript
import { ApplePay, CheckoutProvider } from '@checkout.com/checkout-react-native-components';

const PaymentScreen = () => {
  return (
    <CheckoutProvider
      config={{
        ...config,
        merchantIdentifier: 'merchant.com.your-app.name' // Required!
      }}
      paymentSession={paymentSession}
    >
      <ApplePay style={{ height: 60, marginVertical: 10 }} />
    </CheckoutProvider>
  );
};
```

#### 限制卡计划和类型

您可以限制使用 Apple Pay 接受哪些卡片计划和卡片类型 `configuration` 道具 :

```typescript
import { ApplePay, CheckoutProvider } from '@checkout.com/checkout-react-native-components';
import type { ApplePayConfiguration } from '@checkout.com/checkout-react-native-components';

const applePayConfig: ApplePayConfiguration = {
  acceptedCardSchemes: ['visa', 'mastercard'],
  acceptedCardTypes: ['credit', 'debit'],
  showApplePayButton: true, // default; set to false to hide the native button
};

const PaymentScreen = () => {
  return (
    <CheckoutProvider
      config={{
        ...config,
        merchantIdentifier: 'merchant.com.your-app.name'
      }}
      paymentSession={paymentSession}
    >
      <ApplePay
        configuration={applePayConfig}
        style={{ height: 60, marginVertical: 10 }}
      />
    </CheckoutProvider>
  );
};
```

#### 苹果付费道具

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `configuration` | `ApplePayConfiguration` | ❌ | 限制接受的卡片方案/类型并切换苹果支付按钮 |
| `style` | `ViewStyle | ViewStyle[]` | ❌ | 反应原生样式 |

#### ApplePay 配置

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `acceptedCardSchemes` | `CardScheme[]` | `ReadonlySet<CardScheme>` | 全部 | 限制接受何种卡片计划。 如果省略或空出,则接受所有方案. |
| `acceptedCardTypes` | `('credit' | 'debit')[]` | `ReadonlySet<'credit' | 'debit'>` | 全部 | 限制哪些类型的卡被接受。 如果省略或为空,则接受所有类型. |
| `showApplePayButton` | `boolean` | `true` | 显示/隐藏本地苹果支付按钮. 设定为 `false` 在不使用内置按钮(用于自定义版式)的情况下制作 Apple Pay . |

**支持的卡片计划 :** `mada`, (中文(简体) ), `cartesBancaires`, (中文(简体) ), `visa`, (中文(简体) ), `mastercard`, (中文(简体) ), `americanExpress`, (中文(简体) ), `dinersClub`, (中文(简体) ), `discover`, (中文(简体) ), `jcb`, (中文(简体) ), `chinaUnionPay`, (中文(简体) ), `jaywan`, (中文(简体) ), `maestro`

**支持的卡片类型 :** `credit`, (中文(简体) ), `debit`

#### Apple Pay 代理标识器设置

如果您正在使用 Expo 并遇到以下错误 :

> _"Apple Walet中找不到接受的卡片计划的支付卡. 用户需要添加卡片“_

您需要将您的 Apple Pay Merchant ID 添加到 `ios` `entitlements` 对象(`com.apple.developer.in-app-payments` 数组) `app.json` 文件 :

```json
{
  "ios": {
    "supportsTablet": true,
    "bundleIdentifier": "com.checkout.components.MyRnDemo",
    "appleTeamId": "7VZD1234WM",
    "entitlements": {
      "com.apple.developer.in-app-payments": [
        "merchant.com.flow.bright.sandbox"
      ]
    }
  }
}
```

**注释:** Apple Pay 需要一个有效的 `merchantIdentifier` 在你身边 `CheckoutConfiguration` ,并且只在iOS设备上可用.

### 谷歌付费组件

这个 **谷歌付费** 组件为Android设备提供本地Google Pay集成.

#### 基本用途

```typescript
import { CheckoutProvider, GooglePay } from '@checkout.com/checkout-react-native-components';

const PaymentScreen = () => {
  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <GooglePay />
    </CheckoutProvider>
  );
};
```

#### 配置接受卡计划和类型

您可以通过 Google Pay 限制通过 Google Pay 接受哪些卡片计划和卡片类型 `googlePayConfiguration` 道具 :

```typescript
import { CheckoutProvider, GooglePay } from '@checkout.com/checkout-react-native-components';
import type { GooglePayConfiguration } from '@checkout.com/checkout-react-native-components';

const googlePayConfiguration: GooglePayConfiguration = {
  acceptedCardSchemes: ['visa', 'mastercard'],
  acceptedCardTypes: ['credit', 'prepaid'],
};

const PaymentScreen = () => {
  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <GooglePay googlePayConfiguration={googlePayConfiguration} />
    </CheckoutProvider>
  );
};
```

何时 `googlePayConfiguration` 删除,接受支付会议的所有计划和类型.

**接受卡计划:** `mada`, (中文(简体) ), `cartesBancaires`, (中文(简体) ), `visa`, (中文(简体) ), `mastercard`, (中文(简体) ), `americanExpress`, (中文(简体) ), `dinersClub`, (中文(简体) ), `discover`, (中文(简体) ), `jcb`, (中文(简体) ), `chinaUnionPay`, (中文(简体) ), `jaywan`, (中文(简体) ), `maestro`

**接受卡片类型 :** `credit`, (中文(简体) ), `prepaid`

#### 谷歌付费道具

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `googlePayConfiguration` | `GooglePayConfiguration` | ❌ | 接受的卡片方案和类型的配置 |
| `style` | `ViewStyle | ViewStyle[]` | ❌ | 反应原生样式 |

#### GooglePay 配置

| 财产 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `acceptedCardSchemes` | `CardScheme[]` | `ReadonlySet<CardScheme>` | ❌ | 限制接受何种卡片计划。 接受所有从支付会话. |
| `acceptedCardTypes` | `('credit' | 'prepaid')[]` | `ReadonlySet<'credit' | 'prepaid'>` | ❌ | 限制哪些类型的卡被接受 。 接受所有从支付会话. |

**注释:** Google Pay只在Android设备上提供.

## 高级特性

### 强制 API

两者 `Flow` 财务报告和审定财务报表 `Card` 组件支持方案控制所必需的API(提交和表示):

```typescript
import { CheckoutProvider, Card, Flow, FlowRef, CardRef } from '@checkout.com/checkout-react-native-components';

const PaymentScreen = () => {
  const flowRef = useRef<FlowRef>(null);
  const cardRef = useRef<CardRef>(null);

  // Trigger payment submission programmatically
  const processPayment = () => {
    flowRef.current?.submit();
  };

  // Tokenize card details without submitting
  const tokenizeCard = () => {
    cardRef.current?.tokenize();
  };

  // Update the payment amount (minor currency unit)
  const updateAmount = (amount: number, currency?: string) => {
    flowRef.current?.update({ amount, currency });
  };

  const cardConfiguration = {
    displayCardHolderName: 'top',
    acceptedCardSchemes: ['visa', 'mastercard', 'americanExpress'],
    acceptedCardTypes: ['credit', 'debit'],
    hideSecurityCode: false,
    cardholderNameMaxLength: 64,
  } as const;

  return (
    <CheckoutProvider config={config} paymentSession={paymentSession}>
      <Flow
        ref={flowRef}
        config={{ showPayButton: false, cardConfigurations: cardConfiguration }}
      />
      <Card
        ref={cardRef}
        showPayButton={false}
        cardConfiguration={cardConfiguration}
      />

      <Button title="Process Payment" onPress={processPayment} />
      <Button title="Save Card" onPress={tokenizeCard} />
      <Button title="Update amount" onPress={() => updateAmount(1000, 'GBP')} />
    </CheckoutProvider>
  );
};
```

## 🎨自定义

### QQ 完整颜色调试引用

```typescript
const customStyle = {
  colorTokens: {
    // Primary brand color
    primary: '#186AFF',
    
    // Background colors
    background: '#FFFFFF',
    formBackground: '#F7F9FC',
    
    // Border colors
    border: '#E3E8F2',
    formBorder: '#C8D1E0',
    outline: '#91B2EE',
    
    // State colors
    error: '#E01E5A',
    success: '#1AA27B',
    disabled: '#B0B0B0',
    
    // Text colors
    secondary: '#545F7A',
    inverse: '#FFFFFF',
    
    // Action colors
    action: '#186AFF',
    
    // Android specific
    scrolledContainer: '#F0F0F0' // Android only
  }
};
```

#### 接受颜色格式

每种颜色符号都接受其中任何一种格式,经过验证和规范 SDK在到达原生地层之前(在iOS和Android上的同樣渲染):

-   十六进制: `#RGB`, (中文(简体) ), `#RGBA`, (中文(简体) ), `#RRGGBB`, (中文(简体) ), `#RRGGBBAA` (有无) `#`(中文(简体) )
-   `rgb(r, g, b)` 财务报告和审定财务报表 `rgba(r, g, b, a)` (阿尔法) `0`– 说吧 –`1`(中文(简体) )
-   命名 CSS 颜色, 例如 . `rebeccapurple`

通过 4/8 位数的十六进制或 `rgba()` 表格(例如:. `#186AFF80` 或者说 `rgba(24, 106, 255, 0.5)`) (中文(简体) ). 报告一种无法解析的颜色 sDK 返回到默认值,而不是产生出乎意料的值.

### ++ 边界半径

```typescript
const customBorders = {
  borderButtonRadius: 12,  // Button border radius (all corners)
  borderFormRadius: 8      // Form field border radius (all corners)
};
```

每个半径接受一个单一数字(适用于所有四个角)或一个 单角物体。 关闭角默认为 `0`数字 :

```typescript
const customBorders = {
  borderFormRadius: {
    topLeft: 8,
    topRight: 16,
    bottomLeft: 0,
    bottomRight: 0,
  },
};
```

> **iOS 注释 :** iOS将一半径应用到一组角而不是一个角上 每个角的独立半径。 当角光度不同时, iOS 大致为 对每个圆角应用请求的最大半径。 安卓荣誉 每个角落都一样 使用单个数字或等角弧度来表示相同值 跨平台渲染.

### 自定义字体

```typescript
const fonts = {
  button: {
    fontFamily: 'brand_sans',
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 20,
  },
  input: {
    fontFamily: 'brand_sans',
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 20,
  },
  footnote: {
    fontFamily: 'brand_sans',
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 20,
  },
  label: {
    fontFamily: 'brand_sans',
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 20,
  },
  subheading: {
    fontFamily: 'brand_sans',
    fontSize: 14,
    letterSpacing: 2,
    lineHeight: 20,
  },
  heading: {
    fontFamily: 'brand_sans',
    fontSize: 24,
    fontWeight: 700,
    letterSpacing: 0,
    lineHeight: 28,
  },
};
```

可塑角色是: `button`, (中文(简体) ), `footnote`, (中文(简体) ), `heading`, (中文(简体) ), `input`, (中文(简体) ), `label` 财务报告和审定财务报表 `subheading`。 。 。 .

#### 字体重量

`fontWeight` 接受标准100-1000尺度上的数值。 重量从 **300到800在iOS和Android上完全相同**。这些平台仅在 极端,因为Android SDK 暴露出6个重(Light-ExtraBold)同时 iOS曝光9:

| `fontWeight` | iOS系统 | 机器人 |
| --- | --- | --- |
| 100个/200个 | 超光度/ 薄度 | 光线 |
| 300至800美元 | 轻-重 | – 外接粗体(同型) |
| 900人/1,000人 | 黑色 | 外加粗体 |

对于跨两个平台的像素相容结果,要保持在300-800范围内.

设定 `fontFamily` 或习惯名称 在您的应用程序中捆绑的字体 .

#### iOS系统

SDK 支持所有 iOS 默认系统 [字体](https://developer.apple.com/fonts/system-fonts/), (中文(简体) ), 以及应用程序中捆绑的自定义字体(通过字体的 PostScript 名称) 作为 `fontFamily`) (中文(简体) ).

#### 机器人

支持下列内置通用字体家族:

-   桑瑟夫语Name
-   赛里夫
-   单相空间
-   诅咒
-   默认

**自定义字体**: 任何其他 `fontFamily` 值与您的应用程序相对应 `res/font` 资源。 将字体文件装入 `android/app/src/main/res/font/` (小写,例如:. `res/font/brand_sans.ttf`)并传递资源名称为 `fontFamily` (例如:. `"brand_sans"`) (中文(简体) ). 如果找不到匹配的资源, 默认值 家庭被使用,所以一个拼错的名字轻而易举地降解而不是崩溃.

> 字体文件名在 `res/font` 必须是小写,只包含字母, 数字和下划线,每个Android资源命名规则.

### & 自定义翻译

#### 已支持的本地语言

```typescript
const Locale = {
  ar: 'ar',           // Arabic
  da_DK: 'da-DK',     // Danish
  de_DE: 'de-DE',     // German
  el: 'el',           // Greek
  en_GB: 'en-GB',     // English (UK)
  es_ES: 'es-ES',     // Spanish
  fi_FI: 'fi-FI',     // Finnish
  fil_PH: 'fil-PH',   // Filipino
  fr_FR: 'fr-FR',     // French
  hi_IN: 'hi-IN',     // Hindi
  id_ID: 'id-ID',     // Indonesian
  it_IT: 'it-IT',     // Italian
  ja_JP: 'ja-JP',     // Japanese
  ms_MY: 'ms-MY',     // Malay
  nb_NO: 'nb-NO',     // Norwegian
  nl_NL: 'nl-NL',     // Dutch
  pt_PT: 'pt-PT',     // Portuguese
  sv_SE: 'sv-SE',     // Swedish
  th_TH: 'th-TH',     // Thai
  vi_VN: 'vi-VN',     // Vietnamese
  zh_CN: 'zh-CN',     // Chinese (Simplified)
  zh_HK: 'zh-HK',     // Chinese (Hong Kong)
  zh_TW: 'zh-TW'      // Chinese (Traditional)
} as const
```

#### 翻译接口

所有可用的翻译密钥及其描述 :

```typescript
export type Translations = {
  addBillingAddress?: string;
  addAddress?: string;
  address?: string;
  addressLine1?: string;
  addressLine2?: string;
  billingAddress?: string;
  card?: string;
  cardExpiryDate?: string;
  cardExpiryDateIncomplete?: string;
  cardExpiryDateInvalid?: string;
  cardExpiryDatePlaceholderMonth?: string;
  cardExpiryDatePlaceholderYear?: string;
  cardHolderName?: string;
  cardNumber?: string;
  cardNumberInvalid?: string;
  cardNumberNotSupported?: string;
  cardSecurityCode?: string;
  cardSecurityCodeInvalid?: string;
  cardSecurityCodePlaceholder?: string;
  city?: string;
  confirm?: string;
  country?: string;
  selectCountry?: string;
  editAddress?: string;
  email?: string;
  emailFormatInvalid?: string;
  firstName?: string;
  formRequired?: string;
  lastName?: string;
  insufficientCharacters?: string;
  noMatchesFound?: string;
  optional?: string;
  payButtonPay?: string;
  payButtonPaymentComplete?: string;
  payButtonPaymentProcessing?: string;
  paymentDeclinedInvalidCustomerData?: string;
  paymentDeclinedInvalidPaymentSessionData?: string;
  paymentDeclinedMerchantMisconfiguration?: string;
  paymentDeclinedNotEnoughFunds?: string;
  paymentDeclinedTryAgain?: string;
  phoneNumber?: string;
  search?: string;
  state?: string;
  trySearchingWithAnotherTerm?: string;
  useShippingAsBilling?: string;
  zip?: string;
  preferredSchemeCta?: string;
  preferredSchemeDescription?: string;
  selectState?: string;
  cardTypeNotSupported?: string;
  cardTypeCredit?: string;
  cardTypeDebit?: string;
  cardTypePrepaid?: string;
  cardTypeCharge?: string;
  deferredDebit?: string;
  fullName?: string;
  mustBeGreaterThan?: string;
  phoneNumberInvalid?: string;
  saveCardDetails?: string;
  done?: string;
  edit?: string;
  useSavedPaymentMethod?: string;
  savedCardsHeader?: string;
  otherPaymentMethodsHeader?: string;
  useNewCard?: string;
  setDefaultPaymentMethod?: string;
  storedCardSavedForRememberMe?: string;
  expired?: string;
  default?: string;
  addCard?: string;
  useDifferentPaymentMethod?: string;
  logout?: string;
  rememberMeUseSavedDetails?: string;
  rememberMeVerifyAndPay?: string;
  rememberMeModalCTA?: string;
  otpCode?: string;
  otpResendCountdown?: string;
  otpResendDescription?: string;
  otpResendCTA?: string;
  otpMaxRetries?: string;
  otpMaxResends?: string;
  otpResendEmail?: string;
  otpResendPhone?: string;
  otpSendPhone?: string;
  otpSendingPhone?: string;
  otpCodeDescriptionEmail?: string;
  otpCodeDescriptionPhone?: string;
  otpCodeDescriptionWhatsApp?: string;
  otpCodeDescription?: string;
  otpCodeError?: string;
  otpCodeExpired?: string;
  otpCodeSend?: string;
  otpCodeEmail?: string;
  otpCodePhone?: string;
  otpCodeWhatsApp?: string;
  otpDifferentMethod?: string;
  addressFormTitle?: string;
  storeForFutureUseCollectConsent?: string;
  rememberMeDescription?: string;
  continueWithoutSavedDetails?: string;
  change?: string;
  apmInfoText?: string;
  tamaraSubtitle?: string;
  customerPhoneNotRegistered?: string;
  paymentDeclinedPaymentExpired?: string;
  paymentContextError?: string;
};
```

#### 自定义翻译示例

```typescript
const customTranslations = {
  [Locale.en_GB]: {
    // Address and billing
    addBillingAddress: 'Add Billing Address',
    addAddress: 'Add Address',
    address: 'Address',
    addressLine1: 'Address Line 1',
    addressLine2: 'Address Line 2',
    billingAddress: 'Billing Address',
    
    // Card form labels
    card: 'Card',
    cardNumber: 'Card Number',
    cardExpiryDate: 'MM/YY',
    cardExpiryDatePlaceholderMonth: 'MM',
    cardExpiryDatePlaceholderYear: 'YY',
    cardSecurityCode: 'CVV',
    cardSecurityCodePlaceholder: 'CVV',
    cardHolderName: 'Cardholder Name',
    
    // Personal information
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'Email Address',
    phoneNumber: 'Phone Number',
    
    // Location fields
    city: 'City',
    state: 'State/Province',
    zip: 'ZIP/Postal Code',
    country: 'Country',
    selectCountry: 'Select Country',
    selectState: 'Select State',
    
    // Actions and buttons
    payButtonPay: 'Pay Now',
    payButtonPaymentProcessing: 'Processing...',
    payButtonPaymentComplete: 'Payment Complete',
    confirm: 'Confirm',
    editAddress: 'Edit Address',
    search: 'Search',
    
    // Validation and error messages
    formRequired: 'This field is required',
    cardNumberInvalid: 'Invalid card number',
    cardNumberNotSupported: 'Card type not supported',
    cardExpiryDateIncomplete: 'Expiry date incomplete',
    cardExpiryDateInvalid: 'Invalid expiry date',
    cardSecurityCodeInvalid: 'Invalid security code',
    emailFormatInvalid: 'Invalid email format',
    insufficientCharacters: 'Insufficient characters',
    
    // Payment errors
    paymentDeclinedTryAgain: 'Payment declined. Please try again.',
    paymentDeclinedNotEnoughFunds: 'Insufficient funds',
    paymentDeclinedInvalidCustomerData: 'Invalid payment details',
    paymentDeclinedInvalidPaymentSessionData: 'Invalid payment session data',
    paymentDeclinedMerchantMisconfiguration: 'Merchant configuration error',
    
    // Search and selection
    noMatchesFound: 'No matches found',
    trySearchingWithAnotherTerm: 'Try searching with another term',
    
    // Miscellaneous
    optional: 'Optional',
    useShippingAsBilling: 'Use shipping address as billing address',
    preferredSchemeCta: 'Select Preferred Scheme',
    preferredSchemeDescription: 'Please select your preferred card scheme'
  }
};
```

## 事件处理

### \* 完整事件参考

```typescript
import type {
  CardMetadata,
  Error as CheckoutError,
  TokenizationResult,
} from '@checkout.com/checkout-react-native-components';

const eventHandlers = {
  // Component lifecycle
  onReady: (paymentMethod: string) => {
    console.log('Component ready for:', paymentMethod);
  },
  
  // Form validation
  onChange: (paymentMethod: string, isValid: boolean, isAvailable: boolean) => {
    console.log('Form state changed:', { paymentMethod, isValid, isAvailable });
    // Update UI based on form validity
  },
  
  // Payment submission
  onSubmit: (paymentMethod: string) => {
    console.log('Payment submitted for:', paymentMethod);
    // Show loading state
  },
  
  // Tokenization
  onTokenized: async (tokenizationResult: TokenizationResult) => {
    console.log('Card tokenized:', tokenizationResult);
    
    if (tokenizationResult.data.cardType === 'credit') {
      return {
        continue: false,
        error: 'Credit cards are not accepted.',
      };
    }

    await utilizeToken(tokenizationResult.data.token);

    return { continue: true, error: null };
  },
  
  // Card BIN changes (partial metadata while the shopper types)
  onCardBinChanged: (cardMetadata: Partial<CardMetadata>) => {
    console.log('Card BIN changed:', cardMetadata.scheme, cardMetadata.bin);
  },

  // Payment success
  onSuccess: (paymentMethod: string, paymentID: string) => {
    console.log('Payment successful:', { paymentMethod, paymentID });
    // Navigate to success screen
  },
  
  // Error handling — compare against ErrorCode / ErrorType (both exported)
  onError: (error: CheckoutError) => {
    console.error('Payment error:', error);
    // e.g. error.errorCode === ErrorCode.CardAuthenticationFailed
    // Show error message to user
  },
  
  // Handle submit — return your server-side submission result back to the SDK
  handleSubmit: async (sessionData: string) => {
    // Forward `sessionData` to your server-side integration for payment submission
    const submitResponse = await performPaymentSubmission(sessionData);

    return {
      success: true,
      paymentSessionSubmissionResult: submitResponse,
    };
  },
};

<CheckoutProvider config={config} paymentSession={paymentSession} {...eventHandlers}>
  {/* Components */}
</CheckoutProvider>
```

### 其他出口

-   `ErrorCode` 财务报告和审定财务报表 `ErrorType` ——常数比较 `error.errorCode` 财务报告和审定财务报表 `error.type` 内 `onError`。 。 。 .
-   `Country` —— ISO 3166-1 α-2国家代码的enum(例如. `Country.Albania === 'AL'`) (中文(简体) ).

## 许可证

这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40checkout.com/checkout-react-native-components/LICENSE) 详细文件.

## 常见问题

### @checkout\.com/checkout-react-native-components 是什么？

\[BETA——不用于生产\] 对本地 iOS & Android 检查组件进行本地包装

### 如何安装 @checkout\.com/checkout-react-native-components？

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

### @checkout\.com/checkout-react-native-components 支持 TypeScript 吗？

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

### @checkout\.com/checkout-react-native-components 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @checkout\.com/checkout-react-native-components 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @checkout\.com/checkout-react-native-components 可以商用吗？

@checkout\.com/checkout-react-native-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @checkout\.com/checkout-react-native-components 的下载量有多少？

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

### @checkout\.com/checkout-react-native-components 还在维护吗？

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