REGISTER

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

Jakub Kłobus
2022-02-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 about the following aspects of the migration process:

Introduction

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

You can follow him on Twitter at @souhepend

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.