How to implement Apple Pay in React Native Apps
Tags: reactnative, apple, payment, applepay
Published: 2020-03-27 04:31:24

<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="5ad0" 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="e36e" class="graf graf--p graf-after--figure">In this post, you’ll learn how to implement Apple Pay functionality in React Native apps. We’ll also build the app in device / Emulator and test the full functionality.</p><blockquote name="a278" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/react-native-apple-pay"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">react-native-apple-pay Github repository</em></a></blockquote><h3 name="07bf" class="graf graf--h3 graf-after--blockquote">What is Apple Pay&nbsp;?&nbsp;🍎</h3><p name="9ce7" class="graf graf--p graf-after--h3 is-selected"><strong class="markup--strong markup--p-strong">Apple Pay</strong> is a mobile payment and digital wallet service by Apple Inc. that allows users to make payments in person, in iOS apps, and on the web. It is supported on the iPhone, Apple Watch, iPad, and Mac. It digitizes and can replace a credit or debit card chip and PIN transaction at a contactless-capable point-of-sale terminal. Apple Pay does not require Apple Pay-specific contactless payment terminals; it works with any merchant that accepts contactless payments. It supports authentication via passcode, touchID as well as face recognition.</p><figure tabindex="0" contenteditable="false" name="665d" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 545px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 77.9%;"></div><img class="graf-image" data-image-id="0*NT_eX5cNu04Ch6Nm.jpeg" data-width="1400" data-height="1090" src="https://cdn-images-1.medium.com/max/800/0*NT_eX5cNu04Ch6Nm.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="de96" class="graf graf--p graf-after--figure">This post is related to Apple Pay integration in React Native apps. Just like we integrate Stripe, PayPal etc payment gateways in our apps, we can integrate Apple Pay in the apps as well. Benefits of Apple Pay is</p><ul class="postList"><li name="1154" class="graf graf--li graf-after--p">Quick payment using just the phone</li><li name="23f5" class="graf graf--li graf-after--li">Saving all your cards in the phone, and paying as you like</li><li name="208d" class="graf graf--li graf-after--li">Authentication managed by the phone itself</li><li name="ccc2" class="graf graf--li graf-after--li">Keeping your cards in Apple wallet also allows you to pay cashless on payment terminals</li><li name="96bb" class="graf graf--li graf-after--li">You can attach Stripe, PayPal (Braintree) payment methods also via Apple Pay, using addons</li></ul><h3 name="d7c7" class="graf graf--h3 graf-after--li">What is React-Native</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 more “native” apps than webview 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> webviews, 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 Payment&nbsp;Gateways</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, Stripe, Razorpay, Braintree, in-app purchase etc.</p><p name="7f17" class="graf graf--p graf-after--p">Apple Pay can be integrated in websites as well as mobile apps. In this blog we’ll learn <strong class="markup--strong markup--p-strong">how to integrate Apple Pay in React Native apps.</strong></p><h3 name="a22f" class="graf graf--h3 graf-after--p">Adding a card in Apple&nbsp;Pay</h3><p name="6dcf" class="graf graf--p graf-after--h3">Before you can use Apple Pay in your apps, you need to have a card added in your Apple wallet. For development purpose, to test the demo flow, you don’t need to add a card. But t<strong class="markup--strong markup--p-strong">o test the live payment mode of the app, you will need a card in your app</strong>. The process of this is not programmatic, but just for information purpose, you can add a card following this video</p><figure tabindex="0" contenteditable="false" name="acf0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 360px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="0*sQMugoYrC8YhUAP9.gif" data-width="360" data-height="640" src="https://cdn-images-1.medium.com/max/800/0*sQMugoYrC8YhUAP9.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">How to add a card in Apple&nbsp;wallet</figcaption></figure><p name="d337" class="graf graf--p graf-after--figure">Integrating Apple Pay in React Native apps is simple and straightforward. It uses the package <code class="markup--code markup--p-code">react-native-payments</code> which is popular by usage.</p><h3 name="f30c" class="graf graf--h3 graf-after--p">Structure</h3><p name="50b1" class="graf graf--p graf-after--h3">I will go ahead in step-by-step fashion so you can follow easily.</p><ol class="postList"><li name="37f5" class="graf graf--li graf-after--p">Get Apple Merchant ID and certificate (only required for production app)</li><li name="9cef" class="graf graf--li graf-after--li">Create a basic React Native app and set UI for payments</li><li name="9138" class="graf graf--li graf-after--li">Install &amp; setup Apple Pay payment package</li><li name="dec2" class="graf graf--li graf-after--li">Build the app on iOS</li><li name="1a53" class="graf graf--li graf-after--li">Troubleshooting and cautions</li></ol><p name="b444" class="graf graf--p graf-after--li">Let’s start step-by-step</p><h3 name="90ea" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Get Apple Merchant ID and certificate</h3><p name="88d7" class="graf graf--p graf-after--h3">If you have done some iOS development, you are aware of Apple’s love for certificates. So, for Apple Pay as well, you need to get a <em class="markup--em markup--p-em">Merchant ID</em> and a <em class="markup--em markup--p-em">Payment Processing Certificate</em> from <strong class="markup--strong markup--p-strong">Apple developer account </strong>(you need to have an Apple developer account for this)</p><ol class="postList"><li name="f010" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Merchant ID&#8202;—&#8202;</strong>An identifier you register with Apple that uniquely identifies your business as a merchant, able to accept payments. This ID never expires, and can be used in multiple websites and iOS apps. See <a href="https://help.apple.com/developer-account/#/devb2e62b839?sub=dev103e030bb"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create a merchant identifier</a> for the setup steps.</li></ol><figure tabindex="0" contenteditable="false" name="233d" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.599999999999994%;"></div><img class="graf-image" data-image-id="1*P2v1wPP3hNvqG82gYhKDjA.png" data-width="1386" data-height="798" src="https://cdn-images-1.medium.com/max/800/1*P2v1wPP3hNvqG82gYhKDjA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Go to Identifiers in your Apple Developer account, and add new identifier</figcaption></figure><figure tabindex="0" contenteditable="false" name="04c3" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.599999999999994%;"></div><img class="graf-image" data-image-id="1*vD3t09lmUSxkw1pEkHIPdg.png" data-width="1387" data-height="799" src="https://cdn-images-1.medium.com/max/800/1*vD3t09lmUSxkw1pEkHIPdg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Select type as Merchant&nbsp;IDs</figcaption></figure><figure tabindex="0" contenteditable="false" name="b962" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 211px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.2%;"></div><img class="graf-image" data-image-id="1*mnYPkPZlftmyf2oAF_HpbQ.png" data-width="1388" data-height="419" src="https://cdn-images-1.medium.com/max/800/1*mnYPkPZlftmyf2oAF_HpbQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Provide a description and Merchant ID of your&nbsp;choice.</figcaption></figure><p name="1538" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">2. Payment Processing Certificate&#8202;—&#8202;</strong>A certificate associated with your merchant ID, used to secure transaction data. Apple Pay servers use the certificate’s public key to encrypt payment data. You (or your payment service provider) use the private key to decrypt the data to process payments. See <a href="https://help.apple.com/developer-account/#/devb2e62b839?sub=devf31990e3f"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Create a payment processing certificate</a> for the setup steps.</p><figure tabindex="0" contenteditable="false" name="b830" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.7%;"></div><img class="graf-image" data-image-id="1*CprnhugRpx4jETLB5pX4Cg.png" data-width="1387" data-height="689" src="https://cdn-images-1.medium.com/max/800/1*CprnhugRpx4jETLB5pX4Cg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add new certificate in Apple Developer account</figcaption></figure><figure tabindex="0" contenteditable="false" name="674f" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 326px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.6%;"></div><img class="graf-image" data-image-id="1*lbgOLOkZ0ml23xO8uRnK_Q.png" data-width="1386" data-height="646" src="https://cdn-images-1.medium.com/max/800/1*lbgOLOkZ0ml23xO8uRnK_Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create new certificates for Apple Pay Processing</figcaption></figure><p name="4225" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">3. Merchant identity certificate&#8202;—</strong>&#8202;A Transport Layer Security (TLS) certificate associated with your merchant ID, used to authenticate your sessions with the Apple Pay servers. The merchant identity certificate is <strong class="markup--strong markup--p-strong">only required for Apple Pay on the web</strong>; it isn’t needed for apps. See <a href="https://help.apple.com/developer-account/#/dev1731126fb"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Create a merchant identity certificate</a> for the setup steps.</p><h3 name="02d8" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Create a basic React Native&nbsp;app</h3><p name="8dfa" 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">RNApplePay</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init RNApplePay</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. Change the UI of this front page by changing <code class="markup--code markup--p-code">App.js</code> and the page will look like this</p><figure tabindex="0" contenteditable="false" name="8a0b" 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*mGzw9Wa0xpBvzbRyt9N99A.png" data-width="350" data-height="623" src="https://cdn-images-1.medium.com/max/800/1*mGzw9Wa0xpBvzbRyt9N99A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Homepage for Apple Pay React Native demo&nbsp;app</figcaption></figure><p name="e710" class="graf graf--p graf-after--figure">The UI here is not very complex, but if you still want to use this UI, you can find it in <code class="markup--code markup--p-code">App.js</code> file of the <a href="https://github.com/enappd/react-native-apple-pay"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">repository</a>.</p><h3 name="c8d8" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Install &amp; setup Apple Pay payment&nbsp;package</h3><h4 name="210e" class="graf graf--h4 graf-after--h3">3.1 Install the&nbsp;package</h4><p name="d983" class="graf graf--p graf-after--h4">The package we will use for Apple Pay integration is <code class="markup--code markup--p-code">react-native-payments</code>&nbsp;. This provides functionality of both Apple Pay and Google Pay, but for this blog we’ll keep the discussion to Apple Pay itself.</p><p name="e2d5" class="graf graf--p graf-after--p">Install the package using</p><pre name="729e" class="graf graf--pre graf-after--p">$ yarn add react-native-payments</pre><p name="2c42" class="graf graf--p graf-after--pre">and link the library using (you don’t need to manually link libraries in React Native ≥0.60, but I do it anyway)</p><pre name="faf6" class="graf graf--pre graf-after--p">$ react-native link react-native-payments</pre><p name="e86b" class="graf graf--p graf-after--pre">Follow the next steps carefully, as it can get confusing</p><h4 name="90a6" class="graf graf--h4 graf-after--p">3.2 Assign Apple Pay in your iOS app via Apple Developer account</h4><p name="76d6" class="graf graf--p graf-after--h4">Your app ID should be associated with Apple Pay, only then you will see the entitlement in Xcode when building the app. To enable Apple Pay, go to your Apple developer account and create an identifier with your app’s bundle ID</p><figure tabindex="0" contenteditable="false" name="f4e2" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 379px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.2%;"></div><img class="graf-image" data-image-id="1*cDAlC7mtmrNV6LS0JQ9xOQ.png" data-width="1386" data-height="751" src="https://cdn-images-1.medium.com/max/800/1*cDAlC7mtmrNV6LS0JQ9xOQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a new identifier for your app’s bundle ID e.g. com.enappd.applypay</figcaption></figure><p name="bc6a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>: This bundle ID should be same as what you see in Xcode. Alternatively, you can change this in Xcode when building the app.</p><p name="15b7" class="graf graf--p graf-after--p">Click the created identifier, and enable Apple Pay in the app</p><figure tabindex="0" contenteditable="false" name="8434" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 383px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.800000000000004%;"></div><img class="graf-image" data-image-id="1*81cmqcDQTQnCh78K9FDENQ.png" data-width="1346" data-height="737" src="https://cdn-images-1.medium.com/max/800/1*81cmqcDQTQnCh78K9FDENQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable Apple Pay Payment in the&nbsp;app</figcaption></figure><h4 name="82e7" class="graf graf--h4 graf-after--figure">3.3. Enable Apple Pay in your iOS app via&nbsp;Xcode</h4><p name="3c1a" class="graf graf--p graf-after--h4">We already have a merchant ID and Apple Pay payment certificate from Step 1. To use Apple Pay in app, you need to enable Apple Pay in the app entitlements using Xcode.</p><p name="a7da" class="graf graf--p graf-after--p">Go to your project → Capabilities → Apple Pay, and turn the toggle ON.</p><figure tabindex="0" contenteditable="false" name="f881" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 291px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 41.5%;"></div><img class="graf-image" data-image-id="1*0B4XiNq6_H2F2d-yYHesKQ.png" data-width="1389" data-height="577" src="https://cdn-images-1.medium.com/max/800/1*0B4XiNq6_H2F2d-yYHesKQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable Apple Pay in&nbsp;Xcode</figcaption></figure><p name="f1b8" class="graf graf--p graf-after--figure">If you don’t see the Apple Pay capability in your Xcode <code class="markup--code markup--p-code">capabilities</code> tab, you will need to enable it from your Apple developer account (Step 3.2 above)</p><h4 name="0683" class="graf graf--h4 graf-after--p">3.4 Import the payment library in your&nbsp;<code class="markup--code markup--h4-code">App.js</code></h4><p name="d26e" class="graf graf--p graf-after--h4">Next, we’ll import the payment library in our <code class="markup--code markup--p-code">App.js</code> (or any other page where you are implementing the payments. You can even import it globally).</p><p name="096e" class="graf graf--p graf-after--p">Import using</p><pre name="4078" class="graf graf--pre graf-after--p">const PaymentRequest = require('react-native-payments').PaymentRequest;</pre><p name="7ef3" class="graf graf--p graf-after--pre">Now, we can use the <code class="markup--code markup--p-code">PaymentRequest</code> variable to create payment requests etc.</p><h4 name="03dd" class="graf graf--h4 graf-after--p">3.5 Initializing Payment&nbsp;request</h4><p name="1a7e" class="graf graf--p graf-after--h4">Before creating a payment request, we need to understand the different parts of Payment request as accepted by the <code class="markup--code markup--p-code">react-native-payments</code> package</p><ul class="postList"><li name="70c7" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">displayItems</strong>&#8202;—&#8202;(Array of PKPaymentSummaryItem in swift). Items array is created in a way so that items’ price, delivery price and total price is included in the array in order. Our items array is as follows</li></ul><figure tabindex="0" contenteditable="false" name="4064" class="graf graf--figure graf--iframe graf-after--li 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/bee047a4b1395e17ab4e4bcc7d64f657.js %}</div></div></figure><ul class="postList"><li name="50fd" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">method_data</strong>&#8202;—&#8202;This contains important fields like merchant_id, supportedNetworks (‘visa’, ‘mastercard’, ‘amex’), country code and currency code</li></ul><figure tabindex="0" contenteditable="false" name="eab4" class="graf graf--figure graf--iframe graf-after--li 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/97b3d203b18fef233fbf7b49763fdc8e.js %}</div></div></figure><ul class="postList"><li name="8f30" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">Extra options</strong>&#8202;—&#8202;These define the requirement of shipping address, User name, email and phone number to be filled to complete the order. For our case the options are defined as</li></ul><figure tabindex="0" contenteditable="false" name="f55d" class="graf graf--figure graf--iframe graf-after--li 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/cc257203815603c938cd06b8b4aba9f0.js %}</div></div></figure><p name="7e24" class="graf graf--p graf-after--figure">With these three objects, our Payment request can be created using</p><pre name="fcda" class="graf graf--pre graf-after--p">const paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS, OPTIONS);</pre><h4 name="8259" class="graf graf--h4 graf-after--pre">3.6 Check if payments are available</h4><p name="30fb" class="graf graf--p graf-after--h4">Before creating a payment request, it is ideal to check if the device or app has Apple Pay available. Check this with a simple method like this (<code class="markup--code markup--p-code">paymentRequest</code> variable comes from above step)</p><figure tabindex="0" contenteditable="false" name="faa1" 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/e6569e28577da05e04bffb7fe37c81ec.js %}</div></div></figure><h4 name="f993" class="graf graf--h4 graf-after--figure">3.7 Create a payment&nbsp;request</h4><p name="1491" class="graf graf--p graf-after--h4">Very similar to above, use following method to create a payment request on your button click</p><figure tabindex="0" contenteditable="false" name="a780" 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/2806ee477240a317be3782b89e9fa135.js %}</div></div></figure><p name="7fa6" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">paymentRequest.show</code> is the actual method creating a payment request. Once you get a response from <code class="markup--code markup--p-code">show()</code>&nbsp;, you can process the response for further authorization from your server, or connecting to the payment bank directly. For more details, check the <strong class="markup--strong markup--p-strong">Processing Payments </strong>section of the <a href="https://github.com/naoufal/react-native-payments"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">plugin’s documentation</a></p><p name="fa60" class="graf graf--p graf-after--p">Including all the code above, the <code class="markup--code markup--p-code">App.js</code> will look like this</p><figure tabindex="0" contenteditable="false" name="b6fb" 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/cef039a6b57cdd45db3bd761dcc82949.js %}</div></div></figure><h3 name="3ee1" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Build the app on&nbsp;iOS</h3><p name="ff45" class="graf graf--p graf-after--h3">Let’s run the app on iOS using</p><pre name="4830" class="graf graf--pre graf-after--p">$ react-native run-ios</pre><p name="924e" class="graf graf--p graf-after--pre">Here’s the complete functionality working for me in the simulator</p><figure tabindex="0" contenteditable="false" name="df76" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 638px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 182.29999999999998%;"></div><img class="graf-image" data-image-id="1*QRRoh44q6-Mg92SqdWzeZg.gif" data-width="350" data-height="638" src="https://cdn-images-1.medium.com/max/800/1*QRRoh44q6-Mg92SqdWzeZg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Complete Apple Pay functionality as per our&nbsp;code</figcaption></figure><h4 name="8eaf" class="graf graf--h4 graf-after--figure">For production environment</h4><p name="b271" class="graf graf--p graf-after--h4">It is also important to test Apple Pay in your production environment. Real cards must be used in the production environment. Test cards will not work.</p><p name="4e3f" class="graf graf--p graf-after--p">There are known differences when running Apple Pay on simulator and real device. Make sure you test Apple Pay on real device before going into production.</p><h3 name="b1ed" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;Troubleshooting and&nbsp;cautions</h3><p name="04ac" class="graf graf--p graf-after--h3">The whole process is very sensitive to exact steps to be followed, and any difference in steps or code can break the code. Here are some of the issues I faced during this blog</p><h4 name="37a6" class="graf graf--h4 graf-after--p">5.1 Cannot read property ‘createPaymentRequest’</h4><figure tabindex="0" contenteditable="false" name="429d" class="graf graf--figure graf-after--h4 is-defaultValue"><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*bT9ggzG85Y-L_qFTTQD_Zg.png" data-width="350" data-height="623" src="https://cdn-images-1.medium.com/max/800/1*bT9ggzG85Y-L_qFTTQD_Zg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="d0f7" class="graf graf--p graf-after--figure">This happens when the library is not properly linked to the iOS platform. I found a solution from<a href="https://github.com/naoufal/react-native-payments/issues/166#issuecomment-525264803"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> this forum</a> and added my two cents as well. Basically, there is a <code class="markup--code markup--p-code">s.dependency "React"</code> missing from the <code class="markup--code markup--p-code">react-native-payments</code> <strong class="markup--strong markup--p-strong">PodSpec</strong> file. Once it is added, you need to re-run <code class="markup--code markup--p-code">pod install</code> in the iOS project, and re-run the linking command.</p><h4 name="82d7" class="graf graf--h4 graf-after--p">5.2 Missing contact&nbsp;details</h4><p name="9f43" class="graf graf--p graf-after--h4">This is not really an error, but a requirement for payment completion. If we set <code class="markup--code markup--p-code">requestPayerName</code>&nbsp;, <code class="markup--code markup--p-code">requestPayerPhone</code> etc in the payment request, and there is none set already in the device, then the Apply Pay prompt shows you different errors, asking you to fill the required details</p><figure tabindex="0" contenteditable="false" name="6179" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 607px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 86.7%;"></div><img class="graf-image" data-image-id="1*9WH5_aezOQ8b4eUJ7LFUpg.jpeg" data-width="750" data-height="650" src="https://cdn-images-1.medium.com/max/800/1*9WH5_aezOQ8b4eUJ7LFUpg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Payment process requesting Contact Details, and adding contact details&nbsp;flow</figcaption></figure><h4 name="2a78" class="graf graf--h4 graf-after--figure">5.2 Requesting Shipping&nbsp;Address</h4><p name="c9ba" class="graf graf--p graf-after--h4">Requesting a shipping address is done in three steps.</p><p name="2ffa" class="graf graf--p graf-after--p">First, you’ll need to set <code class="markup--code markup--p-code">requestShipping</code> to <code class="markup--code markup--p-code">true</code> within <code class="markup--code markup--p-code">PaymentOptions</code>.</p><pre name="ab31" class="graf graf--pre graf-after--p">const OPTIONS = {<br>  requestShipping: true<br>};</pre><p name="224a" class="graf graf--p graf-after--pre">Second, you’ll need to include <code class="markup--code markup--p-code">shippingOptions</code> in your Payment Details.</p><pre name="fd98" class="graf graf--pre graf-after--p">const DETAILS = {<br>  ....<br> shippingOptions: [{<br>   id: 'economy',<br>   label: 'Economy Shipping',<br>   amount: { currency: 'USD', value: '0.00' },<br>   detail: 'Arrives in 3-5 days'<br> }],<br>  ....<br>};</pre><p name="7ae5" class="graf graf--p graf-after--pre">Lastly, you’ll need to register event listeners for when a user selects a <code class="markup--code markup--p-code">shippingAddress</code> and/or a <code class="markup--code markup--p-code">shippingOption</code>. In the callback each event, you'll need to provide new <code class="markup--code markup--p-code">PaymentDetails</code> that will update your PaymentRequest.</p><pre name="c380" class="graf graf--pre graf-after--p">paymentRequest.addEventListener('shippingaddresschange', e =&gt; {<br>  const updatedDetails = getUpdatedDetailsForShippingAddress(paymentRequest.shippingAddress;  e.updateWith(updatedDetails);<br>});<br>paymentRequest.addEventListener('shippingoptionchange', e =&gt; {<br>  const updatedDetails = getUpdatedDetailsForShippingOption(paymentRequest.shippingOption);  e.updateWith(updatedDetails);<br>});</pre><p name="da0f" class="graf graf--p graf-after--pre">If a shipping address is not added in the device, the Payment will ask user to add a shipping address</p><figure tabindex="0" contenteditable="false" name="a885" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 404px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.699999999999996%;"></div><img class="graf-image" data-image-id="1*5sdyPX5c-1GHhg_heGowAw.jpeg" data-width="1126" data-height="650" src="https://cdn-images-1.medium.com/max/800/1*5sdyPX5c-1GHhg_heGowAw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Payment process requesting Shipping Address, and adding address&nbsp;flow</figcaption></figure><h3 name="f3f8" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="42e7" class="graf graf--p graf-after--h3">🎉 Congrats, you now know how to implement Apple Pay Payments in your react native apps. We have also tested the functionality in simulator. You can also fix different issues you’ll face during the implementation. For more details about the package, you can always visit the <a href="https://github.com/naoufal/react-native-payments"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">package documentation</a></p><blockquote name="a090" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/react-native-apple-pay"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">react-native-apple-pay Github repository</em></a></blockquote><h3 name="6dba" class="graf graf--h3 graf-after--blockquote">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 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 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 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 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 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 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 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 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 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 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 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 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="fa4f" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>