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 ，並且沒有像人們希望的那樣積極維護。