Stripe React Native Configuration - Tipsi Migration Guide, Part 2

In short

In this second part of The Stripe React Native Migration Guide, the focus is on configuring the Stripe React Native library after migrating from "tipsi-stripe." It outlines the steps for adding the new library, removing "tipsi-stripe" dependencies, and setting up Stripe. The article highlights the use of the "StripeProvider" component for initialization and recommends replacing payment methods like "createPaymentMethod" with their equivalents in "stripe-react-native." This sets the groundwork for subsequent migration steps in the series.

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.

Adding a new library

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:

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.

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.