CODEWITHSUNDEEP
react-nativeexpostripe-paymentsprogressive-web-apps
Hugues
Hugues

Reputation: 31

Use stripe on the web version of a react native app

I'm not a dev, and I'm kind of desperate. I'm having an app built on symphony/react-native. And now we are implementing the stripe payment on the app, my devs seem kind of cornered.

The reason I chose react native is to have one codebase for my mobile and web app. I'm trying to use stripe to process the payment on my app, but it seems that stripe-react-native doesn't run on web platform.
Does anyone think of a way to make stripe work on web without having to build a separate react app ?

I was thinking about using a platform condition to either run stripe from the react native module or from the stripe.js script, but I'm told that it's not possible.
If someone has any idea we could try, it would be very helpful.

Thanks

Upvotes: 2

Views: 1638

Answers (2)

Nabil Freeman
Nabil Freeman

Reputation: 397

If you are using react-native-web, you can override incompatible Node modules in various ways.

One method of launching/building RN Web is to use react-app-rewired, and inside config-overrides.js you can declare a path to your own version of react-native-stripe.

You would need to implement this yourself, write an equivalent implementation for each method, and somehow load the web SDK for Stripe.

It's very doable if you are experienced and a similar process to mocking modules in Jest.

Here is an example:

// config-overrides.js used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.resolve.alias['@stripe/stripe-react-native'] = path.resolve(
      'web/react-native-stripe',
    );
  },
};

(simplified version of the example here https://github.com/webpack/webpack/issues/4039#issuecomment-686158264)

However, if you are not forced to adapt an existing codebase to also support react-native-web, I would strongly recommend starting a new project using Expo which will support Web, iOS and Android right from the beginning. It is now possible to write polyfill modules for incompatible libraries within Expo.

Upvotes: 2

orakaro
orakaro

Reputation: 1971

Unfortunately, it's the case. You would need a separate web codebase and a separate mobile codebase. ReactNative is mobile, and for web, you have various choices, like regular web development.

You can choose ReactNative for mobile and ReactJS for web, though, and they will be similar on some level. But they are still different platforms.

Upvotes: -1

Related Questions