If you have ever integrated payments with React Native, you may have encountered the popular community library “tipsi-stripe“. This project has been unmaintained for several years and the README now suggests migrating to the official Stripe React Native project.

To better support developers looking to migrate from “tipsi-stripe” to stripe-react-native, we’re writing up a series of guides to walk through the core concepts and integration steps.

Understanding stripe-react-native

stripe-react-native is a React Native library used to process Stripe payments on mobile devices. It allows you to build delightful payment experiences in your React Native Android and iOS apps.

How to migrate from tipsi to the stripe-react-native SDK

The library utilizes the native Stripe SDKs for Android and iOS under the hood. Thanks to this architecture, it contains most of the native features that Stripe provides for both platforms.

If you are reading this, you probably have already used a library that does the same – tipsi-stripe. stripe-react-native is an official replacement for it. It does not only replace tipsi-stripe but also adds new features and improvements.

Differences between stripe-react-native and tipsi-stripe

The main difference between these libraries is the list of new features and possibilities added to the new library:

  • Pre-built payments UI. Now you can use in React Native pre-built payment UI implemented completely in native by Stripe SDKs.
  • Simplified security.
  • Many payment types are supported by confirmPaymentIntent API. The list contains almost all supported payment types by Stripe: Ideal, Oxxo, P24, Alipay, Giropay, Sepa, EPS, Soft, GrabPay, FPX, AfterPay, Bancontact, AuBecs, and more.

In addition to feature updates, stripe-react-native differs from tipsi-stripe in terms of API. The most noticeable difference is how setting up Stripe works. In addition to the configure function, stripe-react-native provides a new Provider component that should be used at the root of your application.

Another important difference is the way you can access Stripe functionality. In the new library, instead of just importing stripe object and calling all methods on it, you can use one of the three different ways:

  • Dedicated hooks. For some payment functionalities, smart hooks were created. For instance, you can use the useConfirmPayment hook which, apart from the confirmPayment method, also provides a loading state so you don’t need to handle it manually.
  • A Hook that returns the whole stripe object. On this object, exactly like with tipsi-stripe, you can call different Stripe methods.
  • Named exports from the library. Each supported payment function can be imported directly from the library.

The list of differences is long. But no worries, we will try to cover all of them in the upcoming blog post with a proper migration guide. For now, you can look at the documentation that covers most of the differences.

Why migrate?

Now you are probably wondering “why should I migrate since I don’t need any of the new features provided by stripe-react-native?” Let’s walk through a few good reasons.

Ongoing upkeep

Remember that the tipsi-stripe library is no longer actively maintained. Even if it can somehow function on older versions of React Native, it will continue to break as it’s now defunct. On the contrary, stripe-react-native has full support from both Stripe’s engineering team and the React Native community which means fast fixes, new features, and stability in the future.

The fact that the library is being maintained is very important but, as developers, we should also remember that our own code should be easy to maintain in the future. stripe-react-native helps with that by providing a friendly and modern API made based on a Provider component to configure Stripe and a bunch of hooks for making and configuring payments easily.

Expo support

If you are not convinced yet let me tell you about the expo. Up until expo 43, the tipsi-stripe was supported and available as an expo-payments-stripe package. Release number 43 removed this support in favor of the stripe-react-native. Now, to use Stripe payments in Expo, you have to use @stripe/stripe-react-native package.

Typescript support

Last but not least – the argument that should convince you that migrating is a good idea is built-in Typescript support. stripe-react-native was created with types in mind and is written in typescript which means that using it in TS project will help you a lot by providing proper types.

Summary

There are plenty of reasons behind migrating to stripe-react-native and believe me it is not that hard to do that. Stay tuned for the next article in this series where we will cover the basics of the migrating process from one library to another.