PayPal payment integration in Ionic 5 Apps and PWA
Tags: ionic, angular, paypal, payment
Published: 2020-07-31 18:39:36

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full"><div class="postArticle-content js-postField js-notesSource editable" id="editor_28" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…"><section name="6d43" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="71b1" class="graf graf--p graf-after--figure">In this post, you’ll learn to integrate PayPal payment in Ionic 5 apps and PWA, so you can accept payment both on mobile and desktop devices.</p><p name="889f" class="graf graf--p graf-after--p">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. 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="488e" class="graf graf--figure 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*gvTQzWX-AEqL-Ut46v3ILw.gif" data-width="480" data-height="270" src="https://cdn-images-1.medium.com/max/800/1*gvTQzWX-AEqL-Ut46v3ILw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Not a great way of making payments&nbsp;😝</figcaption></figure><h3 name="6145" class="graf graf--h3 graf-after--figure">What is Ionic&nbsp;?</h3><p name="d89f" 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 hybrid mobile app development SDK. It 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 <a href="https://cordova.apache.org/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow"    target="_blank">Cordova</a> or Capacitor environment.</p><p name="c431" 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. <strong class="markup--strong markup--p-strong">With Ionic you can write a single piece of code for your app that can run on both iOS and Android </strong>and web (as PWA), that too with the simplicity of HTML, CSS, and JS.</p><p name="2b1a" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova/Capacitor is the build environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><h3 name="82e2" class="graf graf--h3 graf-after--p">Ionic and Payment&nbsp;Gateways&nbsp;</h3><p name="b85f" class="graf graf--p graf-after--h3">Ionic can create a wide variety of apps, and hence a wide variety of payment gateways can be implemented in Ionic 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.</a></p><p name="b8c2" class="graf graf--p graf-after--p">Also, there are different types of Ionic Apps you can build for same functionality. Most popular ones are&nbsp;:</p><ul class="postList"><li name="bee1" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Front-end: Angular | Build environment&nbsp;: Cordova ✅</strong></li><li name="1279" class="graf graf--li graf-after--li">Front-end: Angular | Build environment&nbsp;: Capacitor</li><li name="c0e1" class="graf graf--li graf-after--li">Front-end: React | Build environment&nbsp;: Capacitor</li><li name="0d77" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Front-end: React/Angular | as PWA ✅</strong></li></ul><p name="76f2" class="graf graf--p graf-after--li">As you see, PayPal 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 PayPal payment gateway in Ionic 5 apps and Ionic 5 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/800/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><h3 name="e900" class="graf graf--h3 graf-after--figure">Structure of&nbsp;post</h3><p name="1b8f" class="graf graf--p graf-after--h3">In this post we will learn how to implement Paypal payments for an Ionic 5 PWA and 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>— Create a PayPal developer account and configure it for integration</p><p name="0659" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2</strong>— Creating a basic Ionic 5 Angular app</p><h4 name="b76a" class="graf graf--h4 graf-after--p">PWA integration</h4><p name="8ea0" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Step 3</strong> —Configure PayPal web integration</p><p name="f004" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4</strong>&#8202;—&#8202;Run the PWA on <code class="markup--code markup--p-code">ionic serve</code> to test web payments</p><h4 name="d08f" class="graf graf--h4 graf-after--p">App integration</h4><p name="6a11" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Step 5</strong>&#8202;—&#8202;Integrate Ionic Native plugin for PayPal&nbsp;</p><p name="bd0e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6</strong>&#8202;—&#8202;Build the app on android to test app payments.</p><p name="9bf1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7</strong>&#8202;—&#8202;Going Live</p><h3 name="a1c4" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create PayPal developer account and configure it for integration</h3><p name="468c" class="graf graf--p graf-after--h3">To configure PayPal payments in your Ionic app or PWA, you need to create a business PayPal account. But for testing purposes, you have to 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><ul 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 REST API app, and link it to your sandbox test business account (by default you have a business and personal  sandbox account in developer dashboard).<br>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. So, the personal sandbox account “pays” and business sandbox account “receives” the money.</li></ul><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/800/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 / PWA 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" alt="Obtain Client ID from PayPal sandbox" src="https://cdn-images-1.medium.com/max/800/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)">Obtain Client ID from PayPal&nbsp;sandbox</figcaption></figure><h4 name="fc12" class="graf graf--h4 graf-after--figure">Country specific&nbsp;gotchas</h4><ul class="postList"><li name="b1d1" class="graf graf--li graf-after--h4">Being a payment gateway, PayPal has to respect different countries rules. E.g. In India, PayPal users can only pay and receive payments done from India in INR. So if you are testing from India, and your Sandbox accounts are created with <strong class="markup--strong markup--li-strong">India</strong> as country, you’ll have to make payments in INR. Similar restrictions may exist for other countries.</li><li name="cc61" class="graf graf--li graf-after--li">Sandbox payment credit cards are also currency sensitive. If you are facing issue making payments with the default sandbox credit card, generate a new one using <strong class="markup--strong markup--li-strong">Credit Card Generator </strong>from the left menu. Make sure you keep the country same as the sandbox account. Add this card with the <code class="markup--code markup--li-code">Add new card</code> option when you are making a sandbox payment</li></ul><figure tabindex="0" contenteditable="false" name="4826" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.8%;"></div><img class="graf-image" data-image-id="1*I2iuVFLbDYXMtJVvH_DVYg.png" data-width="1342" data-height="668" alt="Generate a new sandbox credit card for PayPal payments" src="https://cdn-images-1.medium.com/max/800/1*I2iuVFLbDYXMtJVvH_DVYg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Generate a new sandbox credit card for PayPal&nbsp;payments</figcaption></figure><h3 name="21bd" class="graf graf--h3 graf-after--figure">Step 2— Create a basic Ionic Angular&nbsp;app</h3><p name="6470" class="graf graf--p graf-after--h3">First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using</p><pre name="e081" class="graf graf--pre graf-after--p">$ npm install -g ionic@latest</pre><p name="5ac8" class="graf graf--p graf-after--pre">(My node version at the time of writing the blog is 12.14.0)</p><p name="2a7b" class="graf graf--p graf-after--p">Creating a basic Ionic-Angular app. Start a basic <code class="markup--code markup--p-code">blank</code> starter using</p><pre name="250d" class="graf graf--pre graf-after--p">$ ionic start PayPalIonic sidemenu --type=angular --cordova</pre><p name="d16b" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">--type=angular</code> told the CLI to create an <strong class="markup--strong markup--p-strong">Angular</strong> app, not a <strong class="markup--strong markup--p-strong">React</strong> app&nbsp;!!</p><p name="06f2" class="graf graf--p graf-after--p">Run the app in browser using&nbsp;</p><pre name="2d3b" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="726e" class="graf graf--p graf-after--pre">You won’t see much in the homepage created in the starter. I have modified the homepage a little to test our PayPal functionality&#8202;—&#8202;basically you can do away with just a button for PayPal payments.&nbsp;</p><p name="579a" class="graf graf--p graf-after--p">My homepage looks like this</p><figure tabindex="0" contenteditable="false" name="d297" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*V0UNg6_It1ij2HFi8g4wuA.png" data-width="1386" data-height="766" alt="HomePage UI for PayPal PWA implementation" src="https://cdn-images-1.medium.com/max/800/1*V0UNg6_It1ij2HFi8g4wuA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">HomePage UI for PayPal PWA implementation</figcaption></figure><p name="d143" class="graf graf--p graf-after--figure">Overall <code class="markup--code markup--p-code">PayPal-web.page.html</code> code looks like this</p><figure tabindex="0" contenteditable="false" name="a79e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue graf--trailing"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 252%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3c9e134204db3b845a0e28aa37383741 %}</div></div></figure></div></div></section><section name="b25f" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="8000" class="graf graf--h3 graf--leading"><strong class="markup--strong markup--h3-strong">Step 3</strong>&#8202;—&#8202;Configure PayPal web integration</h3><p name="a4be" class="graf graf--p graf-after--h3">We can’t use the PayPal Cordova 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"><strong class="markup--strong markup--blockquote-strong">Warning</strong>&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">Add PayPal Javascript SDK to index.html</h4><p name="2567" class="graf graf--p graf-after--h4">For website/PWA 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> as&nbsp;:</p><pre name="1a7f" class="graf graf--pre graf-after--p">&lt;script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&amp;currency=USD"&gt;&lt;/script&gt;</pre><blockquote name="5ce0" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong">Replace </strong><code class="markup--code markup--blockquote-code"><strong class="markup--strong markup--blockquote-strong">YOUR_CLIENT_ID</strong></code><strong class="markup--strong markup--blockquote-strong"> in above script call with your own client ID, and change the currency as per your sandbox/live account currency. Client ID is what attaches the Payment with your PayPal REST API app, so do not get it wrong.</strong></blockquote><h4 name="1079" class="graf graf--h4 graf-after--blockquote">SDK Parameters</h4><p name="e378" class="graf graf--p graf-after--h4">PayPal JavaScript SDK uses default values for parameters you don’t pass in the imported script. You might want to override these default values depending on your functionality. A few common parameters you might override:</p><ul class="postList"><li name="01cf" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code">currency</code> - The PayPal JavaScript SDK defaults to <code class="markup--code markup--li-code">USD</code></li><li name="e2eb" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">intent</code> - The PayPal JavaScript SDK defaults to <code class="markup--code markup--li-code">capture</code>, which results in the capturing the funds immediately. If you want to authorize funds immediately but capture the funds later, you have to explicitly pass <code class="markup--code markup--li-code">authorize</code> as the intent for the transaction</li></ul><p name="e1d8" class="graf graf--p graf-after--li">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><h4 name="5673" class="graf graf--h4 graf-after--p">Payment Functions</h4><p name="060c" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">createOrder&#8202;—&#8202;</strong>This function is called when the buyer clicks the PayPal button. This button&nbsp;</p><ul class="postList"><li name="a3a4" class="graf graf--li graf-after--p">Calls PayPal using <code class="markup--code markup--li-code">actions.order.create()</code> to set up the details of a one-time transaction, including the amount, line item details, and more</li><li name="c0b3" class="graf graf--li graf-after--li">Launches the PayPal Checkout window so the buyer can log in and approve the transaction on paypal.com</li></ul><p name="4b2d" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">onApprove&#8202;—&#8202;</strong>This function is called after the buyer approves the transaction on paypal.com. This function:</p><ul class="postList"><li name="abc4" class="graf graf--li graf-after--p">Calls PayPal using <code class="markup--code markup--li-code">actions.order.capture()</code> to capture the funds from the transaction.</li><li name="f1b2" class="graf graf--li graf-after--li">Shows a message to the buyer to let them know the transaction is successful.</li></ul><p name="95a4" class="graf graf--p graf-after--li"><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 database.</p><p name="dd80" class="graf graf--p graf-after--p">Here’s the full code of <code class="markup--code markup--p-code">PayPal-web.page.ts</code>&nbsp;</p><figure tabindex="0" contenteditable="false" name="8246" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 142.143%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/39d0af6c7d8be012fdd9835328ce5be5 %}</div></div></figure><p name="e919" class="graf graf--p graf-after--figure">You can also 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="7237" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 4</strong>&#8202;—&#8202;Test payments in&nbsp;PWA</h3><p name="54d0" class="graf graf--p graf-after--h3">Run the PWA on browser using <code class="markup--code markup--p-code">ionic serve</code>&nbsp;</p><p name="7f76" class="graf graf--p graf-after--p">When you click on the Payment Button, PayPal script automatically pops-up a modal with required functionality. Remember, this PayPal popup is attached to your <strong class="markup--strong markup--p-strong">PayPal REST API app, </strong>based on the Client ID you provided.</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" alt="PayPal web script launches modal for login and payment" src="https://cdn-images-1.medium.com/max/800/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">Login with your <strong class="markup--strong markup--p-strong">Sandbox account</strong>, and you’ll see payment options just like a normal PayPal transaction. Add a new credit card as I mentioned in Step 1, if you are getting an error saying <code class="markup--code markup--p-code">Your bank was not able to verify your card</code>&nbsp;. This is generally a mismatch in currency of the app, sandbox account or the credit card.&nbsp;</p><blockquote name="5cfd" class="graf graf--blockquote graf-after--p">Remember, you cannot login with a non-sandbox PayPal account for testing</blockquote><figure tabindex="0" contenteditable="false" name="e204" class="graf graf--figure graf-after--blockquote"><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" alt="Payment options in your sandbox account&#8202;—&#8202;PayPal web implementation" src="https://cdn-images-1.medium.com/max/800/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.&nbsp;</p><p name="761e" class="graf graf--p graf-after--p">Sometimes, there will be an additional verification step involved, imitating a 3D secure password for real transaction. As you can see, being a Sandbox transaction, the password is mentioned as the <strong class="markup--strong markup--p-strong">Personal message.&nbsp;</strong></p><figure tabindex="0" contenteditable="false" name="5cbe" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*d_U_-iT23pSS4cObdgSjNA.png" data-width="1384" data-height="765" src="https://cdn-images-1.medium.com/max/800/1*d_U_-iT23pSS4cObdgSjNA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Additional verification step</figcaption></figure><p name="6824" class="graf graf--p graf-after--figure">Once the payment is done, the response object will look like this</p><figure tabindex="0" contenteditable="false" name="1f9e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 314px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.800000000000004%;"></div><img class="graf-image" data-image-id="1*DBYA0ga0G-qeNw7HqKNC8g.png" data-width="930" data-height="417" alt="Response from PayPal web payments" src="https://cdn-images-1.medium.com/max/800/1*DBYA0ga0G-qeNw7HqKNC8g.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 graf--trailing">You can easily use the response to determine if the payment was successful.</p></div></div></section><section name="9ee0" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="4bb3" class="graf graf--h3 graf--leading"><strong class="markup--strong markup--h3-strong">Step 5</strong>&#8202;—&#8202;Integrate Ionic Native plugin for&nbsp;PayPal</h3><p name="5682" class="graf graf--p graf-after--h3">To implement PayPal payment in Ionic Mobile apps, install PayPal Cordova plugin first</p>
```
$ ionic cordova plugin add com.paypal.cordova.mobilesdk
$ npm install @ionic-native/paypal
```<h4 name="dba0" class="graf graf--h4 graf-after--pre">Import PayPal in app.module</h4><p name="dd9e" class="graf graf--p graf-after--h4">Import and 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><pre name="80b1" class="graf graf--pre graf-after--p">import { PayPal } from '@ionic-native/paypal/ngx';</pre><figure tabindex="0" contenteditable="false" name="1e61" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 358px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.1%;"></div><img class="graf-image" data-image-id="1*GN6VMlC_k2-pRxwuU6rgsQ.png" data-width="1078" data-height="551" alt="Import PayPal in app.module.ts" src="https://cdn-images-1.medium.com/max/800/1*GN6VMlC_k2-pRxwuU6rgsQ.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 app.module.ts</figcaption></figure><h4 name="c533" class="graf graf--h4 graf-after--figure">Import PayPal in your&nbsp;page</h4><p name="a160" class="graf graf--p graf-after--h4">Create a separate folder for PayPal app implementation.&nbsp;</p><pre name="9dbb" class="graf graf--pre graf-after--p">$ ionic generate page paypal-mobile</pre><p name="cfbb" class="graf graf--p graf-after--pre">Import <code class="markup--code markup--p-code">PayPal</code> in your <code class="markup--code markup--p-code">paypal-mobile.page.ts</code> same as <code class="markup--code markup--p-code">app.module.ts</code>&nbsp;</p>
```
import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';
....
export class PaypalPage {constructor(private payPal: PayPal) { }
```
<p name="6396" class="graf graf--p graf-after--pre">Modify the page’s UI a little to match the phone payment functionality</p><figure tabindex="0" contenteditable="false" name="12f2" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 319px; max-height: 679px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 212.9%;"></div><img class="graf-image" data-image-id="1*pNc2w3CdW1mfXlnFi09uFA.png" data-width="319" data-height="679" alt="HomePage UI for PayPal App implementation" src="https://cdn-images-1.medium.com/max/800/1*pNc2w3CdW1mfXlnFi09uFA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">HomePage UI for PayPal App implementation</figcaption></figure><p name="3531" class="graf graf--p graf-after--figure">Here’s the <code class="markup--code markup--p-code">paypal-mobile.page.html</code> code, in case you need</p><figure tabindex="0" contenteditable="false" name="036e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 211.143%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/4de1cb354095afb0bc0cc12e913b05ce %}</div></div></figure><h4 name="a8d7" 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 earlier, 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="a8ca" class="graf graf--p graf-after--p">Here’s the complete code for PayPal mobile app implementation</p><figure tabindex="0" contenteditable="false" name="2b10" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 129.571%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/810f73a741d4441fdc20eab4c144fd12 %}</div></div></figure><p name="64aa" class="graf graf--p graf-after--figure">In the <code class="markup--code markup--p-code">payWithPaypal()</code> function, you 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 you pass the environment we set earlier. Finally, you 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><blockquote name="5742" class="graf graf--blockquote graf-after--p">Notice the <code class="markup--code markup--blockquote-code">PayPalEnvironmentSandbox</code> parameter. This is used for Sandbox environment. For production environment, it will change to <code class="markup--code markup--blockquote-code">PayPalEnvironmentProduction</code>&nbsp;. Of course, do not forget to replace <code class="markup--code markup--blockquote-code">YOUR_SANDBOX_CLIENT_ID</code> with your Sandbox Client ID&nbsp;.</blockquote><p name="da8d" class="graf graf--p graf-after--blockquote">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" alt="Static amount and currency for sample purpose" src="https://cdn-images-1.medium.com/max/800/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><h3 name="336b" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 6</strong>&#8202;—&#8202;Build the app on android to test app&nbsp;payments</h3><p name="f98f" 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 run android</pre><p name="8761" class="graf graf--p graf-after--pre is-selected">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/800/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><h4 name="4b62" class="graf graf--h4 graf-after--li"><strong class="markup--strong markup--h4-strong">1. Pay with&nbsp;PayPal</strong></h4><p name="febc" class="graf graf--p graf-after--h4">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/800/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/800/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><h4 name="1503" class="graf graf--h4 graf-after--p">2. <strong class="markup--strong markup--h4-strong">Pay with&nbsp;Card</strong></h4><p name="586b" class="graf graf--p graf-after--h4">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/800/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/800/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 like the following</p><figure tabindex="0" contenteditable="false" name="f5da" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 209px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 29.799999999999997%;"></div><img class="graf-image" data-image-id="1*BQhDMK64bc2K5wOfl6xbFA.png" data-width="912" data-height="272" alt="Successful payment response on Chrome console" src="https://cdn-images-1.medium.com/max/800/1*BQhDMK64bc2K5wOfl6xbFA.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="1fdc" class="graf graf--h3 graf-after--p">Going Live</h3><p name="3eab" 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/800/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="f187" class="graf graf--p graf-after--pre">You’re all set now to make and accept payment from your Ionic 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/800/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="ccf0" class="graf graf--p graf-after--h3">In this post, we learnt how to integrate PayPal in an Ionic app, as well as in an Ionic 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="2d00" class="graf graf--p graf-after--p">Leave comments if you face any issues in the implementation. I’ll be happy to help.</p><h3 name="a64b" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="ca6a" class="graf graf--p graf-after--h3">If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section</p><ul class="postList"><li name="1a12" class="graf graf--li graf-after--p">Ionic Payment Gateways&#8202;—&#8202;<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 nofollow noopener noopener noopener noopener noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Apple Pay</a> | <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 nofollow noopener noopener noopener noopener noopener"    target="_blank">RazorPay</a></li><li name="9210" class="graf graf--li graf-after--li">Ionic Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Chart.js</a></li><li name="e50b" class="graf graf--li graf-after--li">Ionic Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Twitter</a></li><li name="ce2c" class="graf graf--li graf-after--li">Ionic Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Anonymous</a></li><li name="7bd1" class="graf graf--li graf-after--li">Ionic Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Pedometer</a></li><li name="bba3" class="graf graf--li graf-after--li">Media in Ionic&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Image Cropper</a></li><li name="ca53" class="graf graf--li graf-after--li">Ionic Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">RTL</a></li><li name="b3a4" class="graf graf--li graf-after--li">Ionic messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Reading SMS</a></li><li name="1cc4" class="graf graf--li graf-after--li graf--trailing">Ionic with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener"    target="_blank">Cloud functions</a></li></ul></div></div></section><section name="b3b8" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="adc5" class="graf graf--h3 graf--leading">Ionic React Full App with Capacitor</h3><p name="4fa5" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 React Full App in Capacitor</a></p><figure tabindex="0" contenteditable="false" name="0d2d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*G3yOFVX4oABx9MhUy-3kng.png" data-width="760" data-height="479" alt="Ionic 5 React Full App in Capacitor from Enappd" src="https://cdn-images-1.medium.com/max/800/1*G3yOFVX4oABx9MhUy-3kng.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 React Full App in Capacitor from&nbsp;Enappd</figcaption></figure><h3 name="30ba" class="graf graf--h3 graf-after--figure">Ionic Capacitor Full App (Angular)</h3><p name="9a60" class="graf graf--p graf-after--h3">If you need a base to start your next Angular <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="c219" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="0*UwSHcofTMStMnzAX.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*UwSHcofTMStMnzAX.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h3 name="2f1c" class="graf graf--h3 graf-after--figure">Ionic Full App (Angular and&nbsp;Cordova)</h3><p name="1008" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-full-app"  class="markup--anchor markup--p-anchor"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" alt="Ionic Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Full App in Cordova, with huge number of layouts and&nbsp;features</figcaption></figure><p name="9b61" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>