---
title: "Stripe React Native Migration Function by Function - Tipsi Migration Guide, Part 3"
description: "In the third part of the Tipsi Migration Guide we describe the Stripe React Native migration function by function."
url: https://www.callstack.com/blog/stripe-react-native-migration-function-by-function
updated: 2026-10-24T08:39:37.558Z
---

# Stripe React Native Migration Function by Function - Tipsi Migration Guide, Part 3

In the third part of the Tipsi Migration Guide we describe the Stripe React Native migration function by function.

_By Jakub Kłobus, Software Engineer @ Callstack · Published 2022-02-06 · Category: Open Source_

If you have ever integrated payments with React Native, you may have encountered the popular community library “[tipsi-stripe](https://github.com/tipsi/tipsi-stripe)“. This project has been unmaintained for several years and the[ README](https://github.com/tipsi/tipsi-stripe#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 tipsi-stripe to stripe-react-native.

The guide is divided into five 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](https://www.callstack.com/blog/how-to-migrate-from-tipsi-stripe-to-stripe-react-native-sdk)
- Part 2 -[ How to configure Stripe React Native](https://www.callstack.com/blog/stripe-react-native-library-configuration)
- Part 3 - A detailed description of Stripe React Native migration function by function (you are here)
- Part 4 -[ How not to break your app after migrating from Tipsi Stripe to Stripe React Native](https://www.callstack.com/blog/how-to-not-break-your-app-after-migrating-to-stripe-react-native)
- Part 5 - A collection of[ the most common questions related to Stripe React Native](https://www.callstack.com/blog/stripe-react-native-the-most-common-questions)

## Introduction

This article is part 3 of our ongoing series on migrating from Tipsi-Stripe to stripe-react-native. Make sure to read the previous articles on [understanding stripe react native](https://www.callstack.com/blog/how-to-migrate-from-tipsi-stripe-to-stripe-react-native-sdk) and [configuring the stripe-react-native library.](https://www.callstack.com/blog/stripe-react-native-library-configuration)

Are you migrating your app’s payments logic from tipsi-stripe to stripe-react-native? In this article, we cover how to migrate each payment type and function you might use. As you could see in the previous posts, the initial setup of stripe-react-native is simple and intuitive.  Today, we will focus on each payment function in tipsi-stripe and describe how to migrate it to stripe-react-native.

## Card components

One of the essential features of using Stripe is collecting the card details in order to process a payment. Tipsi-stripe has a PaymentCardTextField component and onParamsChange prop that is used to collect card details. Collected card details have to be stored in a state in order to use them in card payment.

With stripe-react-native there is no need to collect card data manually. The library does that for you. It makes it both easy to use and much more secure. Just render [CardField](https://stripe.dev/stripe-react-native/api-reference/modules.html#CardField) every time you want to use card-related payment.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/256cb938d2f20c594eb6ee80606c7463)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/e519ffbdb23f0f83387cda168a72eb0c)

In the above code examples, the placeholder information is now a single object called placeholder. In addition, basic component styles can be modified using single cardStyle prop instead of multiple ones (cursorColor, placeholderColor, etc.).

Another difference with the CardField component is the set of methods on its ref. Tipsi has blur, focus, isFocused and iOS-only setParams. First two are exactly the same in stripe-react-native. However, in order to know if card input is focused, you should use the onFocus prop and handle this information declaratively instead of calling an imperative isFocused function. Setting params are not available in stripe-react-native but we believe that since this is not supported by both platforms there is no need for that in React Native applications. This decision together with onCardChange prop which sends only the last four digits instead of the whole card number improves the security of the CardField component.

NOTE**:** If your app requires access to the entire card number it is still possible with stripe-react-native. You can set dangerouslyGetFullCardDetails to true in order to have a full card number returned in the onCardChange handler. Keep in mind this is not recommended since your customers' information must be protected at all costs.

## Accepting a payment

With PaymentIntent API there are some significant differences between libraries. The biggest one is that in stripe-react-native for PCI compliance reasons all of the sensitive data is sent to the specific methods under the hood and you don’t need to hand it over on your own. This means that in order to proceed with a Card payment, you have to collect the data using either CardField or CardForm component provided by stripe-react-native library. In this way, the personal data is secure, as it is kept confidential from developers.

### Create a payment method

In both libraries for creating a payment method you can use createPaymentMethod function. If it comes to card payments main difference was described above - instead of passing card details now you just have to set the type param to "Card" and be sure that CardField component is rendered on your screen.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/acc09ae74fb80d1cc1c97cf16715150c)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/f0ee95a8dd90ae1fcabce19863a589ae)

In both libraries provide billing details using the billingDetails field which contains address, email, name, and phone. See the [api reference](https://stripe.dev/stripe-react-native/api-reference/modules.html#createPaymentMethod) for more details.

NOTE: If you are using token to provide card details to createPaymenMethod you can still do this. The only difference is the way of generating it. More details you will find later in this article.

### Confirm payment intent (for manual payment flows)

If your payment requires confirmation, you have to call a specific function in order to launch an activity where the user can authenticate the payment. For manual payment flow, there is an authenticatePaymentIntent method in tipsi-stripe and the equivalent in stripe-react-native is [handleCardAction](https://stripe.dev/stripe-react-native/api-reference/modules.html#handleCardAction).

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/19ab8100aa613708c0b2df8a03b7bf99)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/73ae4597c64fa145fccca4ea6629049d)

In the above example, you can see that clientSecret is now a separate and the first argument of the function. This new implementation, just as in Tipsi, returns a Promise with payment intent details. In Tipsi, you could access there intent id and its status, stripe-react-native returns an error and the whole PaymentIntent object.

NOTE: It is worth mentioning that in error scenarios stripe-react-native always resolves promise and returns the error instead of rejecting it.

### Confirm payment intent (for automatic payment flows)

For automatic confirmation flows, you just need to change the way you use confirmPaymentIntent method. In stripe-react-native function name was changed to confirmPayment but the main difference is that instead of passing client secret and payment details in a single object you need to pass them as two separate function arguments.

As with other payment methods, now there is no need to pass card details manually. You just need to specify the payment type and everything else will be collected automatically.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/6d6374d1ca73304f04176ad0496e3298)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/12e4f3eaecb7e439bc237c5ff89beb91)

See [confirmPayment](https://stripe.dev/stripe-react-native/api-reference/modules.html#confirmPayment) for more details about possible configuration and different payment types.

## Future payments

In tipsi-stripe to set up recurring payments or to create one-time payments with a final amount determined later, there is a confirmSetupIntent method. stripe-react-native has the same [_function_](https://stripe.dev/stripe-react-native/api-reference/modules.html#confirmSetupIntent) but with a slightly changed API. The differences here are almost the same as with confirmPaymentIntent function. Now you pass client secret as a first function argument and there is no need for card details.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/29989af57d3fd3307d5db8553b037cff)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/11d9f74bbcd00634e32bba1ddc1ca493)

## Create a token

Stripe provides a way to convert information collected by card components into a single-use [token](https://stripe.com/docs/api#tokens) that you safely pass to your server to use in an API call.

Tipsi has a createTokenWithCard function for that. It differs from the new [createToken](https://stripe.dev/stripe-react-native/api-reference/modules.html#createToken) only in the way how to pass card data and the fact that it doesn't require to manually pass card details.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/f0e4f0b4c14e2e52714cef443a8887a7)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/3c17c0b0485b13de100f8d1d055f0a46)

Remember that as with other card related functions, to use createToken function you have to render CardField component .

NOTE: tipsi-stripe provides also a way to create a bank account token using createTokenWithBankAccount function. This is not yet supported by stripe-react-native but should be ready the upcoming release. This functionality will be added as a part of createToken function.

## ApplePay

### deviceSupportsNativePay

Before displaying Apple Pay as a payment option in your app, first determine if the user’s device supports Apple Pay and that they have a card added to their wallet. In order to this stripe-react-native provides isApplePaySupported boolean value from [useApplePay](https://stripe.dev/stripe-react-native/api-reference/modules.html#useApplePay) hook.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/e32eeb2c998aff6bcd2e6364f3ced157)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/7ed68bf5c0f46256dd0a44e248267990)

NOTE: If your application doesn't use functional components, as an alternative you can import isApplePaySupported method directly from the library.

### paymentRequestWithNativePay

Requesting payment in Tipsi can be done with paymentRequestWithNativePay function. It takes a list of items and an options object with shipping details and other properties. After migration, you should use [presentApplePay](https://stripe.dev/stripe-react-native/api-reference/modules.html#presentApplePay) function and pass all needed details as a single configuration object. Please refer to the [documentation](https://stripe.dev/stripe-react-native/api-reference/modules.html#presentApplePay) for all available properties.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/d6fb23862b923a6aa58151e71fb579b1)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/8fe841c9ecc13d6682191e917f0da7c5)

Remember that the last item in items array needs to reflect the total value.

### completeNativePayRequest

To process payment in Tipsi after requesting it, it is required to call completeNativePayRequest function. After migration there is a [confirmApplePayPayment](https://stripe.dev/stripe-react-native/api-reference/modules.html#confirmApplePayPayment) function for that. This and every other ApplePay related function you can get from useApplePay hook or import directly from the library.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/857c5bc42afdce00c9854acd33b4584c)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/0f91080378b2343dca48a03eea300783)

## GooglePay

As against to tipsi-stripe, stripe-react-native provides a separate API for GooglePay. In Tipsi, you could use the same functions as for ApplePay (see above) but with stripe-react-native there is a need to (first) initialize GooglePay and then (second) present it using  presentGooglePay function.

Before (tipsi-stripe):

[GitHub Gist](https://gist.github.com/callstack-bot/a971c49a99ae6c810e7a7f7fb38d6796)

After (stripe-react-native):

[GitHub Gist](https://gist.github.com/callstack-bot/631c2ebb7ecdb28187a34f417a74292a)

After migrating, you can also create a payment method instead of confirming the payment. For that [createGooglePayPaymentMethod](https://stripe.dev/stripe-react-native/api-reference/modules.html#createGooglePayPaymentMethod) can be used. Please refer to the [documentation](https://github.com/stripe/stripe-react-native/blob/master/docs/GooglePay.md) for more details.

## CardForm

In Tipsi there is a [paymentRequestWithCardForm](https://tipsi.github.io/tipsi-stripe/docs/paymentrequestwithcardform.html)  function that opens the Add Card view to accept a payment. Unfortunately, this is not supported in stripe-react-native. In order to collect card details please use CardField component or  [confirmPaymentSheetPayment](https://stripe.dev/stripe-react-native/api-reference/modules.html#confirmPaymentSheetPayment)  functionality for a unify Payment UI experience.

## Example

So looks like migration is not that scary anymore and it is quite doable, right? Show your work - as they say. Fortunately, I have an example and a proof for you.

There's an [example PR](https://github.com/callstack-internal/tipsi-stripe-migration/pull/1/files) with a Tipsi to stripe-react-native migration. This is a migration of a project with:

- Card payment
- Apple Pay usage
- Google Pay usage

![tipsi-stripe to stripe-react-native igration](https://www.callstack.com/assets/tipsi-stripe%252520to%252520stripe-react-native%252520migration.png)

## Summary

These migration steps described above show these two libraries are noticeable and require you to refactor your app’s code. But remember, after you start the migration process you will see that the differences are not too big. You should be able to migrate almost everything quickly.

In the upcoming articles, we will be covering the testing part and answering most common questions. Thanks for reading and stay tuned!

**Resources:**

- [SDK reference](https://stripe.dev/stripe-react-native/api-reference/)
- [Repository](https://github.com/stripe/stripe-react-native)
- [Official documentation](https://stripe.com/docs/payments/accept-a-payment?platform=react-native)
- Callstack React Native articles

You can find all services offered by our [React Native development company](https://www.callstack.com/react-native-development-company) in the Services section.