CODEWITHSUNDEEP
javascriptandroidiosreact-nativestripe-payments
Bryce Jackson
Bryce Jackson

Reputation: 3

ReferenceError: Can't find variable: document when importing loadStripe from '@stripe.stripe-js'

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.

Upvotes: 0

Views: 2377

Answers (1)

ttmarek
ttmarek

Reputation: 3260

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:

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 (i.e., 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.

Upvotes: 1

Related Questions