How to Migrate From Tipsi Stripe to the Stripe React Native SDK - Migration Guide, Part 1

About the Stripe React Native migration guide

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’ve prepared The Stripe React Native Migration Guide to walk you through the core concepts and integration steps.

This article is the first part of the guide in which we go through the process of migrating from <rte-code>tipsi-stripe<rte-code> to <rte-code>stripe-react-native<rte-code>.

The guide is divided by 5 parts in which you'll learn bout the following aspects of the migration process:

• Part 1 - How to migrate from Tipsi Stripe to the Stripe React Native SDK (you are here)
• Part 2 - How to configure Stripe React Native
• Part 3 - A detailed description of Stripe React Native migration function by function
• Part 4 - How not to break your app after migrating from Tipsi Stripe to Stripe React Native
• Part 5 - A collection of the most common questions related to Stripe React Native

Now, let's dive into the migration!

Understanding stripe-react-native

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

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 – <rte-code>tipsi-stripe<rte-code>. stripe-react-native is an official replacement for it. It does not only replace <rte-code>tipsi-stripe<rte-code> 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 <rte-code>confirmPaymentIntent<rte-code> 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, <rte-code>stripe-react-native<rte-code> differs from <rte-code>tipsi-stripe<rte-code> in terms of API. The most noticeable difference is how setting up Stripe works. In addition to the <rte-code>configure<rte-code> function, <rte-code>stripe-react-native<rte-code> provides a new <rte-code>Provider<rte-code> 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 <rte-code>useConfirmPayment<rte-code> hook which, apart from the <rte-code>confirmPayment<rte-code> 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 <rte-code>tipsi-stripe<rte-code>, 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 <rte-code>stripe-react-native<rte-code>?” Let’s walk through a few good reasons.

Ongoing upkeep

Remember that the <rte-code>tipsi-stripe<rte-code> 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, <rte-code>stripe-react-native<rte-code> 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. <rte-code>stripe-react-native<rte-code> helps with that by providing a friendly and modern API made based on a <rte-code>Provider<rte-code> 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 <rte-code>tipsi-stripe<rte-code> was supported and available as an <rte-code>expo-payments-stripe package<rte-code>. Release number 43 removed this support in favor of the <rte-code>stripe-react-native<rte-code>. Now, to use Stripe payments in Expo, you have to use <rte-code>@stripe/stripe-react-native package<rte-code>.

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 <rte-code>stripe-react-native<rte-code> and believe me it is not that hard to do that. Be sure to check out the next article in this series where we cover the basics of the migrating process from one library to another.

Our React Native development company offers other services, make sure to check them out!