REGISTER

Stripe React Native Configuration - Tipsi Migration Guide, Part 2

Jakub Kłobus
2021-12-06

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:
Part 1 - How to migrate from Tipsi Stripe to the Stripe React Native SDK
Part 2 - How to configure Stripe React Native (you are here)
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

Introduction

<rte-code>Stripe-react-native<rte-code> is a new and official React Native library for Stripe payments. In this article, we will discuss how to start the migration process from the previous library - <rte-code>tipsi-stripe<rte-code>. In the previous article, we covered the main differences between these two libraries and showed why it is good to migrate from Tipsi to the stripe-react-native.

Migrating from Tipsi Part 2 stripe react native Configuration graph

Adding <cyan>new library<cyan>

The very first step is to remove the currently existing <rte-code>tipsi-stripe<rte-code> library. Unfortunately, there is no way to use both libraries at the same time because they use different versions of native libraries under the hood.

Start with opening your terminal and running the following:

For yarn users:

A second step is to add a new dependency to your project:

For <rte-code>yarn<rte-code> users:

<p-bg-col>IMPORTANT: Please be sure to first remove all tipsi-stripe dependencies from your project. tipsi-stripe uses older versions of stripe-android and stripe-ios which aren't compatible with stripe-react-native. After those two steps, in order to make a proper native setup, just run pod install in your ios/ directory for iOS or trigger a new build for Android.<p-bg-col>

Stripe configuration

<rte-code>Stripe-react-native<rte-code> provides two different ways of initializing the Stripe library. One of them is the <rte-code>initStripe<rte-code> function that you can simply import and use in the root component in <rte-code>useEffect<rte-code> hook. The second one is more elegant and allows you to just use the <rte-code>StripeProvider<rte-code> component and wrap your root component with it. We recommend using the second approach.

Below you can find an example of how to replace the <rte-code>stripe.setOptions()<rte-code> method from <rte-code>Tipsi<rte-code> with the <rte-code>StripeProvider<rte-code> component.

Before (tipsi-stripe):

After (stripe-react-native):


What was once under the <rte-code>publishableKey<rte-code> field in Tipsi <rte-code>options<rte-code> object is now a <rte-code>publishableKey<rte-code> prop of the <rte-code>StripeProvider<rte-code> component. For a <rte-code>merchantId<rte-code> field, there is a merchantIdentifier prop. If you need to first get the <rte-code>publishableKey<rte-code> asynchronously, it is totally possible. You can easily replace <rte-code>StripeProvider's<rte-code> props after its first render. So, fetching the <rte-code>publishableKey<rte-code> in <rte-code>useEffect<rte-code> and storing it in state to change the prop of the provider component is totally fine.

The only bigger difference is the <rte-code>androidPayMode<rte-code> field. Migrating it is not that trivial like just changing the configuration object field into a component prop. Since this is only connected with Google Pay, we decided to move it to a different place. You can find it in Google Pay initialization instead of in the main Stripe init. The field you will have to use is <rte-code>testEnv<rte-code>.

After (stripe-react-native):

You probably noticed that it is a boolean value here and in Tipsi it was a string with <rte-code>test<rte-code> or <rte-code>production<rte-code> values. In <rte-code>stripe-react-native<rte-code> it should be true when in Tipsi it was <rte-code>test<rte-code>. For <rte-code>production<rte-code> in Tipsi you should set <rte-code>false<rte-code> in the current library.

Summary

Now you should be able to start using <rte-code>stripe-react-native<rte-code> library in your project. Unfortunately, the work is not done yet. The next step will be to replace your current payment methods like <rte-code>createPaymentMethod<rte-code> or <rte-code>authenticatePaymentIntent<rte-code> with its equivalents. We will cover all of those functions in the upcoming blog post in this series. Stay tuned!

Read more: If you would like to read more about the stripe-react-native library, check out the official docs, repository, and SDK reference.

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.