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

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

In short

In the first part of The Stripe React Native Migration Guide, the focus is on understanding the transition from "tipsi-stripe" to "stripe-react-native." Highlighting differences, the article emphasizes the new features in "stripe-react-native," such as pre-built payment UI and simplified security. Reasons to migrate include ongoing upkeep, Expo support, and built-in Typescript support. The move ensures active maintenance, Expo compatibility, and TypeScript benefits, making the migration worthwhile.

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:

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.

Dev-guide-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 – <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!

FAQ

No items found.
React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.