.webp)
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 about the following aspects of the migration process:
- Part 1 - How to migrate from Tipsi Stripe to the Stripe React Native SDK
- 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 (you are here)
Questions about Stripe React Native
Migrating from one payments library to another brings a lot of challenges and questions. We selected and answered the most common questions related to migration. Hopefully, this short guide will make everything more clear.
Should I migrate to stripe-react native?
Yes, with no doubt. <rte-code>Tipsi-stripe<rte-code> is not maintained anymore and the official and supported Stripe library for React Native is <rte-code>stripe-react-native<rte-code>.
Is every tipsi-stripe feature implemented in stripe-react-native?
Most of them are. The only missing functionality is the paymentRequestWithCardForm function that opens the Add Card view to accept a payment. So in stripe-react-native In order to collect card details please use the CardField component or confirmPaymentSheetPayment functionality for a unified Payment UI experience.
More information can be found in the third part of the Tipsi Migration Guide.
Is it possible to migrate incrementally?
Unfortunately, <rte-code>stripe-react-native<rte-code> uses different native SDKs versions. Because of that, it is required to first uninstall <rte-code>tipsi-stripe<rte-code> and then install the new library. This makes it impossible to migrate your code feature by feature.
Can I use stripe-react-native with Expo?
Yes, you can. The library is supported by Expo. The only requirement is to install it using expo CLI. Just like this - expo install @stripe/stripe-react-native. No additional native setup is needed.
It even works well in Expo Snack so if you want to test the library and play with it a little, you can use stripe-react-native-example.
More information you can find in the official Expo guide.
How can I ensure the migration won't break anything?
There is no perfect solution to that but you can follow a few simple steps to make the migration safer. The best approach to do that is:
- Reading migration guide (if existing)
- Writing (or reviewing) end-to-end tests
- Actual migration
- Building the app - making sure the app is building properly on every supported platform
- Proper regression testing
- Setup crash reporting tools
For more details check out the fourth part of the Tipsi Migration Guide.
How to pass card details to payment methods after migration from Tipsi?
In stripe-react-native to make a card payment passing card details is not required. This is the main difference between the new library and <rte-code>tipsi-stripe<rte-code>. Due to the PCI compliance considerations, everything happens natively under the hood. This is both safer and more convenient for developers.
Right now, the only required thing is to render a Card component on the same screen where you have the confirming payment logic.
Can I use a custom Card component with Stripe payments?
This is not supported as it has PCI compliance implications. Please use the CardField component to collect card details. It will pass card details to payments methods automatically. You can find more details in the Stripe's docs.
Is stripe-react-native production ready?
Yes, it is. It is finished and ready for production as it is the recommended Stripe library for payments in React Native.
Is the API of stripe-react-native similar to tipsi-stripe?
There are some differences but nothing that will require you to reimplement your features.
More information about differences can be found third part of the Tipsi Migration Guide.
If you are interested in looking at some examples in form of diff you can find them in this PR. contains exemplary migration for simple payment features (card payment, Apple Pay, Google Pay).
Will the library affect app performance and bundle size?
No, it should not. When used properly it should not affect the app performance or the bundle size.
Although, It affects the security of your application positively. Thanks to better implementation of the PCI compliance.
Is the new library actively maintained?
Yes! stripe-react-native is an official library for React Native maintained by Stripe itself and open-source collaborators.
Summary
We hope that we covered all of the details of migrating from <rte-code>tipsi-stripe<rte-code> to <rte-code>stripe-react-native<rte-code> and you'll find this guide useful. If you haven't read it yet, be sure to check out the previous parts of this guide.
The guide was created by Jakub Klobus, a software developer at Callstack and a Stripe developer community expert for React Native. He’s made thousands of open source code contributions for projects such as React Native paper, stripe-react-native, and Re.Pack.
