首页指南参考教程

条纹

GitHub

npm

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

Android
iOS

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.

安装

¥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:

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

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

配置插件设置(可选)

¥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.

app.json
{
  "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, please refer to:

  • 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.

局限性

¥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.

Expo 中文网 - 粤ICP备13048890号