REGISTER

How To Migrate From Tipsi Stripe To The Stripe React Native SDK? Migration Guide, Part 1

Jakub Kłobus
2021-11-08

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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 <cyan>stripe-react-native<cyan>

<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.

And, do not forget to read the rest of the articles from this guide:

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

Author:
Jakub Kłobus
Software developer working at Callstack since the beginning. After mastering web, he moved to React Native. Fanboy of ReasonML and functional programming.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.