移动反应原生 SDK 流量

• QQ 快速启动
  • 安装
  • 平台设置
• * 构成部分概览
• QQ 核心配置
  • 检查器设置
  • 配置选项
• 组件参考
  • 流动部分
  • 卡片组件
    • 卡片配置
  • 苹果支付组件
  • 谷歌付费组件
• 高级特性
  • 强制 API
• 🎨自定义
  • 颜色
  • 边框半径
  • 本地化
• 事件处理
  • 组件召回
• 许可证

QQ 快速启动

安装

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

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

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

平台设置

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

iOS 设置

cd ios
pod install

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

  pod 'FingerprintPro', '2.12.0'

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

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

QQ Android 设置

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

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数字 :

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

要启用 Google Pay 支付, 您必须添加以下元数据标签 AndroidManifest.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 工具箱 用于简单的Android Studio版本管理.

曝光设置

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

npx expo prebuild

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

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

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

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

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

* 构成部分概览

QQ 核心配置

检查器设置

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

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

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 配置选项

透视可观察性(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 提供元数据时日志事件的对象 :

默认, 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安全以及动态支付方法的显示.

基本用途

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

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

强制 API 使用

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>
  );
};

流线道具

流程配置选项

流动中的杀伤人员地雷

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

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

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

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

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

流程中的苹果支付

Flow 制作 Apple Pay 支付方法时,可以限制接受的卡片方案/类型,并切换 Apple Pay 按钮通过 FlowConfig.applePayConfiguration。使用同样的 ApplePayConfiguration 形状为独立 ApplePay 组件.

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

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>
  );
};

卡片组件

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

基本用途

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>
  );
};

卡片道具

QQ 卡片配置

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

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]
};

字段

支持的数值

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 集成.

基本用途

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 道具 :

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>
  );
};

苹果付费道具

ApplePay 配置

支持的卡片计划 : 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 文件 :

{
  "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集成.

基本用途

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 道具 :

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

谷歌付费道具

GooglePay 配置

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

高级特性

强制 API

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

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 完整颜色调试引用

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 返回到默认值,而不是产生出乎意料的值.

++ 边界半径

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

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

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

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

自定义字体

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:

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

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

iOS系统

SDK 支持所有 iOS 默认系统 字体, (中文(简体) ), 以及应用程序中捆绑的自定义字体(通过字体的 PostScript 名称) 作为 fontFamily) (中文(简体) ).

机器人

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

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

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

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

& 自定义翻译

已支持的本地语言

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

翻译接口

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

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;
};

自定义翻译示例

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'
  }
};

事件处理

* 完整事件参考

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') (中文(简体) ).

许可证

这个项目根据麻省理工学院许可证颁发——见 自由主义 详细文件.