Ionic 4 PayPal payment integration - for Apps and PWA
Tags: ionic, paypal, payments, pwa
Published: 2019-09-16 13:24:34

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors is-withLeadingImage" 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="30be" 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="5db1" class="graf graf--p graf-after--figure is-selected">PayPal is one of the most widely used and easiest payment gateway to integrate in your website or app. Plus it is spread all over the globe, and supports a wide variety of payment options. Together with Stripe, PayPal can take care of almost all your payment requirements, so you don’t have to go all</p><figure tabindex="0" contenteditable="false" name="4d0d" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 270px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*14M1rqpuUynVSDPvEKm2rQ.gif" data-width="480" data-height="270" src="https://cdn-images-1.medium.com/max/720/1*14M1rqpuUynVSDPvEKm2rQ.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><div name="b983" class="graf graf--mixtapeEmbed graf-after--figure"><a href="https://store.enappd.com/product/ionic-4-full-payment-app-starter/"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://store.enappd.com/product/ionic-4-full-payment-app-starter/"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Ionic 4 Full Payment app Starter - Enappd | Ionic, React native, Firebase themes, templates and…</strong><br><em class="markup--em markup--mixtapeEmbed-em">Get the amazing UI and source code of full Payment app for your Ionic 4 project. Start your own Payment app…</em>store.enappd.com</a><a href="https://store.enappd.com/product/ionic-4-full-payment-app-starter/" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="becb5399e9d0aef3b7934b270e4b50e5" data-thumbnail-img-id="0*2f4NX4fBWMvNP0lY" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*2f4NX4fBWMvNP0lY);"></a></div><h3 name="c9e4" class="graf graf--h3 graf-after--mixtapeEmbed">What is Ionic&nbsp;4?</h3><p name="31ca" 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, Braintree, in-app purchase etc. For more details on payment gateways, you can read my 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></p><p name="7a41" class="graf graf--p graf-after--p">PayPal can be integrated in websites as well as mobile apps. There are different ways of integration of PayPal SDK. In this blog we’ll learn <strong class="markup--strong markup--p-strong">how to integrate PayPal payment gateway in Ionic 4 apps and Ionic 4 PWA.</strong></p><figure tabindex="0" contenteditable="false" name="a0ae" 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*t5-AzGmKvmvvGGlUpFrxuQ.jpeg" data-width="800" data-height="320" src="https://cdn-images-1.medium.com/max/720/1*t5-AzGmKvmvvGGlUpFrxuQ.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 PayPal make a great&nbsp;team</figcaption></figure><p name="1b8f" class="graf graf--p graf-after--figure">In this post we will learn how to implement Paypal payments for an Ionic 4 mobile app. We can break down the post in these steps:</p><p name="20ae" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1</strong>&#8202;—&#8202;Creating an Ionic 4 app. We will use the Ionic 4 side menu starter</p><p name="bf7c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2</strong>&#8202;—&#8202;Create a PayPal developer account and configure it for app and PWA integration</p><p name="8ea0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3</strong>&#8202;—&#8202;Use Ionic Native plugin for PayPal to enable payment in mobile apps</p><p name="f004" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4</strong>&#8202;—&#8202;Build the app on android to test app payments.</p><p name="bd0e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5</strong>&#8202;—&#8202;Configure PayPal web integration with Javascript</p><p name="a08d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6</strong>&#8202;—&#8202;Run the PWA on <code class="markup--code markup--p-code">ionic serve</code> to test web payments</p><h3 name="9226" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><p name="2497" class="graf graf--p graf-after--h3">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 sidemenu</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 sidemenu 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="fc19" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 376px; max-height: 668px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*fBSJqadTXtgipXch12gUNA.png" data-width="376" data-height="668" src="https://cdn-images-1.medium.com/max/720/1*fBSJqadTXtgipXch12gUNA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Paypal payment home&nbsp;page</figcaption></figure><h3 name="c4c9" class="graf graf--h3 graf-after--figure">Step 2&#8202;—&#8202;Configure a PayPal developer account</h3><p name="fb1b" class="graf graf--p graf-after--h3">To configure PayPal payments in your Ionic 4 app, you need to create a business PayPal account. For testing purposes, you can use the Sandbox test accounts. Sandbox testing will look exactly like live payments, but it won’t deduct any money from your account or Credit Card.</p><p name="9cb0" class="graf graf--p graf-after--p">To obtain your Sandbox credentials follow the steps below:</p><ol class="postList"><li name="3c67" class="graf graf--li graf-after--p">Go to <a href="https://developer.paypal.com/developer/accounts/"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">Sandbox Accounts</a> and create a sandbox business and personal test accounts.</li><li name="1085" class="graf graf--li graf-after--li">Go to <a href="https://developer.paypal.com/developer/applications/"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">My Apps &amp; Credentials</a> and generate a <a href="https://developer.paypal.com/docs/bt-vzero-overview/"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">v.zero</a> SDK sandbox credential and link it to your sandbox test account. You need a Sandbox account to make payments in Sandbox mode of your app. In other words, when your app’s PayPal SDK is running in Sandbox mode, you cannot make payments with an “actual” PayPal account, you need a Sandbox account.</li><li name="7556" class="graf graf--li graf-after--li">Go to <a href="https://developer.paypal.com/developer/applications/"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank">My Apps &amp; Credentials</a> and create an app. This is the app associated with your payments. A PayPal account can associate multiple such apps with it (you can redirect money from multiple mobile or web-apps in a single PayPal account)</li></ol><figure tabindex="0" contenteditable="false" name="b657" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*lj9qsgc9527h8UFIcw7xiQ.png" data-width="1387" data-height="797" src="https://cdn-images-1.medium.com/max/720/1*lj9qsgc9527h8UFIcw7xiQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create new app in PayPal&nbsp;account</figcaption></figure><p name="3a09" class="graf graf--p graf-after--figure">Also note down your<strong class="markup--strong markup--p-strong"> Client ID </strong>from the app details. This is mostly what you need to integrate PayPal in your app and test payments.</p><figure tabindex="0" contenteditable="false" name="9579" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*CCfWlSCrmZsnp0o_ortzkw.png" data-width="1387" data-height="797" src="https://cdn-images-1.medium.com/max/720/1*CCfWlSCrmZsnp0o_ortzkw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">App details contain your Sandbox and Live client ID and&nbsp;secrets</figcaption></figure><h3 name="bc8b" class="graf graf--h3 graf-after--figure">Step 3&#8202;—&#8202;Enable PayPal payments in mobile&nbsp;app</h3><h4 name="cf01" class="graf graf--h4 graf-after--h3">Setup PayPal&nbsp;modules</h4><p name="6550" class="graf graf--p graf-after--h4">To install <strong class="markup--strong markup--p-strong">Paypal</strong> plugin for Ionic, use</p><pre name="7a9e" class="graf graf--pre graf-after--p">$ ionic cordova plugin add com.paypal.cordova.mobilesdk</pre><pre name="37b3" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/paypal</pre><p name="ff0d" class="graf graf--p graf-after--pre">This will install PayPal plugin. Import <strong class="markup--strong markup--p-strong">PayPal</strong> into your component using</p><pre name="a54c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';</code></pre><figure tabindex="0" contenteditable="false" name="9459" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 246px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.099999999999994%;"></div><img class="graf-image" data-image-id="1*KzDBJgG4knJZGdJcvbyqiw.png" data-width="1079" data-height="379" src="https://cdn-images-1.medium.com/max/720/1*KzDBJgG4knJZGdJcvbyqiw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import PayPal in paypal.page.ts file</figcaption></figure><p name="2d7d" class="graf graf--p graf-after--figure">You will also need to include <code class="markup--code markup--p-code">PayPal</code> in the list of <code class="markup--code markup--p-code">providers</code> in your <code class="markup--code markup--p-code">app.module.ts</code> file.</p><figure tabindex="0" contenteditable="false" name="ae49" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 391px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.800000000000004%;"></div><img class="graf-image" data-image-id="1*EMFf23QYVNlXu3lpvXgKuw.png" data-width="1104" data-height="616" src="https://cdn-images-1.medium.com/max/720/1*EMFf23QYVNlXu3lpvXgKuw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import PayPal in your app.module.ts</figcaption></figure><h4 name="68cf" class="graf graf--h4 graf-after--figure">PayPal payment&nbsp;function</h4><p name="c9c4" class="graf graf--p graf-after--h4">Invoke the payment function to initiate a payment. As mentioned in<strong class="markup--strong markup--p-strong"> Step 2</strong>, You will require your <code class="markup--code markup--p-code">client_id</code> from your PayPal account. (<a href="https://developer.paypal.com/docs/integration/direct/webhooks/my-apps-and-credentials/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank">How to get my credentials from PayPal account</a>). This function will be attached to <strong class="markup--strong markup--p-strong">Pay with PayPal</strong> button we saw earlier in the app screenshot.</p><p name="64aa" class="graf graf--p graf-after--p">In the <code class="markup--code markup--p-code">payWithPaypal()</code> function, we will start by initializing the <code class="markup--code markup--p-code">PayPal</code> object with the PayPal environment (Sandbox or Production) to prepare the device for processing payments. Βy calling the <code class="markup--code markup--p-code">prepareToRender()</code> method we will pass the environment we set earlier. Finally, we will render the PayPal UI to collect the payment from the user by calling the <code class="markup--code markup--p-code">renderSinglePaymentUI() </code>method.</p><p name="643d" class="graf graf--p graf-after--p">Complete <code class="markup--code markup--p-code">paypal.page.ts</code> file will look as follows</p><figure tabindex="0" contenteditable="false" name="7cb5" 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"><iframe width="700" height="250" src="/media/886f048f992f99036e9e6d5180b6fbf3?postId=ffeeb2b00b49" data-media-id="886f048f992f99036e9e6d5180b6fbf3" allowfullscreen="" frameborder="0"></iframe></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">page.ts file with PayPal payment function</figcaption></figure><p name="816a" class="graf graf--p graf-after--figure">Notice the <code class="markup--code markup--p-code">PayPalEnvironmentSandbox</code> parameter. This is used for Sandbox environment. For production environment, it will change to <code class="markup--code markup--p-code">PayPalEnvironmentProduction</code>&nbsp;. Of course, do not forget to replace <code class="markup--code markup--p-code">YOUR_SANDBOX_CLIENT_ID</code> with your Sandbox Client ID from Step 2.</p><p name="da8d" class="graf graf--p graf-after--p">Also notice, for the sake of a sample, we have taken <code class="markup--code markup--p-code">PaymentAmount</code> and<code class="markup--code markup--p-code">currency</code> as static in the logic, but these can be easily dynamic as per your app’s requirement.</p><figure tabindex="0" contenteditable="false" name="b287" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 131px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 18.7%;"></div><img class="graf-image" data-image-id="1*TsKZg2K2TGWtEVW-z6o9aQ.png" data-width="754" data-height="141" src="https://cdn-images-1.medium.com/max/720/1*TsKZg2K2TGWtEVW-z6o9aQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Static amount and currency for sample&nbsp;purpose</figcaption></figure><p name="ef7c" class="graf graf--p graf-after--figure">Once payment is done, PayPal SDK will return a response. A sample sandbox response is shown in the gist above. One can use this response to show appropriate <em class="markup--em markup--p-em">Toast</em> or <em class="markup--em markup--p-em">Alert</em> to app users.</p><p name="4eaa" class="graf graf--p graf-after--p">Here’s the HTML template for the PayPal App integration page</p><figure tabindex="0" contenteditable="false" name="b570" 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"><iframe width="700" height="250" src="/media/a8c87f27ec18f4a131ca2e8e5aa31b34?postId=ffeeb2b00b49" data-media-id="a8c87f27ec18f4a131ca2e8e5aa31b34" allowfullscreen="" frameborder="0"></iframe></div></div></figure><h3 name="ef69" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Build android app and test payments.</h3><p name="7f17" class="graf graf--p graf-after--h3">To build the app on android, run the following commands one after another</p><pre name="589e" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><pre name="bdf5" class="graf graf--pre graf-after--pre">$ ionic cordova prepare android</pre><pre name="13a2" class="graf graf--pre graf-after--pre">$ ionic cordova run android</pre><p name="8761" class="graf graf--p graf-after--pre">The final command will run the app on either default emulator, or an android device attached to your system. Once you click the <strong class="markup--strong markup--p-strong">Pay with PayPal </strong>button, you will see the PayPal payment screens</p><figure tabindex="0" contenteditable="false" name="bd08" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*7Os74byq1BO00-oaFH-uZQ.png" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*7Os74byq1BO00-oaFH-uZQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">PayPal payment options&nbsp;screen</figcaption></figure><p name="0b7e" class="graf graf--p graf-after--figure">You can choose to</p><ul class="postList"><li name="52f5" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Pay with PayPal</strong>&#8202;—&#8202;using your PayPal account, OR</li><li name="cd18" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Pay with Card&#8202;</strong>—&#8202;This will use your’s device’s camera to help read your credit card (to avoid typing your card number, expiry date etc)</li></ul><ol class="postList"><li name="4b62" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Pay with PayPal</strong></li></ol><p name="febc" class="graf graf--p graf-after--li">You will need to login to your <strong class="markup--strong markup--p-strong">Sandbox Account</strong> to make a payment (because, remember, you are in a sandbox environment)</p><figure tabindex="0" contenteditable="false" name="7551" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*WllDJZsf95kMiCfBgARh5Q.png" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*WllDJZsf95kMiCfBgARh5Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Sign in to your sandbox account to make test&nbsp;payments</figcaption></figure><p name="05b4" class="graf graf--p graf-after--figure">Once you are logged in, you’ll see the checkout options</p><figure tabindex="0" contenteditable="false" name="5caa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*FFUXz7ublrQatM8pnMqK7g.png" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*FFUXz7ublrQatM8pnMqK7g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Payment options in your sandbox&nbsp;account</figcaption></figure><p name="d3c1" class="graf graf--p graf-after--figure">Select one option, and pay for the dummy amount.</p><p name="1503" class="graf graf--p graf-after--p">2. <strong class="markup--strong markup--p-strong">Pay with Card</strong></p><p name="586b" class="graf graf--p graf-after--p">In this case, your apps’ camera will open up to scan your card.</p><figure tabindex="0" contenteditable="false" name="e799" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*0igYsuKFhlk32HbKMdLLOA.png" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*0igYsuKFhlk32HbKMdLLOA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Scan your&nbsp;card</figcaption></figure><p name="dbf0" class="graf graf--p graf-after--figure">Once it is done scanning, it will confirm the card number, expiry date and ask for your CVV details etc. Lastly, it’ll show you a confirmation screen, and you proceed to pay the amount.</p><figure tabindex="0" contenteditable="false" name="f6b4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*KDX1FlYyeg5kjqmmc5lVNQ.png" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*KDX1FlYyeg5kjqmmc5lVNQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Confirm payment with PayPal card&nbsp;payment</figcaption></figure><p name="e3f3" class="graf graf--p graf-after--figure">In both payment cases, you should receive a successful payment response similar to the one shown earlier in Step 3, or like the following</p><figure tabindex="0" contenteditable="false" name="7e96" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 595px; max-height: 249px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 41.8%;"></div><img class="graf-image" data-image-id="1*KBsA4mGGPgqIE7mxGTGCZw.png" data-width="595" data-height="249" src="https://cdn-images-1.medium.com/max/720/1*KBsA4mGGPgqIE7mxGTGCZw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Successful payment response on Chrome&nbsp;console</figcaption></figure><p name="ce68" class="graf graf--p graf-after--figure">This completes the Mobile app part of PayPal payment.</p><h3 name="7248" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;Configure PayPal web integration</h3><p name="52bb" class="graf graf--p graf-after--h3">Since we implemented PayPal in the Ionic 4 app using a native plugin, it won’t work in browser environment. So we can’t use the plugin in an Ionic Progressive Web App (PWA). But we can use the PayPal front-end Javascript SDK in such case.</p><blockquote name="043a" class="graf graf--blockquote graf-after--p">Warning&nbsp;: In websites or PWA, it is recommended to use payment gateway functions in back-end, because front-end implementation can reveal your client-ID, secret etc</blockquote><h4 name="4cd7" class="graf graf--h4 graf-after--blockquote">PayPal web implementation page</h4><p name="cb57" class="graf graf--p graf-after--h4">For PWA implementation, I have created a <code class="markup--code markup--p-code">paypal-web</code> folder in the app, and attached the route in the sidemenu.</p><figure tabindex="0" contenteditable="false" name="0f57" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*5PivTw4oj2eZ5xPOkE03hQ.png" data-width="1387" data-height="798" src="https://cdn-images-1.medium.com/max/720/1*5PivTw4oj2eZ5xPOkE03hQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">PayPal PWA implementation page</figcaption></figure><p name="93b8" class="graf graf--p graf-after--figure">For website front-end implementation, PayPal provides <strong class="markup--strong markup--p-strong">Payment Buttons </strong>(the yellow button in the above image)<strong class="markup--strong markup--p-strong">. </strong>These are pre-configured PayPal buttons + functions, attached to a JS file we import in our PWA’s <code class="markup--code markup--p-code">index.html</code></p><h4 name="9409" class="graf graf--h4 graf-after--p">Import PayPal&nbsp;Script</h4><p name="71b4" class="graf graf--p graf-after--h4">To start, import the PayPal JS SDK in your <code class="markup--code markup--p-code">index.html</code> like this</p><pre name="1a7f" class="graf graf--pre graf-after--p">&lt;script src="https://www.paypal.com/sdk/js?client-id=sb&amp;currency=USD"&gt;&lt;/script&gt;</pre><p name="c624" class="graf graf--p graf-after--pre">Now, PayPal official documentation tells you to code the remaining part of the logic in index.html itself. But the default implementation is good for two reasons</p><ul class="postList"><li name="6781" class="graf graf--li graf-after--p">Ionic app takes time to compile and load in the webview environment, so the render function cannot find the button container</li><li name="52df" class="graf graf--li graf-after--li">We need to pass variables like amount, currency etc to the functions. So it makes more sense to keep the functions inside the page.ts file of PWA</li></ul><h4 name="273a" class="graf graf--h4 graf-after--li">Render Payment&nbsp;Buttons</h4><p name="fcc9" class="graf graf--p graf-after--h4">In the HTML template, we replace the <code class="markup--code markup--p-code">ion-button</code> with</p><pre name="eeee" class="graf graf--pre graf-after--p">&lt;div id="paypal-button-container"&gt;&lt;/div&gt;</pre><p name="763f" class="graf graf--p graf-after--pre">This <code class="markup--code markup--p-code">id</code> is used to identify the button, and attached correct render and payment functions to the button.</p><p name="32d2" class="graf graf--p graf-after--p">In the logic for web implementation, we attach <code class="markup--code markup--p-code">createOrder</code> and <code class="markup--code markup--p-code">onApprove</code> functions to the <strong class="markup--strong markup--p-strong">PayPal buttons. </strong>The web-implementation<code class="markup--code markup--p-code">page.ts</code> file looks like following</p><figure tabindex="0" contenteditable="false" name="e122" 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"><iframe width="700" height="250" src="/media/ec52d86399a0f296987479a404873f29?postId=ffeeb2b00b49" data-media-id="ec52d86399a0f296987479a404873f29" allowfullscreen="" frameborder="0"></iframe></div></div></figure><p name="d223" class="graf graf--p graf-after--figure">Notice that the&nbsp;<code class="markup--code markup--p-code">.render(‘#paypal-button-container’)</code> part is actually what renders the button in the webpage.</p><p name="4616" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">onApprove</code> function carries out the success or error part after a transaction. Here, you can call your server with a REST API and save a successful payment in your DB.</p><p name="8da5" class="graf graf--p graf-after--p">You can actually try different styles of payment buttons at <a href="https://developer.paypal.com/demo/checkout/#/pattern/client"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">PayPal Payment Button demo page</a></p><h3 name="4797" class="graf graf--h3 graf-after--p">Step 6&#8202;—&#8202;Test web/PWA&nbsp;payments</h3><p name="b26f" class="graf graf--p graf-after--h3">When you click on the Payment Button, PayPal script automatically pops-up a modal with required functionality</p><figure tabindex="0" contenteditable="false" name="8207" 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*VMXDaRXht_t-zf0GmbsHJA.png" data-width="1385" data-height="799" src="https://cdn-images-1.medium.com/max/720/1*VMXDaRXht_t-zf0GmbsHJA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">PayPal web script launches modal for login and&nbsp;payment</figcaption></figure><p name="e22e" class="graf graf--p graf-after--figure">Once you login with your Sandbox account, you’ll see the same options as you saw in the app’s implementation</p><figure tabindex="0" contenteditable="false" name="e204" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*RhbD0DS-C3-ve5tfR-1NOA.png" data-width="1387" data-height="798" src="https://cdn-images-1.medium.com/max/720/1*RhbD0DS-C3-ve5tfR-1NOA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Payment options in your sandbox account&#8202;—&#8202;PayPal web implementation</figcaption></figure><p name="dd8d" class="graf graf--p graf-after--figure">Select the appropriate method, and your payment is done. The response object will look like this</p><figure tabindex="0" contenteditable="false" name="3ccc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 321px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 45.800000000000004%;"></div><img class="graf-image" data-image-id="1*D5BNHk3rttXGIJNeu3wWEw.png" data-width="1028" data-height="471" src="https://cdn-images-1.medium.com/max/720/1*D5BNHk3rttXGIJNeu3wWEw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Response from PayPal web&nbsp;payments</figcaption></figure><p name="7e4e" class="graf graf--p graf-after--figure">You can easily use the response to determine if the payment was successful.</p><div name="dd29" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://store.enappd.com/product/ionic-4-full-payment-app-starter/"  class="markup--anchor markup--mixtapeEmbed-anchor" title="https://store.enappd.com/product/ionic-4-full-payment-app-starter/"   ><strong class="markup--strong markup--mixtapeEmbed-strong">Ionic 4 Full Payment app Starter - Enappd | Ionic, React native, Firebase themes, templates and…</strong><br><em class="markup--em markup--mixtapeEmbed-em">Get the amazing UI and source code of full Payment app for your Ionic 4 project. Start your own Payments app…</em>store.enappd.com</a><a href="https://store.enappd.com/product/ionic-4-full-payment-app-starter/" class="js-mixtapeImage mixtapeImage u-ignoreBlock" data-media-id="becb5399e9d0aef3b7934b270e4b50e5" data-thumbnail-img-id="0*J7SWWmDYoeTbBpuK" style="background-image: url(https://cdn-images-1.medium.com/fit/c/144/144/0*J7SWWmDYoeTbBpuK);"></a></div><h3 name="5b70" class="graf graf--h3 graf-after--mixtapeEmbed">Going Live</h3><p name="5c6a" class="graf graf--p graf-after--h3">After testing on app and PWA, when you want to go live, you will need to perform following steps</p><ul class="postList"><li name="6cd6" class="graf graf--li graf-after--p">Copy the <code class="markup--code markup--li-code">production</code> client-ID from your PayPal account and use it in your app</li></ul><figure tabindex="0" contenteditable="false" name="5470" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*WyJl7GFlM5fkXM9E4k_vHQ.png" data-width="1387" data-height="797" src="https://cdn-images-1.medium.com/max/720/1*WyJl7GFlM5fkXM9E4k_vHQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Get your live client-ID for production usage</figcaption></figure><ul class="postList"><li name="f40e" class="graf graf--li graf-after--figure">In app implementation, change the <code class="markup--code markup--li-code">PayPalEnvironmentSandbox</code> to <code class="markup--code markup--li-code">PayPalEnvironmentProduction</code> in <code class="markup--code markup--li-code">prepareToRender</code> function</li><li name="05fa" class="graf graf--li graf-after--li">In web-implementation, change the script import with</li></ul><pre name="0ddc" class="graf graf--pre graf-after--li">&lt;script src=”https://www.paypal.com/sdk/js?client-id=LIVE_CLIENT_ID"&gt; &lt;/script&gt;</pre><p name="05cb" class="graf graf--p graf-after--pre">You’re all set now to make and accept payment from your Ionic 4 app and PWA. Go enjoy, homie&nbsp;!</p><figure tabindex="0" contenteditable="false" name="0ed7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 450px; max-height: 253px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><img class="graf-image" data-image-id="1*1gWamK_ovlqZe_sQjLEkhQ.gif" data-width="450" data-height="253" src="https://cdn-images-1.medium.com/max/720/1*1gWamK_ovlqZe_sQjLEkhQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Let it rain&nbsp;!!!!</figcaption></figure><h3 name="e199" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="5c1f" class="graf graf--p graf-after--h3">In this post, we learnt how to integrate PayPal in an Ionic 4 app, as well as in an Ionic 4 progressive web app. Testing can be performed easily using Sandbox accounts, and we can go live by simply changing sandbox client-ID with live-ID.</p><p name="6da2" class="graf graf--p graf-after--p">Stay tuned for more Ionic 4 blogs&nbsp;!</p><h3 name="1681" class="graf graf--h3 graf-after--p">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="4e29" class="graf graf--p graf-after--h3">Check out my other post on <a href="https://medium.com/enappd/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa-d2bfbf1a7e46"  class="markup--anchor markup--p-anchor"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></p><p name="95a9" class="graf graf--p graf-after--p">Also check out our other blog posts related to <a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--p-anchor"    target="_blank">Firebase in Ionic 4</a>, <a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--p-anchor"    target="_blank">Geolocation</a> in Ionic 4, <a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--p-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and <a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--p-anchor"    target="_blank">translations in Ionic 4</a></p><h3 name="362a" class="graf graf--h3 graf-after--p">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"    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"    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"    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"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>