Need help?

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 stripe.com 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

or

$ 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.
stripe.setOptions({

 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: 'sayali.sonawane@mindbowser.com',

         },

       },

     });

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) => {

       stripe.charges

       .create({

           amount: request.body.amount,

           currency: request.body.currency,

           source: request.body.token,

       })

       .then(charge => {

           response.send(charge);

       })

       .catch(error => {

           console.log(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,

http://localhost:5000/rn-stripe-demo/us-central1/completePaymentWithStripe

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

https://console.firebase.google.com/project/rn-stripe-demo/overview

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('https://console.firebase.google.com/project/rn-stripe-demo/overview', 

    {

     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) => {

       console.log("Success",responseJson);

       this.setState({

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

         response: responseJson,

       });

     })

     .catch((error) => {

       console.log("Failed",error);

     });

 };

Wrapping Up

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.

Subscribe To Our Newsletter

Sayali Sonawane

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.

Leave a Reply

Your email address will not be published. Required fields are marked *