Stripe Payment In React Native App Using Firebase Cloud Function

Stripe Payments is a payment processing platform. It allows users to transfer money from a customer’s bank account into any business’s account by way of credit card payments, recurring payments used for subscriptions, apple pay, google pay and many other payment methods. Stripe also provides the fraud prevention, technical, and banking infrastructure required to operate on-line payment systems.

How Stripe Payment Works?


  1. Send card details(card number, exp date, cvc, etc) to stripe.
  2. Stripe will send a token in case of valid card details.
  3. Send token, amount, and currency details to your server.
  4. Server will send a token to stripe.
  5. Stripe will send transaction responses to the server.
  6. Server will send a transaction response from stripe to the app.

Create Stripe Developer Account And Get API Keys

Visit to create a Stripe account. Once you do successful registration you will be redirected to Stripe Dashboard. To get your publishable key and secret key you need to click on Developer Tab -> API keys. Make sure to ON the toggle for viewing test data.

Publishable Key is used for connecting tipsi-stripe library to your React Native app. Publishable key generates a token.

Secret key is used in your backend code where your server connects with Stripe’s server for actual payment.

Integrating Stripe In React Native App

We can use the UI provided by tipsi-stripe library. It has options for all kinds of payments like Apple pay, Google Pay etc.

Integrate Tipsi-Stripe Library For Stripe Integration

Install tipsi-stripe package to your React Native app using following command

$ npm install --save tipsi-stripe


$ yarn add tipsi-stripe

For iOS setup your PodFile like this example then run

$ pod install
  • Open your project in Xcode workspace.
  • Drag node_modules/tipsi-stripe/ios/TPSStripe/
To generate token, import library in your app
import stripe from 'tipsi-stripe';
Now initialize the Stripe credentials that you get from Stripe Dashboard.

 publishableKey: 'pk_test_FQvEgzupH60FVi5dE8aVOI2400NgrEbPjw',


Replace this PUBLISHABLE_KEY with your publishable key. To get token we will use the paymentRequestWithCardForm method.

const token = await stripe.paymentRequestWithCardForm({

       // Only iOS support this options

       smsAutofillDisabled: true,

       requiredBillingAddressFields: 'full',

       prefilledInformation: {

         billingAddress: {

           name: 'Sayali Sonawane',

           line1: 'Canary Place',

           line2: '3',

           city: 'Macon',

           state: 'Georgia',

           country: 'Estonia',

           postalCode: '31217',

           email: '',




This method will open the “card details form” for Stripe. Fill the form with details and submit to Stripe to get a token from Stripe. Please note that this step only generates a token, it doesn not complete a payment. To complete it you need to send it to your server and your server will complete the payment request via your server.

Create Firebase Function To Complete Payment

You can use your backend server to complete the payment or you can also use the firebase cloud function. Firebase is a Baas platform, which provides you many services like back-end, database, etc. You can execute the firebase cloud functions using REST calls from your app. This function will interact with Stripe server to complete the payment.

You must do this two steps before integrating Firebase to your React Native App

  1. Create Firebase project
  2. Create Firebase cloud functions
  3. Now install Firebase tools in your app
$ npm install -g firebase-tools

 4. Once you create your project on the Firebase Console, connect it to your development environment (React Native App) using following command

$ firebase init
  • Choose your project
  • Choose functions

5. Once you have connected to the firebase project successfully, you will see a functions folder in your React Native app under your android folder.

6. Create your back-end function in functions/index.js file. This function will accept a request object from your application, send the payment request to Stripe server and return the response to your application.

const functions = require('firebase-functions');

const stripe = require('stripe')('SECRET_KEY');

// Replace this SECRET_KEY with your secret key available on Stripe Dashboard

exports.completePaymentWithStripe = functions.https.onRequest(

   (request, response) => {



           amount: request.body.amount,

           currency: request.body.currency,

           source: request.body.token,


       .then(charge => {



       .catch(error => {





Note that the payment request from your app should contain

  • amount — in number (Note: this number is in cents when you use “usd”. So use 100 in amount if the payment is for $1. Using less than 50 will give an error.)
  • currency — currency code string e.g. “usd”
  • Token —token which we received from Stripe

7. Test Firebase functions locally using following commands

$ firebase serve

This command will start your firebase local server and the url will be displayed in the terminal like bellow,


Where rn-stripe-demo is my Firebase project ID. Now make an API call to this URL from your React Native app.

8. Deploy your Firebase function

Once you successfully test locally, deploy the firebase function to live server using following command

$ firebase deploy --only functions

This command will deploy the function on your live firebase server, which you can make API calls to. Once deployed successfully you will again get new url of the function in the terminal after deployment, like below

Note :

Connect The App To Deployed Live Firebase Server And Complete The Payment

Last step is to make a HTTP call to the Firebase function to complete the payment process using the generated token in step 3.

doPayment = async () => {       fetch('', 


     method: 'POST',

     headers: {

       Accept: 'application/json',

       'Content-Type': 'application/json',


     body: JSON.stringify({

       amount: 100,

       currency: "usd",

       token: this.state.token.tokenId,



     .then((response) => response)

     .then((responseJson) => {



         success: responseJson.status === 'succeeded' ? true : false,

         response: responseJson,



     .catch((error) => {





Stripe payment consists of two parts which is front-end for tokenization and backend for actual payment requests. Here we have used tipsi-stripe package for front-end along with React Native to get card details, send to Stripe and generate a token. For actual payment, we can use any server. Here we have used firebase cloud functions to complete the payment.


Tech Expert
Sayali is a React Native Developer with around 1 year of experience in developing mobile applications. She is familiar with writing blogs for the last 2 years. She is self-motivated, a fast learner, and result oriented. She loves to write blogs on technical issues faced by developers in day to day work and help them through her blogs.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

Get in touch for a detailed discussion.

Hear From Our 100+ Customers

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.


We had very close go live timeline and MindBowser team got us live a month before.

Shaz Khan
CEO, BuyNow WorldWide

They were a very responsive team! Extremely easy to communicate and work with!

Kristen M.
Founder & CEO, TotTech

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

Chacko Thomas
Co-Founder, TEAM8s

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

Dave Dubier
Founder & CEO, MangoMirror

"Mindbowser was very helpful with explaining the development process and started quickly on the project."

Hieu Le
Executive Director of Product Development, Innovation Lab

"The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs."

Alex Gobel
Co-Founder, Vesica

Mindbowser is professional, efficient and thorough. 

MacKenzie R
Consultant at XPRIZE

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

Bennet Gillogly
Co-Founder, Flat Earth

"They're very tech-savvy, yet humble."

Uma Nidmarty
CEO, GS Advisorate, Inc.

"Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier"

Katie Taylor
Founder, Child Life On Call

“As a founder of a budding start up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity."

Radhika Kotwal
Founder of Courtyardly

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

Michael Wright
Chief Executive Officer, SDOH2Health LLC

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

David Cain
CEO, thirty2give