React-stripe-elements: React Native intergration

[jacob-cross99]

Can there be a guide for integrating with React Native? Assuming it's possible without major amounts of changes.

[fred-stripe]

Hi there, great question!

Stripe Elements is built as set of web components, relying on the DOM and browser to secure credit card data transmitted to Stripe from an end customer. To my understanding React Native provides a developer experience close to developing in React but wraps native components and views rather than build a web page with web-based components—in contrast to Cordova which encourages the page-based approach.

Given the above constraints, it won't be possible for this project to integrate directly with React Native. However, there are similar credit card input components available with the Stripe iOS and Android SDKs, for example:

https://stripe.com/docs/mobile/ios/custom#stppaymentcardtextfield
https://stripe.com/docs/mobile/android#card-input-widget

Any React Native integration would need to bridge these components for direct native integration. There's a community project that does this, however they provide their own version of the Stripe components copied from an older version of the SDKs instead of bridging the SDKs directly:

https://github.com/tipsi/tipsi-stripe

[b-mcrae]

Hi @fred-stripe and @michelle!

If we use the https://github.com/tipsi/tipsi-stripe project, what level of SAQ will we have to submit for PCI compliance? Will it be the "Pre-filled SAQ A"?

I'm specifically curious about the SAQ we will have to submit if we use this method: https://tipsi.github.io/tipsi-stripe/docs/createtokenwithcard.html.

Thank you so much!

[SudoPlz]

Hey @fred-stripe and @michelle

I'd really love to know if as react-native developers we're PCI compliant if we use tipsi-stripe as well.

tipsi-stripe devs say they wrap the mobile sdk, so I'm trying to figure if something changed since the time @fred-stripe posted his comment back on 2017.

Thanks

[teich-stripe]

I haven't personally inspected the tipsi-stripe library. If they merely wrap it and provide no other functionality (I'd inspect what specifically they do with credit card numbers), then you will be PCI compliant if you use it.

Hope that helps!

[kishore15]

i am using strip api for getting token from strip payment gateway , is it correct or not , and can any one help how to integrate strip payment gateway in mobile react native , i did not find how to install tipsi ,any one can you help on this.

[slorber]

Hi @fred-stripe @teich-stripe @michelle

I'm a ReactNative dev. I understand this project may be "web only", and there are native mobile SDKs.

I think it's surprising there is no agnostic client side javascript package to handle basic client side stripe operations. If only there was a package that would permit to create payment methods in a PCI compliant way we would be able to build PCI/SCA compliant flows ourselves, even if it would be PCI SAQ-D.

Currently, it's complicated to load Stripe.js in a RN environment. Some of us rely on calling the stripe api directly to obtain a card token or payment method. That would be convenient if there was an officially supported stripe client published on NPM, and agnostic of the JS env (ie running in browser, electron, RN...).

Note that it's not hard to handle SCA in RN envs, we can just use a WebView, which is similar to a web iframe. I've done so before with a custom RN credit card form and this little api client lib: https://github.com/expo/stripe-expo

But it would be best if you supported something yourself and made it easier, eventually PCI SAQ-A

[RWOverdijk]

I know this is quite old by now, but is it worth revisiting this given the fact that react-native-web is a thing? I'm now able to make everything work in my project except stripe (because of expo, ejecting etc).

It would be nice to have this all work the same.

[kopax]

I use expo sdk36 and I don't want to eject. My targets are web ios and android, is there a way to use stripe on those 3 target and have stripe payements ? I am just getting starting and to me, my client just need to have an http client in order to work with stripe. I don't feel that I need https://docs.expo.io/versions/latest/sdk/payments/

[grantgeorge]

+1 for re-opening this

This is the kind of developer-friendly support that I've come to love from Stripe. Your web solution is terrific. It'd be wonderful to have React Native support

[kopax]

For whom it may concerns, I finally ended up integrating the react-native android/ios part using a webview that use the react-native web target for paiement.

[anoopjoshi9895]

For whom it may concerns, I finally ended up integrating the react-native android/ios part using a webview that use the react-native web target for paiement.

@kopax are you rendering a webpage in webview(basically the web integration of stripe) and uses the callback url to check if success or not?

[joaoschaab]

It would be nice to have React Native support

[kopax]

@anoopjoshi9895 I am running a react-native-webview, I use a tool injected in the DOM by this package to trigger event, and an event listener provided by this package to catch them only on non web platform

[youssef-sherif]

Hello, I have a question.
Can I use the useElements and useStripe hooks with react-native?
I am hesitant to use the tipsi library since it is not officially supported.
If not what other options do I have? Building the native components myself and linking them to the react-native app?

[AngeloAnolin]

@anoopjoshi9895 I am running a react-native-webview, I use a tool injected in the DOM by this package to trigger event, and an event listener provided by this package to catch them only on non web platform

Care to share some code example?

[Joshandrews43]

Bump here, this really needs a react-native port for expo without ejecting.

[kopax]

I've heard here stripe being working on am official stripe RN integration.

Not sure if they will force to eject. More information would be welcome.