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

Question

While developing an app in React Native intgerating with Stripe, I keep getting a warning [ReferenceError: Can't find variable: document] .

I can't get the cause for the error.

The only possiblity I can think is if the Stripe module is only built for react js and is looking for the HTML document to reference.

I am fairly certain it is this line which is causing the warning.

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

When it is included the warning shows up. I read the documentation but there's nothing I could find.

If anyone could point me in the right direction for what might be causing the problem or if stripe will work on react native as a cross platform app, please let me know.

Answer 1

The only possiblity I can think is if the Stripe module is only built for react js and is looking for the HTML document to reference.

This is correct. The @stripe/stripe-js module and Stripe.js are only meant to be used within in a browser. The only way to use Stripe.js within React Native would be to use a WebView:

• Example: https://snack.expo.io/@ttmarek/react-native-stripe-elements-webview
• WebView docs: https://reactnative.dev/docs/webview.html
• Load static HTML or a URI: https://reactnative.dev/docs/webview.html#source

The benefit of this approach is that it uses vanilla Stripe.js and Elements, and is straightforward. The cons are that the user experience can sometimes suffer due to WebView performance, and the payment request button (ie, Apple Pay, Google Pay) doesn't work in WebViews due to limitations with Android and iOS.

An arguably better option is to use a library that binds to Stripe's native iOS and Android SDKs. The most widely used library that does this is called tipsi-stripe : https://github.com/tipsi/tipsi-stripe .

The main downside to using tipsi-stripe is that it doesn't support SCA/PaymentIntents: https://github.com/tipsi/tipsi-stripe/issues/448 , and is not as actively maintained as one would hope.