Stripe Payment In React Native App Using Firebase Cloud Function

$ pod install

• Open your project in Xcode workspace.
• Drag node_modules/tipsi-stripe/ios/TPSStripe/

import stripe from 'tipsi-stripe';

$ npm install -g firebase-tools

$ 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);

     });

 };

$ npm install -g firebase-tools

$ 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);

     });

 };