条纹

提供对原生 API 的访问以集成 Stripe 支付的库。

Expo 包括对 @stripe/stripe-react-native 的支持，它允许你使用 React Native 和 Expo 在原生 Android 和 iOS 应用中构建令人愉快的支付体验。该库提供了功能强大且可自定义的 UI 屏幕和元素，可以开箱即用地收集用户的付款详细信息。

¥Expo includes support for @stripe/stripe-react-native, which allows you to build delightful payment experiences in your native Android and iOS apps using React Native and Expo. This library provides powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.

从 Expo 的 expo-payments-stripe 模块迁移？详细了解如何过渡到新的 @stripe/stripe-react-native 库。

¥Migrating from Expo's expo-payments-stripe module? Learn more about how to transition to the new @stripe/stripe-react-native library.

Watch: Universal Full-Stack Expo Stripe Payment Integration

安装

¥Installation

每个 Expo SDK 版本都需要特定的 @stripe/stripe-react-native 版本。请参阅 条纹变更日志 了解版本映射。要自动安装适合你的 Expo SDK 版本的正确版本，请运行：

¥Each Expo SDK version requires a specific @stripe/stripe-react-native version. See the Stripe CHANGELOG for a mapping of versions. To automatically install the correct version for your Expo SDK version, run:

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions provided by the library's README or documentation.

配置插件设置（可选）

¥Config plugin setup (optional)

如果你使用 EAS Build，则可以使用 @stripe/stripe-react-native 配置插件 完成大部分 Stripe 设置。要进行设置，只需将配置插件添加到 app.json 或 app.config.js 的 plugins 数组中，如下所示，然后重建应用。

¥If you're using EAS Build, you can do most of your Stripe setup using the @stripe/stripe-react-native config plugin. To set up, just add the config plugin to the plugins array of your app.json or app.config.js as shown below, then rebuild the app.

{
  "expo": {
    %%placeholder-start%%... %%placeholder-end%%
    "plugins": [
      [
        "@stripe/stripe-react-native",
        {
          "merchantIdentifier": string | string [],
          "enableGooglePay": boolean
        }
      ]
    ],
  }
}

• 商户标识符：仅限 iOS。这是 Apple 商家 ID 在此处获取。否则，Apple Pay 将无法按预期工作。如果你有多个 merchantIdentifiers，你可以将它们设置在一个数组中。

  ¥merchantIdentifier: iOS only. This is the Apple merchant ID obtained here. Otherwise, Apple Pay will not work as expected. If you have multiple merchantIdentifiers, you can set them in an array.

• 启用 GooglePay：仅限安卓。指示是否启用 Google Pay 的布尔值。默认为 false。

  ¥enableGooglePay: Android only. Boolean indicating whether or not Google Pay is enabled. Defaults to false.

示例

¥Example

试用 Stripe 只需几秒钟。连接到你设备上的 这个小样。

¥Trying out Stripe takes just a few seconds. Connect to this Snack on your device.

在幕后，该示例连接到 这个故障服务器代码，因此你需要打开该页面来启动服务器。请随意运行你自己的 Glitch 服务器并复制该代码！

¥Under the hood, that example connects to this Glitch server code, so you'll need to open that page to spin up the server. Feel free to run your own Glitch server and copy that code!

用法

¥Usage

有关使用信息和详细文档，请参阅以下资源：

¥For usage information and detailed documentation, see the following resources:

• Stripe 的 React Native SDK 参考

  ¥Stripe's React Native SDK reference

• Stripe 的 React Native GitHub 存储库

  ¥Stripe's React Native GitHub repo

• Stripe 的示例 React Native 应用

  ¥Stripe's example React Native app

常见问题

¥Common issues

浏览器弹出窗口没有重定向回我的应用

¥Browser pop-ups are not redirecting back to my app

如果你依赖重定向，则需要将 urlScheme 传递到 initStripe。为了确保你始终使用正确的 urlScheme，请传入：

¥If you're relying on redirects, you'll need to pass in a urlScheme to initStripe. To make sure you always use the proper urlScheme, pass in:

import * as Linking from 'expo-linking';
import Constants from 'expo-constants';

urlScheme:
  Constants.appOwnership === 'expo'
    ? Linking.createURL('/--/')
    : Linking.createURL(''),

无论你是在 Expo Go 还是生产应用中运行，Linking.createURL() 将确保你使用正确的方案。'/--/' 在 Expo Go 中是必需的，因为它表示其后面的子字符串对应于深层链接路径，而不是应用本身路径的一部分。

¥Linking.createURL() will ensure you're using the proper scheme, whether you're running in Expo Go or your production app. '/--/' is necessary in Expo Go because it indicates that the substring after it corresponds to the deep link path, and is not part of the path to the app itself.

iOS 上的 PaymentSheet 本地化

¥PaymentSheet localization on iOS

在 Android 上，根据设备的语言设置自动检测 PaymentSheet 的翻译。

¥On Android, the translation of PaymentSheet is automatically detected based on a device's language settings.

在 iOS 上，你必须启用 CFBundleAllowMixedLocalizations 并在应用配置中的 ios.infoPlist 下使用 CFBundleLocalizations 添加首选语言：

¥On iOS, you must enable CFBundleAllowMixedLocalizations and add the preferred language using CFBundleLocalizations under ios.infoPlist in the app config:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "CFBundleAllowMixedLocalizations": true,
        "CFBundleLocalizations": ["fr"]
        %%placeholder-start%%... %%placeholder-end%%
      }
      %%placeholder-start%%... %%placeholder-end%%
    }
  }
}

局限性

¥Limitations

谷歌支付

¥Google Pay

Expo 不支持 Google Pay。要使用 Google Pay，你必须创建 开发构建。这可以通过 EAS 构建 来完成，或者通过运行 npx expo run:android 在本地完成。

¥Google Pay is not supported in Expo Go. To use Google Pay, you must create a development build. This can be done with EAS Build, or locally by running npx expo run:android.

苹果支付

¥Apple Pay

Expo 不支持 Apple Pay。要使用 Apple Pay，你必须创建 开发构建。这可以通过 EAS 构建 来完成，或者通过运行 npx expo run:ios 在本地完成。

¥Apple Pay is not supported in Expo Go. To use Apple Pay, you must create a development build. This can be done with EAS Build, or locally by running npx expo run:ios.