REGISTER

How To Not Break Your App After Migrating From Tipsi Stripe To Stripe React Native? Migration Guide, Part 4

Jakub Kłobus
2022-02-07

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

As we learned in the previous posts, migrating from <rte-code>tipsi-stripe<rte-code> to <rte-code>stripe-react-native<rte-code> is fairly straightforward. But any time you make large-scale changes to your app, there is always the fear that you may have forgotten a parameter, used a new method incorrectly, or mishandled an error. Any of these mistakes could cause a regression in your app, so let’s see how all of these potential problems can be mitigated.

Best practices for API upgrades

When refactoring code, most of us tend to roughly follow some core steps in order to make sure we aren’t introducing new bugs or regressions into our code. This set of steps might look like:

  1. Understand the purpose and function of the legacy code
  2. Write unit tests
  3. Refactor code
  4. Regression test

There is a similar checklist we must follow for library upgrades, or when migrating from one library to another. However, there are some new steps introduced specifically for React Native apps

  1. Read any migration documentation or. guides
  2. Write or review end-to-end tests
  3. Migrate libraries
  4. Build the app on every supported platform
  5. Regression tests
  6. Setup crash reporting tools

Reading migration guide

Understanding the differences and the reasons behind why you are doing all this work to migrate libraries is a crucial point this process. If you’ve already read through our Stripe migration guide, then you can mark this point as “checked”!

End-to-end tests

Writing tests for your application is always a great way of making sure your code works as expected. But when it comes to code refactoring or a library migration it gives you even more advantages - specifically the possibility to test the code "before" and code "after" in exactly the same way. This is a perfect tool to make sure that even if the implementation has changed, the way your code works(and what your users will experience) is still the same.

You might be thinking that unit tests provide enough coverage, but unfortunately, if native modules come into play and our code is about long payment pipelines, unit tests are not enough. We need to test the whole integration and make sure that the app communicates properly with Stripe. End-to-end testing is the way to go here, so you can easily start a mocked server, build the app (on different platforms), run it and check most of the payment scenarios that exist in your app.

<p-bg-col>Remember that to make sure the migration won’t break anything you should create e2e tests before the whole migration process.<p-bg-col>

Actual migration

When you’re actually modifying your code, remember that it’s best to work in batches. Test after each atomic step, and do not wait to build your app until all the code changes are done.

App building

To avoid having to correct a long list of build errors, it’s best to build your app each step of the way. This means ensuring you can build on all platforms before you start your migration, check-in and build throughout the migration process, and finally build and run the app at the end after all source code modification is complete.

After the first setup even before migrating the functionalities, it is good to run the app and check if it is not crashing.

Proper regression testing

After every big change like this regression testing is almost required. Investing in it could save you from a lot of potential issues in production in the future. Remember to test both success and failure scenarios because the error handling might differ a lot between different libraries. It differs also between <rte-code>tipsi<rte-code> and <rte-code>stripe-react-native<rte-code>.

Crash reporting

If you don’t already have production crash reporting set up for your app, now is the time to do it. This can help in both identifying and tracking issues, and whether or not they are fixed. There are plenty of tools that give you insight into crashes and errors, here are some of the most popular ones for React Native apps:

Summary

Migrating to a new library, especially when it deals with something as important as payments, can be an overwhelming task. But by following these best practices, you’ll make the migration itself more pain-free, and ensure a better experience for your users

Remember that even if you won’t be able to follow all of them, doing a few and just being careful should make you covered.

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.