ReferenceError：找不到变量：从“@stripe.stripe-js”导入 loadStripe 时的文档

Question

在与 Stripe 集成的 React Native 中开发应用程序时，我不断收到警告[ReferenceError: Can't find variable: document] 。

我无法找到错误的原因。

我能想到的唯一可能是 Stripe 模块是否仅适用于 react js，并且正在寻找 HTML 文档以供参考。

我相当肯定是这条线导致了警告。

import {loadStripe} from '@stripe/stripe-js';

当它被包括在内时，警告就会出现。 我阅读了文档，但找不到任何东西。

如果有人可以为我指出可能导致问题的正确方向，或者条带是否可以作为跨平台应用程序在 react native 上运行，请告诉我。

Answer 1

我能想到的唯一可能是 Stripe 模块是否仅适用于 react js，并且正在寻找 HTML 文档以供参考。

这是对的。 @stripe/stripe-js模块和 Stripe.js 仅用于在浏览器中使用。 在 React Native 中使用 Stripe.js 的唯一方法是使用 WebView：

• 示例： https://snack.expo.io/@ttmarek/react-native-stripe-elements-webview
• WebView 文档： https://reactnative.dev/docs/webview.html
• 加载 static HTML 或 URI： https://reactnative.dev/docs/webview.html#source

这种方法的好处是它使用 vanilla Stripe.js 和 Elements，而且很简单。 缺点是用户体验有时会因 WebView 性能而受到影响，并且由于 Android 和 Z1BDF605991920DB11CBDF8508204 的限制，支付请求按钮（即 Apple Pay、Google Pay）在 WebViews 中不起作用。

可以说更好的选择是使用绑定到 Stripe 的原生 iOS 和 Android SDK 的库。 使用最广泛的库称为tipsi-stripe ： https://github.com/tipsi/tipsi-stripe 。

使用tipsi-stripe 的主要缺点是它不支持SCA/PaymentIntents： https://github.com/tipsi/tipsi-stripe/issues/448 ，并且没有像人们希望的那样积极维护。