Reference version

@stripe/stripe-react-native

一个提供原生 API 访问权限,用于集成 Stripe 支付的库。

Android
iOS
Included in Expo Go
Bundled version:
0.50.3

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

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

正在从 Expo 的 expo-payments-stripe 模块迁移?了解如何过渡到新的 @stripe/stripe-react-native

观看:通用全栈 Expo Stripe 支付集成
观看:通用全栈 Expo Stripe 支付集成

在一个通用 Expo 应用中跨 Android、iOS 和 web 集成 Stripe 支付的完整演示。

安装

每个 Expo SDK 版本都需要特定版本的 @stripe/stripe-react-native。请参阅 Stripe CHANGELOG 以了解版本对应关系。要为你的 Expo SDK 版本自动安装正确的版本,请运行:

Terminal
npx expo install @stripe/stripe-react-native

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

配置插件设置(可选)

如果你正在使用 EAS Build,你可以使用 @stripe/stripe-react-native 配置插件完成大部分 Stripe 设置。要进行设置,只需像下面这样将配置插件添加到 app.jsonapp.config.jsplugins 数组中,然后重新构建应用。

app.json
{ "expo": { %%placeholder-start%%... %%placeholder-end%% "plugins": [ [ "@stripe/stripe-react-native", { "merchantIdentifier": string | string [], "enableGooglePay": boolean } ] ], } }
  • merchantIdentifier:仅限 iOS。这是在此处获取的 Apple merchant ID。否则,Apple Pay 将无法按预期工作。如果你有多个 merchantIdentifiers,可以将它们设置在数组中。
  • enableGooglePay:仅限 Android。表示是否启用 Google Pay 的布尔值。默认为 false

示例

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

在底层,该示例连接到这段 Glitch 服务器代码,因此你需要打开该页面来启动服务器。欢迎你运行自己的 Glitch 服务器并复制那段代码!

用法

有关用法信息和详细文档,请参阅以下资源:

常见问题

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

如果你依赖重定向,你需要向 initStripe 传入一个 urlScheme。为确保始终使用正确的 urlScheme,请传入:

import * as Linking from 'expo-linking'; import Constants from 'expo-constants'; urlScheme: Constants.appOwnership === 'expo' ? Linking.createURL('/--/') : Linking.createURL(''),

Linking.createURL() 将确保你使用的是正确的 scheme,无论你是在 Expo Go 中运行还是在正式应用中运行。'/--/' 在 Expo Go 中是必要的,因为它表示其后的子字符串对应于深度链接路径,而不是应用自身路径的一部分。

iOS 上的 PaymentSheet 本地化

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

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

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

限制

Google Pay

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

Apple Pay

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