Stripe payment integration in React Native apps using Firebase
Tags: reactnative, stripe, payment, firebase
Published: 2020-03-28 11:48:07

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="9b2f" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="de33" class="graf graf--p graf-after--figure">In this post, you’ll learn how to integrate Stripe Payment Gateway in React Native apps. We’ll implement this functionality using a Firebase cloud function, acting as our server side logic.</p><p name="8de3" class="graf graf--p graf-after--p is-selected">Stripe is one of the most widely used and fastest growing payment gateway you can integrate in your website or app. It supports a wide variety of payment options, including Apple Pay and Google Pay, and is quickly spreading across the globe. Stripe can take care of almost all your payment requirements in apps and website. Stripe’s ease of integration has made it a popular developer choice over PayPal and other payment gateways. A good comparison between Stripe and PayPal can be studied <a href="https://www.cloudways.com/blog/stripe-vs-paypal/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a> (spoiler&#8202;—&#8202;Stripe wins)</p><h3 name="77fd" class="graf graf--h3 graf-after--p">What is React-Native&nbsp;?</h3><p name="7b18" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">TLDR;</strong>&#8202;—&#8202;React Native (RN) creates cross-platform apps, more “native” than web-view apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.</p><p name="e21e" class="graf graf--p graf-after--p">React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="5626" class="graf graf--p graf-after--p">React Native applications render using real mobile UI components, <em class="markup--em markup--p-em">not</em> web-views, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> etc are already using it in production for user-facing applications.</p><h3 name="c5df" class="graf graf--h3 graf-after--p">React Native and&nbsp;Stripe</h3><p name="1dba" class="graf graf--p graf-after--h3">React Native can create a wide variety of apps, and hence a wide variety of payment gateways can be implemented in React Native apps. The popular ones are PayPal, <strong class="markup--strong markup--p-strong">Stripe</strong>, RazorPay, Braintree, in-app purchase etc.</p><p name="cdce" class="graf graf--p graf-after--p">There are two options for front-end implementation of Stripe in React Native apps</p><ol class="postList"><li name="7c89" class="graf graf--li graf-after--p">Use the iOS / Android SDKs provided by Stripe</li><li name="95ce" class="graf graf--li graf-after--li">Use a 3rd party library for React Native: <code class="markup--code markup--li-code"><a href="https://tipsi.github.io"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">tipsi-stripe</a></code></li></ol><p name="70ae" class="graf graf--p graf-after--li">There are pros and cons to each path, mainly revolving around the fact that the <a href="https://tipsi.github.io/tipsi-stripe/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native library from Tipsi</a> has not been “publicly” approved by Stripe. If you want maximum compliance in production environment, go for Stripe’s fully vetted SDKs. In the rest of this tutorial I will use the <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0"><a href="https://tipsi.github.io"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">tipsi-stripe</a> </code>library, as it works perfectly and is very easy to implement.</p><h3 name="1f32" class="graf graf--h3 graf-after--p">How does Stripe work&nbsp;?</h3><p name="04e6" class="graf graf--p graf-after--h3">To simplify the understanding, let us understand the complete flow pictorially</p><figure tabindex="0" contenteditable="false" name="2697" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 263px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37.5%;"></div><img class="graf-image" data-image-id="1*T2zDo6nvDhko2_iwnTNYyA.jpeg" data-width="1200" data-height="450" alt="Stripe Payment integration flow" src="https://cdn-images-1.medium.com/max/800/1*T2zDo6nvDhko2_iwnTNYyA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stripe Payment integration flow</figcaption></figure><p name="f454" class="graf graf--p graf-after--figure">Essentially, in front-end (App side) we initiate a payment. This requests for a token from Stripe server. Once this token is received on front-end, you need to send it to your server (back-end). Only your server can communicate to Stripe server for actual payment. Once actual payment is done, Stripe server sends success message to your server, and your server can send it to your app. Pretty easy, right&nbsp;! 😅</p><h3 name="d628" class="graf graf--h3 graf-after--p">Steps to implement</h3><p name="9f9e" class="graf graf--p graf-after--h3">I will break it down into steps to keep the post organized</p><p name="d9ff" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1</strong>&#8202;—&#8202;Stripe Developer account and API keys</p><p name="5c6b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2</strong>&#8202;—&#8202;Create a basic React Native app for Stripe integration</p><p name="8f76" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3</strong>— Integrate Stripe library <strong class="markup--strong markup--p-strong">tipsi-stripe</strong> for token generation</p><p name="4fd6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4</strong>— Create Firebase function (or any back-end function to accept API calls) to accept tokens from app, and make payment requests to Stripe server</p><p name="2ac3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5</strong>— Connect app to our Firebase server. Complete Stripe payment requests from Firebase server.</p><p name="e128" class="graf graf--p graf-after--p">Let’s start step-by-step</p><blockquote name="48b3" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/RNStripe"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">RNStripe Github repository</a></blockquote><h3 name="5173" class="graf graf--h3 graf-after--blockquote">Step 1&#8202;—&#8202;Stripe Developer Account</h3><p name="286d" class="graf graf--p graf-after--h3">Visit <a href="http://stripe.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Stripe.com</a> and create an account. Stripe payment services are currently available in limited countries as <a href="https://stripe.com/global"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">shown on this page</a>.</p><p name="dd88" class="graf graf--p graf-after--p">Once you are inside Stripe Dashboard, look for the <strong class="markup--strong markup--p-strong">Developer</strong> Tab -&gt; API keys. Make sure you do all development tasks with <strong class="markup--strong markup--p-strong">Test Data</strong></p><figure tabindex="0" contenteditable="false" name="68a0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 297px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 42.4%;"></div><img class="graf-image" data-image-id="1*K1Qdrnt3GoLaqVoYa3pTqw.png" data-width="1387" data-height="588" alt="Stripe Developer account&#8202;—&#8202;API keys" src="https://cdn-images-1.medium.com/max/800/1*K1Qdrnt3GoLaqVoYa3pTqw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stripe Developer account&#8202;—&#8202;API&nbsp;keys</figcaption></figure><p name="9cad" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Publishable key </strong>is what you use for connecting the Strive Native SDK or tipsi-stripe in front-end&#8202;—&#8202;to generate token. <strong class="markup--strong markup--p-strong">Secret key</strong> is used in the back-end, where your server connects with Stripe’s server for actual payment.</p><p name="2be9" class="graf graf--p graf-after--p">That’s all you need from Stripe account, for now. You can toggle to <strong class="markup--strong markup--p-strong">Live keys </strong>and use them instead once you have tested the process.</p><p name="af20" class="graf graf--p graf-after--p">Let’s look into the React Native integration of Stripe now.</p><h3 name="9226" class="graf graf--h3 graf-after--p">Step 2— Create a basic React Native&nbsp;app</h3><p name="2497" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">RNStripe</code> with your own app name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init <code class="markup--code markup--pre-code">RNStripe</code></pre><p name="c53e" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. Let’s run the app in iOS using</p><pre name="4f57" class="graf graf--pre graf-after--p">$ react-native run-ios</pre><p name="6729" class="graf graf--p graf-after--pre">You’ll see the default start screen on device / simulator. For sample purpose, I will be using the <a href="https://github.com/tipsi/tipsi-stripe/tree/master/example"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">UI provided</a> by <strong class="markup--strong markup--p-strong">tipsi-stripe </strong>library. It has options for all kinds of payments&#8202;—&#8202;including Apple Pay, Google Pay etc. I’ll be using the <strong class="markup--strong markup--p-strong">default card payment form</strong> for this post’s purpose</p><figure tabindex="0" contenteditable="false" name="d558" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 429px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.199999999999996%;"></div><img class="graf-image" data-image-id="1*xjToGE-8PUTKYeUJCBuLOQ.jpeg" data-width="903" data-height="553" alt="tipsi-stripe UI example layouts" src="https://cdn-images-1.medium.com/max/800/1*xjToGE-8PUTKYeUJCBuLOQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">tipsi-stripe UI example&nbsp;layouts</figcaption></figure><p name="99f7" class="graf graf--p graf-after--figure">There are three major files used for this example</p><ul class="postList"><li name="3fff" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code">index.js</code>&#8202;—&#8202;Parent file of the app</li><li name="ef81" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">Root.js</code>— Drawer layout parent file</li><li name="d3d5" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">CardFormScreen.js</code>&#8202;—&#8202;File containing the logic for Card payment via Stripe</li></ul><p name="fa75" class="graf graf--p graf-after--li">You can find these files in the <a href="https://github.com/enappd/RNStripe"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repo</a> attached to this post.</p><h3 name="3776" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 3</strong>&#8202;—&#8202;Integrate Stripe library <strong class="markup--strong markup--h3-strong">tipsi-stripe</strong> for token generation</h3><p name="a266" class="graf graf--p graf-after--h3">To include Stripe functionality in your React Native app, you need to install <strong class="markup--strong markup--p-strong">tipsi-stripe</strong> package. Install the package with following commands</p><pre name="fd37" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">npm install --save tipsi-stripe</code></pre><h4 name="38ac" class="graf graf--h4 graf-after--pre">Setup pods</h4><p name="d1ed" class="graf graf--p graf-after--h4">To integrate appropriate pods for iOS app, setup your <code class="markup--code markup--p-code">Podfile</code> like the following then run <code class="markup--code markup--p-code">pod install</code>. My <code class="markup--code markup--p-code">Podfile</code> looks like this</p><figure tabindex="0" contenteditable="false" name="2dac" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/10a39032cab27a2386280771399c2a8d.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Podfile to setup tipsi-stripe in React Native</figcaption></figure><h4 name="1ad8" class="graf graf--h4 graf-after--figure">Setup XCode&nbsp;project</h4><ol class="postList"><li name="bc3f" class="graf graf--li graf-after--h4">Open your project in Xcode workspace.</li><li name="3f06" class="graf graf--li graf-after--li">Drag the following folder into your project:</li></ol><ul class="postList"><li name="bf36" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">node_modules/tipsi-stripe/ios/TPSStripe/</code></li></ul><figure tabindex="0" contenteditable="false" name="9d4b" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 347px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.6%;"></div><img class="graf-image" data-image-id="1*z7yAV97VcyFhn3ztrB1DAA.png" data-width="801" data-height="397" alt="Tipsi-stripe node_modules dragged into Xcode project" src="https://cdn-images-1.medium.com/max/800/1*z7yAV97VcyFhn3ztrB1DAA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Tipsi-stripe node_modules dragged into Xcode&nbsp;project</figcaption></figure><h4 name="f347" class="graf graf--h4 graf-after--figure">Link the&nbsp;package</h4><p name="7ae9" class="graf graf--p graf-after--h4">Run <code class="markup--code markup--p-code">react-native link tipsi-stripe</code> to link the package against your Xcode project and so that all CocoaPods dependencies are installed.</p><blockquote name="39be" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Note:</em></strong><em class="markup--em markup--blockquote-em"> Linking on Windows system currently isn’t working, sadly. Check </em><a href="https://tipsi.github.io/tipsi-stripe/docs/linking.html"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">here</em></a><em class="markup--em markup--blockquote-em"> for updates</em></blockquote><h4 name="cd1e" class="graf graf--h4 graf-after--blockquote">Generate Token on&nbsp;App</h4><p name="a0d8" class="graf graf--p graf-after--h4">To generate token, import the library in your page using</p><pre name="e422" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">import</strong> stripe <strong class="markup--strong markup--pre-strong">from</strong> 'tipsi-stripe'</code></pre><p name="ff48" class="graf graf--p graf-after--pre">And initialize it with your Stripe credentials that you can get from <a href="https://dashboard.stripe.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">dashboard</a>.</p><pre name="5abd" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">stripe.setOptions({<br>  publishableKey: 'PUBLISHABLE_KEY'<br>})</code></pre><p name="93e7" class="graf graf--p graf-after--pre">Remember, <code class="markup--code markup--p-code">PUBLISHABLE_KEY</code> only helps in generating token. Replace this with your own <code class="markup--code markup--p-code">PUBLISHABLE_KEY</code></p><p name="e943" class="graf graf--p graf-after--p">We will use the <code class="markup--code markup--p-code">paymentRequestWithCardForm</code> method of the library to get the Token (Check <code class="markup--code markup--p-code">CardFormScreen.js</code> file for full details)</p><figure tabindex="0" contenteditable="false" name="a788" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/7f0b4f1ffbc8663b9989fca93085e7ab.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Method to generate Token using Stripe</figcaption></figure><p name="36f2" class="graf graf--p graf-after--figure">The method will open the “Default card details form” for Stripe. Enter your card details here (or use a <a href="https://stripe.com/docs/testing#cards"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">sample cards from Stripe</a>), and enter your address and submit.</p><p name="de41" class="graf graf--p graf-after--p">Once you submit the details, you will receive a token from Stripe. I have the token displayed in the UI like this, for confirmation</p><figure tabindex="0" contenteditable="false" name="31f7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 623px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*LfF0IGqf72R3IpSAyMG-PQ.png" data-width="350" data-height="623" alt="Received token from Stripe&#8202;—&#8202;Sample React Native app" src="https://cdn-images-1.medium.com/max/800/1*LfF0IGqf72R3IpSAyMG-PQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Received token from Stripe&#8202;—&#8202;Sample React Native&nbsp;app</figcaption></figure><h3 name="1a20" class="graf graf--h3 graf-after--figure"><strong class="markup--strong markup--h3-strong">Step 4</strong>&#8202;—&#8202;Create Firebase function to complete&nbsp;Payments</h3><blockquote name="3094" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong">Please note that steps mentioned above only help you to create a payment token from Stripe server. It DOES NOT complete a payment. To complete the payment, you can use the generated token, send it to your server, and complete the payment request via your server</strong></blockquote><p name="5f36" class="graf graf--p graf-after--blockquote">To complete the payment via server, let us create a firebase cloud function. Firebase is a BaaS platform, which provides you ready-made back-end, database and a ton of other services&#8202;—&#8202;all free of cost and ready to integrate in an app.</p><p name="0879" class="graf graf--p graf-after--p">Firebase Cloud Functions are a way to write custom server functions. You can execute these functions using REST calls from your React Native app. This Firebase Cloud Function can interact with Stripe server to complete your payment.</p><h4 name="7638" class="graf graf--h4 graf-after--p">Setup Firebase Cloud&nbsp;Function</h4><blockquote name="0772" class="graf graf--blockquote graf-after--h4"><strong class="markup--strong markup--blockquote-strong">Assumption</strong>&#8202;—&#8202;You already know how to create a Firebase Project, and deploy Firebase function on it. You can follow my blogs on <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">how to create a Firebase project</a> (first few steps) and <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">how to create Firebase Cloud functions</a>.</blockquote><p name="d677" class="graf graf--p graf-after--blockquote">To interact with Firebase functions in development, you need <code class="markup--code markup--p-code">Firebase-tools</code> in your system. Install firebase tools with</p><pre name="6f2b" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">npm install -g firebase-tools</code></pre><h4 name="50d0" class="graf graf--h4 graf-after--pre">Connect Firebase to your Firebase&nbsp;project</h4><p name="082c" class="graf graf--p graf-after--h4">You can create a Firebase Project in Firebase console webpage, and invoke it in development environment (your system)</p><p name="f853" class="graf graf--p graf-after--p">Once you have your project ready, connect it to your dev environment using</p><pre name="5263" class="graf graf--pre graf-after--p">$ firebase init</pre><p name="1bea" class="graf graf--p graf-after--pre">then choosing the project, and choosing <code class="markup--code markup--p-code">functions</code> option from the choices.</p><figure tabindex="0" contenteditable="false" name="b505" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 98px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 13.900000000000002%;"></div><img class="graf-image" data-image-id="1*gZrz3bLkZYWOIb57DBIrjA.png" data-width="1040" data-height="145" src="https://cdn-images-1.medium.com/max/800/1*gZrz3bLkZYWOIb57DBIrjA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Choose Functions options in `Firebase init`</figcaption></figure><p name="6b3d" class="graf graf--p graf-after--figure">With <strong class="markup--strong markup--p-strong">Firebase Functions, </strong>you can essentially right back-end (node.js) functions in same environment, test locally with <code class="markup--code markup--p-code">firebase serve</code> and can then deploy these to your Firebase project, so it can be connected to your app / website.</p><p name="72a6" class="graf graf--p graf-after--p">Once you have Firebase project connected, you will see a <code class="markup--code markup--p-code">functions</code> folder in your project root, as shown below</p><figure tabindex="0" contenteditable="false" name="e631" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 273px; max-height: 557px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 204%;"></div><img class="graf-image" data-image-id="1*lGnb6UvNt4ODWmga1oBj2A.png" data-width="273" data-height="557" src="https://cdn-images-1.medium.com/max/800/1*lGnb6UvNt4ODWmga1oBj2A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase functions folder in project&nbsp;root</figcaption></figure><h4 name="7dd6" class="graf graf--h4 graf-after--figure">Create a firebase function to make payment&nbsp;requests</h4><p name="d15c" class="graf graf--p graf-after--h4">After this, you can create your back-end function in <code class="markup--code markup--p-code">functions/index.js</code> file. This function will accept a request object from your app / website, send the payment request to Stripe server, and return the response to your app / website again.</p><figure tabindex="0" contenteditable="false" name="670c" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/96ee09f65570936721cc6f3fe6953b1b.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Firebase function to complete payment using Stripe</figcaption></figure><p name="528d" class="graf graf--p graf-after--figure">Remember to replace <code class="markup--code markup--p-code">YOUR_SECRET_KEY</code> with your own.</p><p name="b539" class="graf graf--p graf-after--p">Notice that the payment request from your app should contain</p><ul class="postList"><li name="d4c5" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">amount</strong>&#8202;—&#8202;in number (<strong class="markup--strong markup--li-strong">Notice: </strong>this number is in cents when you use “usd”. So use 100 if the payment is for $1. Using less than 50 will give an error.)</li><li name="3bd1" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">currency</strong>&#8202;—&#8202;currency code string e.g. “usd”</li><li name="e8bc" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">token</strong>&#8202;—&#8202;the one we received in Step 1 and Step 2</li></ul><p name="258d" class="graf graf--p graf-after--li">This data should be sent in an object in POST API request, shown in next step.</p><h4 name="2ca3" class="graf graf--h4 graf-after--p">Test Firebase functions locally</h4><p name="3c66" class="graf graf--p graf-after--h4">To test whether your Firebase function is correctly written, run the function locally by running command</p><pre name="adee" class="graf graf--pre graf-after--p">$ firebase serve</pre><p name="ce9c" class="graf graf--p graf-after--pre">This will start your firebase local server, and the url will be displayed in the terminal&nbsp;, something like</p><pre name="2be4" class="graf graf--pre graf-after--p"><a href="http://localhost:5000/shoppr-c97a7/us-central1/payWithStripe"  class="markup--anchor markup--pre-anchor" target="_blank">http://localhost:5000/shoppr-c97a7/us-central1/payWithStripe</a></pre><p name="8f41" class="graf graf--p graf-after--pre">(where <code class="markup--code markup--p-code">shoppr-c97a7</code> is my Firebase project ID)</p><p name="8c5f" class="graf graf--p graf-after--p">Now, you can make an API call to this URL using your React Native app. We’ll use the simple <code class="markup--code markup--p-code">fetch</code> API for this, and show “Payment Success” in the app UI itself&#8202;—&#8202;in next step</p><h4 name="b034" class="graf graf--h4 graf-after--p">Deploy Firebase Function to live&nbsp;site</h4><p name="5b26" class="graf graf--p graf-after--h4">Once your local testing is successful, deploy the firebase functions to live server using</p><pre name="3d8a" class="graf graf--pre graf-after--p">$ firebase deploy --only functions</pre><p name="e2b7" class="graf graf--p graf-after--pre">This will deploy the functions on your live Firebase server, which you can make API calls to. The url of the function will again be shown in the terminal after deployment, something like</p><pre name="3354" class="graf graf--pre graf-after--p"><a href="https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe"  class="markup--anchor markup--pre-anchor" rel="noopener" target="_blank">https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe</a></pre><p name="5cae" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Note</strong></p><ol class="postList"><li name="f1ff" class="graf graf--li graf-after--p">Make sure you change your API call url to the new function URL</li><li name="5c8c" class="graf graf--li graf-after--li">Firebase allows external API calls only in paid accounts. If you are using free account, it won’t allow an external API call. You can, however, test the functionality locally using <code class="markup--code markup--li-code">firebase serve</code></li></ol><h3 name="0836" class="graf graf--h3 graf-after--li">Step 5— Connect the app to live Firebase server and complete payment&nbsp;requests</h3><p name="f0ca" class="graf graf--p graf-after--h3">In the same <code class="markup--code markup--p-code">CardFormScreen.js</code> file, we’ll make a HTTP call to Firebase function to complete the payment using the generated token. HTTP call can be simply made using <code class="markup--code markup--p-code">fetch</code> like this</p><figure tabindex="0" contenteditable="false" name="644e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/6fcee24ddd8958a92e87833ff7165e7c.js %}</div></div></figure><p name="8813" class="graf graf--p graf-after--figure">A successful response from the server will look like following. It’s a long response, but you get the idea that everything you need is in there, right&nbsp;?</p><figure tabindex="0" contenteditable="false" name="2872" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/6ce59b62486a9262ef536c27cfe22734.js %}</div></div></figure><p name="46a8" class="graf graf--p graf-after--figure">Overall, the process looks like following on my iOS simulator</p><figure tabindex="0" contenteditable="false" name="c8cc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 378px; max-height: 692px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 183.1%;"></div><img class="graf-image" data-image-id="1*cvIDBalCM6q60mo1YR-IEg.gif" data-width="378" data-height="692" src="https://cdn-images-1.medium.com/max/800/1*cvIDBalCM6q60mo1YR-IEg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stripe Payment example for React Native&nbsp;app</figcaption></figure><h3 name="e869" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="0aa2" class="graf graf--p graf-after--h3">In this blog we learnt how to implement Stripe Payment in a React Native app. I know it is a long post with a lot to understand. Let me repeat the gist of the post —</p><p name="cc32" class="graf graf--p graf-after--p">Stripe payment consists of two parts&#8202;—&#8202;front-end (tokenization) and back-end (actual payment request). The Stripe payment integration will follow this pictorial flow</p><figure tabindex="0" contenteditable="false" name="985c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 263px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37.5%;"></div><img class="graf-image" data-image-id="1*T2zDo6nvDhko2_iwnTNYyA.jpeg" data-width="1200" data-height="450" src="https://cdn-images-1.medium.com/max/800/1*T2zDo6nvDhko2_iwnTNYyA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Stripe Ionic 4 integration flow</figcaption></figure><ul class="postList"><li name="cf38" class="graf graf--li graf-after--figure">Front-end part can be done using React Native app with <strong class="markup--strong markup--li-strong">tipsi-stripe</strong> package (or Stripe native SDK)</li><li name="2eec" class="graf graf--li graf-after--li">Back-end part can be done using any server you have. For example purpose, we used a Firebase server.</li></ul><blockquote name="2e66" class="graf graf--blockquote graf-after--li">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/RNStripe"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">RNStripe Github repository.</a></blockquote><p name="8331" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Stay tuned for more React Native blogs&nbsp;!</strong></p><h3 name="d8b8" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Apple Pay in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4216" class="graf graf--p graf--empty graf-after--figure graf--trailing" ><br></p></div></div></section></div></article></main>