How to integrate Apple Pay in Ionic 4 apps
Tags: ionic, payments, apple, template
Published: 2019-09-20 08:07:45

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full" ><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="55c7" 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="0800" class="graf graf--p graf-after--figure 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="f0ca" class="graf graf--figure is-defaultValue graf-after--p"><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="1*Mv3NNT7dHIrazn0_pz0f3Q.jpeg" data-width="1477" data-height="1150" src="https://cdn-images-1.medium.com/max/800/1*Mv3NNT7dHIrazn0_pz0f3Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="da53" class="graf graf--p graf-after--figure">This post is related to Apple Pay integration in Ionic 4 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="ce3d" class="graf graf--li graf-after--p">Quick payment using just the phone</li><li name="a178" class="graf graf--li graf-after--li">Saving all your cards in the phone, and paying as you like</li><li name="f05d" class="graf graf--li graf-after--li">Authentication managed by the phone itself</li><li name="ee9a" class="graf graf--li graf-after--li">Keeping your cards in Apple wallet also allows you to pay cashless on payment terminals.</li></ul><h3 name="2ac0" class="graf graf--h3 graf-after--li">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="de54" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="f8fe" class="graf graf--h3 graf-after--p">Ionic 4 and Payment&nbsp;Gateways</h3><p name="b85f" class="graf graf--p graf-after--h3">Ionic 4 can create a wide variety of apps, and hence a wide variety of payment gateways can be implemented in Ionic 4 apps. The popular ones are PayPal, Stripe, Razorpay, Braintree, in-app purchase etc. For more details on payment gateways, you can read my overview blog on <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment Gateway Solutions in Ionic 4</a> or detailed blogs on <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">PayPal</a>&nbsp;, <a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Stripe</a> and <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Razorpay</a>.</p><p name="7a41" 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 Ionic 4 apps.</strong></p><figure tabindex="0" contenteditable="false" name="9061" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 280px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 40%;"></div><img class="graf-image" data-image-id="1*8S6l-HnelbgHvLam4CdlDA.jpeg" data-width="800" data-height="320" src="https://cdn-images-1.medium.com/max/800/1*8S6l-HnelbgHvLam4CdlDA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 and Apple Pay make a great&nbsp;team</figcaption></figure><h3 name="c73c" class="graf graf--h3 graf-after--figure">Adding a card in Apple&nbsp;Pay</h3><p name="75a6" 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 to test the live payment mode of the app, you will need a card in your app. 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="a634" 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="1*qC1YsqOiFnVOoc-n8J3V2w.gif" data-width="360" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*qC1YsqOiFnVOoc-n8J3V2w.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="cdce" class="graf graf--p graf-after--figure">Integrating Apple Pay in Ionic 4 apps is very simple and straightforward. It makes use of <a href="https://ionicframework.com/docs/native/apple-pay"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic native Apple pay plugin</strong></a>, and it works in iOS apps only.</p><p name="1af3" 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/ionic4-applepay"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic4-applepay Github repository.</a></blockquote><h3 name="9f9e" class="graf graf--h3 graf-after--blockquote">Prerequisites</h3><ul class="postList"><li name="7a7d" class="graf graf--li graf-after--h3">Create an Ionic 4 app for Apple Payintegration</li><li name="7ca8" class="graf graf--li graf-after--li">Apple Merchant ID and certificate (required for publishing app)</li></ul><p name="2497" class="graf graf--p graf-after--li">Creating a basic Ionic 4 app is very easy. Assuming you have all basic requirements installed in your system, run</p><pre name="edac" class="graf graf--pre graf-after--p">$ ionic start MyApp blank</pre><p name="2fb6" class="graf graf--p graf-after--pre">This creates your app with title<code class="markup--code markup--p-code">MyApp</code> and blank template.</p><blockquote name="166d" class="graf graf--blockquote graf-after--p">For more details on how to create a basic Ionic 4 app, refer to my blog <a href="https://medium.com/enappd/how-to-create-an-ionic-4-app-for-beginners-e181e116190a"  class="markup--anchor markup--blockquote-anchor"    target="_blank">How to create an Ionic 4 app</a></blockquote><p name="5853" class="graf graf--p graf-after--blockquote">With minor modifications, my homepage looks like this.</p><figure tabindex="0" contenteditable="false" name="5bbc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><img class="graf-image" data-image-id="1*F2W-6WbzIkIfUY2qvQa5eQ.jpeg" data-width="600" data-height="400" src="https://cdn-images-1.medium.com/max/800/1*F2W-6WbzIkIfUY2qvQa5eQ.jpeg"><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 Ionic 4 demo&nbsp;app</figcaption></figure><p name="3cd4" class="graf graf--p graf-after--figure">The whole cart-like view is not really necessary for Apple Pay integration, but I have shown it here just for a better understanding of the things. One might want to show this data on their cart page for users to understand clearly (in a better UI of course 😜 )</p><p name="cf5c" class="graf graf--p graf-after--p">The file structure looks something like this, just for an idea</p><figure tabindex="0" contenteditable="false" name="b3aa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 329px; max-height: 520px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 158.1%;"></div><img class="graf-image" data-image-id="1*FS3De7TTjgk7_Sc2eQBfeQ.png" data-width="329" data-height="520" src="https://cdn-images-1.medium.com/max/800/1*FS3De7TTjgk7_Sc2eQBfeQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">File structure</figcaption></figure><p name="cf0e" class="graf graf--p graf-after--figure">The full HTML code can be found in the <code class="markup--code markup--p-code">home.page.html</code> file in the <a href="https://github.com/enappd/ionic4-applepay"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">repository</a>.</p><h4 name="8c20" class="graf graf--h4 graf-after--p">Apple Pay Merchant ID and Certificate</h4><p name="286d" class="graf graf--p graf-after--h4">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><ul class="postList"><li name="579d" 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></ul><figure tabindex="0" contenteditable="false" name="240b" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 652px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 93.2%;"></div><img class="graf-image" data-image-id="1*Iet2JGKphKxgFswnPo18FA.png" data-width="1060" data-height="988" src="https://cdn-images-1.medium.com/max/800/1*Iet2JGKphKxgFswnPo18FA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Get a merchant ID from Apple developer account</figcaption></figure><ul class="postList"><li name="b863" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">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--li-anchor" rel="noopener"    target="_blank">Create a payment processing certificate</a> for the setup steps.</li></ul><figure tabindex="0" contenteditable="false" name="fd8e" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 367px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52.400000000000006%;"></div><img class="graf-image" data-image-id="1*xsgMVmru2e5SstH5QPknwA.png" data-width="1114" data-height="584" src="https://cdn-images-1.medium.com/max/800/1*xsgMVmru2e5SstH5QPknwA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Get a Payment processing certificate from Apple developer account</figcaption></figure><h3 name="a88d" class="graf graf--h3 graf-after--figure">Integrate Apple Pay plugin in Ionic 4&nbsp;App</h3><p name="d03e" class="graf graf--p graf-after--h3">To include Apple Pay functionality in your Ionic 4 app, you need to install Apple Pay plugin. Install the plugin with following commands</p><pre name="f768" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-applepay</pre><pre name="3b35" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/apple-pay</pre><p name="13ee" class="graf graf--p graf-after--pre">After installation completes, import Apple Pay in your <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="b76e" class="graf graf--pre graf-after--p">import { ApplePay } from '@ionic-native/apple-pay/ngx';</pre><p name="a292" class="graf graf--p graf-after--pre">and include it in the <code class="markup--code markup--p-code">providers</code> list</p><figure tabindex="0" contenteditable="false" name="1e43" 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.7%;"></div><img class="graf-image" data-image-id="1*LvpZzOpV2Jj6yTNG0fHtQA.png" data-width="983" data-height="538" src="https://cdn-images-1.medium.com/max/800/1*LvpZzOpV2Jj6yTNG0fHtQA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import ApplePay in app.module.ts</figcaption></figure><p name="37d4" class="graf graf--p graf-after--figure">Similarly, import Apple Pay in your <code class="markup--code markup--p-code">home.page.ts</code> and define it in constructor</p><pre name="b310" class="graf graf--pre graf-after--p">constructor(private applePay: ApplePay) { }</pre><h4 name="5fee" class="graf graf--h4 graf-after--pre">Methods available in Apple Pay&nbsp;Plugin</h4><p name="5c0a" class="graf graf--p graf-after--h4">Apple Pay plugin is not a complete package for everything that Apple Pay can actually do. The plugin is limited in its ability, but can easily complete your basic payment flow in the app. The methods available are</p><ul class="postList"><li name="72ff" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">canMakePayments&#8202;—&#8202;</strong>Check whether the device is capable of making payments with Apple Pay</li><li name="2c14" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">makePaymentRequest&#8202;—&#8202;</strong>Create a payment request with appropriate <em class="markup--em markup--li-em">Order</em></li><li name="0f27" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">completeLastTransaction&#8202;—&#8202;</strong>Mark a payment request complete once a ‘success’ or ‘failure’ is returned from the respective payment bank / card agency.</li><li name="6fdf" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">startListeningForShippingContactSelection&#8202;—&#8202;</strong>This does <em class="markup--em markup--li-em">not</em> return a promise, but it fires the success callback upon shipping contact selection.</li><li name="f240" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">updateItemsAndShippingMethods&#8202;—&#8202;</strong>Update Items and/or shipping methods when user changes a Shipping method / contact</li><li name="3c47" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">stopListeningForShippingContactSelection&#8202;—&#8202;</strong>You can opt to NOT listen to shipping method / contact changes</li></ul><p name="8590" class="graf graf--p graf-after--li">Details for listening to Shipping contact changes are mentioned in the final section at the end of the post.</p><h4 name="ffd7" class="graf graf--h4 graf-after--p">1. Applepay.canMakePayments</h4><p name="d309" class="graf graf--p graf-after--h4">This method is useful to check if the device supports Apple Pay, or Apple Pay is properly setup in the device. For sample purpose, we will call this method on a button click, but ideally you should call it in background, and appropriately show the user an alert to setup Apple Pay on device.</p><figure tabindex="0" contenteditable="false" name="220c" class="graf graf--figure graf--iframe is-defaultValue 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/9c4babcc9a1c7faa31e5743b99bf7806.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="0f2b" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 702px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200.59999999999997%;"></div><img class="graf-image" data-image-id="1*I4jRWl87h-SQUkMLR_LJEw.gif" data-width="350" data-height="702" src="https://cdn-images-1.medium.com/max/800/1*I4jRWl87h-SQUkMLR_LJEw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Device can make payments, yay&nbsp;!</figcaption></figure><h4 name="c55f" class="graf graf--h4 graf-after--figure">2. makePaymentRequest</h4><p name="987f" class="graf graf--p graf-after--h4">Now the actual payment request&nbsp;!</p><p name="52ac" class="graf graf--p graf-after--p">But before that, let us understand how an <strong class="markup--strong markup--p-strong">Order</strong> is created in Apple Pay.</p><p name="5c12" class="graf graf--p graf-after--p">An Order consists of items, price, shipping methods etc. in Apple Pay. The following screenshot summarizes the various parts of an Apply Pay order</p><figure tabindex="0" contenteditable="false" name="872f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 212px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.3%;"></div><img class="graf-image" data-image-id="1*lPOQ0ae5XYa4B_TRcj7nxg.png" data-width="715" data-height="217" src="https://cdn-images-1.medium.com/max/800/1*lPOQ0ae5XYa4B_TRcj7nxg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Constituents of an ApplePay&nbsp;Order</figcaption></figure><p name="1fad" class="graf graf--p graf-after--figure">Let us explore the Order components one by one</p><ul class="postList"><li name="769a" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">items&#8202;—&#8202;</strong>(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="c173" class="graf graf--figure graf--iframe is-defaultValue graf-after--li"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/9c4babcc9a1c7faa31e5743b99bf7806.js %}</div></div></figure><ul class="postList"><li name="0738" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">shippingMethods&#8202;—&#8202;</strong>Is an array of various Shipping methods available with the merchant. A user can change Shipping method while making payment. You need to implement <code class="markup--code markup--li-code">startListeningForShippingContactSelection</code> and <code class="markup--code markup--li-code">updateItemsAndShippingMethods</code> to update these changes in the order.</li></ul><p name="f108" class="graf graf--p graf-after--li">Our sample ShippingMethods array looks like following</p><figure tabindex="0" contenteditable="false" name="0e16" class="graf graf--figure graf--iframe is-defaultValue 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/5f422776e0e8c433d8251f54e871f468.js %}</div></div></figure><p name="8a57" class="graf graf--p graf-after--figure">Notice, that we have mentioned the first Shipping method in our <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">items</strong></code><strong class="markup--strong markup--p-strong"> </strong>array as well</p><ul class="postList"><li name="507a" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">supportedNetworks&#8202;—&#8202;</strong>currently only Visa, MasterCard, American Express and Discover are accepted as config options. For the ionic plugin, these are denoted by <code class="markup--code markup--li-code">visa</code>&nbsp;, <code class="markup--code markup--li-code">masterCard</code>&nbsp;, <code class="markup--code markup--li-code">amex</code> and <code class="markup--code markup--li-code">discover</code> respectively.</li><li name="d697" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">merchantCapabilities&#8202;—&#8202;</strong>current possible values are<strong class="markup--strong markup--li-strong"> </strong><code class="markup--code markup--li-code">3ds</code>&nbsp;, <code class="markup--code markup--li-code">debit</code>&nbsp;, <code class="markup--code markup--li-code">credit</code> and <code class="markup--code markup--li-code">emv</code></li><li name="9561" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">merchantIdentifier&#8202;—&#8202;</strong>This is the merchant ID you create in Apple developer account. It is the unique identifier to identify the merchant. For demo purpose, we will use <code class="markup--code markup--li-code">merchant.apple.test</code></li><li name="ad6d" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">currencyCode&#8202;—&#8202;</strong>3 digit code for currency. We are using <code class="markup--code markup--li-code">GBP</code></li><li name="f5af" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">countryCode</strong>&#8202;—&#8202;2 digit country code. We are using <code class="markup--code markup--li-code">GB</code></li><li name="5018" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">billingAddressRequirement</strong>&#8202;—&#8202;The necessary information required for Billing Address. The options are <code class="markup--code markup--li-code">name</code>&nbsp;, <code class="markup--code markup--li-code">email</code>&nbsp;, <code class="markup--code markup--li-code">phone</code> and <code class="markup--code markup--li-code">none</code>&nbsp;. For demo purpose, we are using <code class="markup--code markup--li-code">[‘name’, ‘email’, ‘phone’]</code> but we won’t be required to set it up, as it is a test run. But including this information in the <em class="markup--em markup--li-em">Order</em> is mandatory or the order will fail / app will crash</li><li name="f79e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">shippingAddressRequirement&#8202;—&#8202;</strong>The necessary information required for Shipping Address. The options are <code class="markup--code markup--li-code">name</code>&nbsp;, <code class="markup--code markup--li-code">email</code>&nbsp;, <code class="markup--code markup--li-code">phone</code> and <code class="markup--code markup--li-code">none</code>&nbsp;. For demo purpose, we are using <code class="markup--code markup--li-code">none</code>. Again, including this information in the <em class="markup--em markup--li-em">Order</em> is mandatory or the order will fail / app will crash</li><li name="dd8c" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">shippingType&#8202;—&#8202;</strong>Can be one of <code class="markup--code markup--li-code">shipping</code>&nbsp;,<code class="markup--code markup--li-code">delivery</code>&nbsp;,<code class="markup--code markup--li-code">store</code> and<code class="markup--code markup--li-code">service</code></li></ul><p name="3f98" class="graf graf--p graf-after--li">⭐️⭐️⭐️⭐️ IMPORTANT⭐️⭐️⭐️⭐️</p><p name="8788" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Including all the parts of an Order when calling </strong><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">makePaymentRequest</strong></code><strong class="markup--strong markup--p-strong"> is mandatory. Any part missed can cause a failed payment or app crash.</strong></p><h4 name="9c07" class="graf graf--h4 graf-after--p">completeLastTransaction</h4><p name="3c94" class="graf graf--p graf-after--h4">After the payment request is validated, you receive a token. You can pass this token to your payment provider (bank) and wait to receive a <code class="markup--code markup--p-code">success</code> or other status from the other side. Once the <code class="markup--code markup--p-code">response</code> arrives, you can complete your transaction with the appropriate string in the function,</p><pre name="657f" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">ApplePay.completeLastTransaction('success');</code></pre><p name="7949" class="graf graf--p graf-after--pre">You can dismiss or invalidate the Apple Pay sheet by calling <code class="markup--code markup--p-code">completeLastTransaction</code> with a status string which can be <code class="markup--code markup--p-code">success</code>, <code class="markup--code markup--p-code">failure</code>, <code class="markup--code markup--p-code">invalid-billing-address</code>, <code class="markup--code markup--p-code">invalid-shipping-address</code>, <code class="markup--code markup--p-code">invalid-shipping-contact</code>, <code class="markup--code markup--p-code">require-pin</code>, <code class="markup--code markup--p-code">incorrect-pin</code>, <code class="markup--code markup--p-code">locked-pin</code>.</p><p name="5755" class="graf graf--p graf-after--p">To sum up all the points, the <code class="markup--code markup--p-code">home.page.ts</code> file will look like following once you are done implementing the above steps.</p><figure tabindex="0" contenteditable="false" name="2108" 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/7e630ebb9dbfd4b700d2f78641bbc5a8.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">home.page.ts for ApplePay sample app</figcaption></figure><h4 name="57b6" class="graf graf--h4 graf-after--figure">Modifying Node&nbsp;Module</h4><p name="98b7" class="graf graf--p graf-after--h4">The Apple Pay Native mode module is not up to date with latest changes in iOS 12 (at the time of writing this post). So we will have to make some additions in the node module file. (sorry, no other way to do it 😓 )</p><p name="0b7f" class="graf graf--p graf-after--p">Careful with these steps, as you can spoil the plugin as well 😅. This is the file we are editing. You can also jump on this by (Ctrl+click)ing on any Apple Pay function in your ts files.</p><figure tabindex="0" contenteditable="false" name="f3f0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 334px; max-height: 371px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 111.1%;"></div><img class="graf-image" data-image-id="1*Rp0Mr-8Tvgr15nYcIIcViA.png" data-width="334" data-height="371" src="https://cdn-images-1.medium.com/max/800/1*Rp0Mr-8Tvgr15nYcIIcViA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Editing Apply Pay node module&nbsp;file</figcaption></figure><ol class="postList"><li name="a2f4" class="graf graf--li graf-after--figure">The plugin’s node module is missing required fields <code class="markup--code markup--li-code">merchantCapabilities</code> and <code class="markup--code markup--li-code">supportedNetworks</code> in the <em class="markup--em markup--li-em">Order. </em>We will add these in the definition. Add following lines on the top of the file (if they don’t exist)</li></ol><pre name="09ba" class="graf graf--pre graf-after--li">export declare type IMerchantCapabilities = '3ds' | 'credit' | 'debit' | 'emv';</pre><pre name="3288" class="graf graf--pre graf-after--pre">export declare type ISupportedNetworks = 'visa' | 'amex' | 'discover' | 'masterCard';</pre><p name="d544" class="graf graf--p graf-after--pre">It should look like the following</p><figure tabindex="0" contenteditable="false" name="460e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 192px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 27.400000000000002%;"></div><img class="graf-image" data-image-id="1*lPCMrR2WunzFnqSfaQV1wg.png" data-width="820" data-height="225" src="https://cdn-images-1.medium.com/max/800/1*lPCMrR2WunzFnqSfaQV1wg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">First modification</figcaption></figure><p name="4268" class="graf graf--p graf-after--figure">2. Add the variables in <em class="markup--em markup--p-em">Order</em> definition</p><p name="9980" class="graf graf--p graf-after--p">Head to the definition of <code class="markup--code markup--p-code">IOrder</code> and add following lines in the end of the function</p><pre name="88bc" class="graf graf--pre graf-after--p">export interface IOrder extends IOrderItemsAndShippingMethods<br>{<br>  ....<br>  merchantCapabilities?: IMerchantCapabilities |   IMerchantCapabilities[];<br>  supportedNetworks?: ISupportedNetworks | ISupportedNetworks[];<br>}</pre><p name="9405" class="graf graf--p graf-after--pre">Complete function will look like following</p><figure tabindex="0" contenteditable="false" name="7f35" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 654px; max-height: 180px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 27.500000000000004%;"></div><img class="graf-image" data-image-id="1*tNkGZA8v0LlqU3JyQw5rlA.png" data-width="654" data-height="180" src="https://cdn-images-1.medium.com/max/800/1*tNkGZA8v0LlqU3JyQw5rlA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Second modification</figcaption></figure><p name="dff4" class="graf graf--p graf-after--figure">Now, your ApplePay order should expect and accept (😛) both <code class="markup--code markup--p-code">merchantCapabilities</code> and <code class="markup--code markup--p-code">supportedNetworks</code> variables.</p><h3 name="9819" class="graf graf--h3 graf-after--p">Make a&nbsp;Payment</h3><p name="b16c" class="graf graf--p graf-after--h3">To make a payment with our app, we will have to run it in&nbsp;…… wait for it&nbsp;….. an iOS device or simulator 👏👏 of course 🙄</p><ul class="postList"><li name="af73" class="graf graf--li graf-after--p">Add an iOS platform in your app</li></ul><pre name="addd" class="graf graf--pre graf-after--li">$ ionic cordova platform add ios</pre><ul class="postList"><li name="4462" class="graf graf--li graf-after--pre">Prepare the iOS platform to run</li></ul><pre name="945b" class="graf graf--pre graf-after--li">$ ionic cordova prepare ios</pre><p name="5081" class="graf graf--p graf-after--pre">Now, open XCode, and open your project in it. (the&nbsp;.xcworkspace file)</p><ul class="postList"><li name="971b" class="graf graf--li graf-after--p">Add an <strong class="markup--strong markup--li-strong">Apple Pay Entitlement </strong>to your app, or the Apple Pay won’t work at all.</li></ul><figure tabindex="0" contenteditable="false" name="59ae" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 362px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.7%;"></div><img class="graf-image" data-image-id="1*lx_mp_pGVAH0-K75rY3iog.png" data-width="858" data-height="444" src="https://cdn-images-1.medium.com/max/800/1*lx_mp_pGVAH0-K75rY3iog.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add ApplyPay entitlement to your&nbsp;app</figcaption></figure><p name="c4e8" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&nbsp;: The plugin does not update the entitlements automatically for production app. You can define it in your <code class="markup--code markup--p-code">config.xml</code> like following</p><figure tabindex="0" contenteditable="false" name="3e44" class="graf graf--figure graf--iframe is-defaultValue 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/1ab385d20494b3add2644801e4fe45a0.js %}</div></div></figure><p name="df7e" class="graf graf--p graf-after--figure">Once the build is made, check if your device allows Apple Pay payments. If it does, click on <strong class="markup--strong markup--p-strong">Pay with Apple Pay </strong>and you will see the following flow</p><figure tabindex="0" contenteditable="false" name="d395" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 723px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 206.6%;"></div><img class="graf-image" data-image-id="1*GmraL2bbNGXZ0VM8c5K5mQ.gif" data-width="350" data-height="723" src="https://cdn-images-1.medium.com/max/800/1*GmraL2bbNGXZ0VM8c5K5mQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">ApplePay payment&nbsp;flow</figcaption></figure><p name="da4a" class="graf graf--p graf-after--figure">And our payment is complete 🎉 🎊 🎉 🎊 🎉 🎊</p><h3 name="0da6" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="0aa2" class="graf graf--p graf-after--h3">Apple Pay is a great option to include as a payment gateway for iOS apps. A simple plugin integration in Ionic 4 apps allows you to create payments from the front-end itself.</p><blockquote name="2e66" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ionic4-applepay"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic4-applepay 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 Ionic 4 blogs&nbsp;!</strong></p><p name="f46b" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><p name="2ada" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/ionic-4-full-payment-app-starter/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Full Payment app Starter</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="5bbd" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p><h3 name="1681" class="graf graf--h3 graf-after--p">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="178a" class="graf graf--p graf-after--h3">Check out my other post on</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="e224" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 RazorPay payment integration&#8202;—&#8202;for Apps and PWA</a></li></ul><p name="95a9" class="graf graf--p graf-after--li">Also check out our other blog posts related to</p><ul class="postList"><li name="ffb9" class="graf graf--li graf-after--p"><a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--li-anchor"    target="_blank">Firebase in Ionic 4</a>,</li><li name="a417" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4,</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">translations in Ionic 4</a></li></ul><h3 name="362a" class="graf graf--h3 graf-after--li">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--li-anchor"    target="_blank">Free Ionic 4&#8202;—&#8202;Phaser game framework integration</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3 graf--trailing"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>