HOME
|
COMMUNITY
|
BLOG
|
Stripe React Native: the Most Common Questions - Tipsi Migration Guide, Part 5

Stripe React Native: the Most Common Questions - Tipsi Migration Guide, Part 5

In short

The article serves as the first part of The Stripe React Native Migration Guide, aiding developers transitioning from "tipsi-stripe" to "stripe-react-native." It covers crucial aspects of the migration process in five parts, including migration steps, configuration, detailed function migration, avoiding app breakage, and addressing common questions. It highlights the inability to migrate incrementally due to different native SDK versions, and asserts the production readiness and active maintenance of "stripe-react-native" by Stripe itself.

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:

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:

  1. Reading migration guide (if existing)
  2. Writing (or reviewing) end-to-end tests
  3. Actual migration
  4. Building the app - making sure the app is building properly on every supported platform
  5. Proper regression testing
  6. 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.

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.