Ionic 4 QR Code, Barcode Scanning
Tags: ionic, qrcode, barcode, scanning
Published: 2020-03-26 18:59:29

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="b9a5" 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"><h4 name="5aba" class="graf graf--h4 graf-after--figure"><em class="markup--em markup--h4-em">Complete source code of this tutorial is available here&#8202;</em>—&#8202;<a href="https://github.com/mdshadman/QrcodeBarcode"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Ionic 4 Qrcode&nbsp;Barcode</a></h4><p name="ec02" class="graf graf--p graf-after--h4">This post is all about scanning QR code or Barcode and creating QR code in your cool new app. In this post, you will learn</p><ul class="postList"><li name="df63" class="graf graf--li graf-after--p">How to implement <code class="markup--code markup--li-code">phonegap-plugin-barcodescanner and cordova-plugin-qrscanner</code>in our app.</li><li name="039a" class="graf graf--li graf-after--li">How to create <code class="markup--code markup--li-code">QR Code usng</code> these plugin into an ionic app.</li></ul><p name="00df" class="graf graf--p graf-after--li">Before start, first you will need an ionic app to start with, hence you can follow <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">how to create an ionic app for beginners</strong></a> and start after that from here.</p><h3 name="4297" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4</h3><p name="e21e" class="graf graf--p graf-after--h3">I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.</p><p name="a6fd" class="graf graf--p graf-after--p is-selected"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. 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.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. 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. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><h3 name="97ae" class="graf graf--h3 graf-after--p">QR code and Barcode— What and&nbsp;why?</h3><p name="6280" class="graf graf--p graf-after--h3">QR code or barcode scanning is something almost every smartphone user has done at least once. We scan QR codes in supermarkets, on products in general, and oh, Amazon delivery! It’s a very handy way to recognize products instead of entering 16 digit long ID numbers etc. Similarly, reading ID numbers from Passports, etc could be very handy if you are an international hotel owner and require guests to carry passports as IDs. Or maybe you want to read off a vehicle registration number using your phone.</p><p name="608a" class="graf graf--p graf-after--p">Here are some potential use cases for these plugins in an Ionic 4 app</p><ul class="postList"><li name="0db3" class="graf graf--li graf-after--p">Super market app&#8202;—&#8202;QR/barcode scanners can provide product info to users</li><li name="acba" class="graf graf--li graf-after--li">Delivery app&#8202;—&#8202;Barcode scan can track/sign off a package</li><li name="1dce" class="graf graf--li graf-after--li">Quick access to offers&#8202;—&#8202;Scan QR codes and go to a webpage</li><li name="9a27" class="graf graf--li graf-after--li">Web authentication of a mobile app&#8202;—&#8202;Similar to Whatsapp Web</li><li name="1f11" class="graf graf--li graf-after--li">Event app&#8202;—&#8202;Scan tickets or events passes</li></ul><p name="7ed9" class="graf graf--p graf-after--li">…… and many more</p><p name="a384" class="graf graf--p graf-after--p">All this can now be done in Ionic apps, with the latest plugins available in Ionic 4. In this article, we will focus on such plugins.<strong class="markup--strong markup--p-strong"> </strong>Some of these plugins have been around since Ionic 1, and have been changing ever since, and some are new. So here are some of the scan plugins and functionalities you can implement with Ionic 4.</p><h3 name="200b" class="graf graf--h3 graf-after--p">Step 1.1 Barcode&nbsp;Scanner</h3><figure tabindex="0" contenteditable="false" name="0684" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 467px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><img class="graf-image" data-image-id="1*VYiPUHFLY_3GO1Zp6K-ypA.jpeg" data-width="1008" data-height="672" src="https://cdn-images-1.medium.com/max/600/1*VYiPUHFLY_3GO1Zp6K-ypA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="8971" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 321px; max-height: 157px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.9%;"></div><img class="graf-image" data-image-id="1*Bg695WTLw3wGpigcUbqpuQ.png" data-width="321" data-height="157" src="https://cdn-images-1.medium.com/max/600/1*Bg695WTLw3wGpigcUbqpuQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f4f5" class="graf graf--p graf-after--figure">Barcodes and QR codes are widely used for multiple purposes like to add a link where a user doesn’t need to type the whole URL it can be easily scanned from a QR code. Barcodes can also be seen everywhere on the day to day items like eatables clothes etc, we can wimple scan these barcodes to get information like item code date of manufacturing, prices, etc.<br>&nbsp;The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.</p><p name="7def" class="graf graf--p graf-after--p">A barcode is an image consisting of a series of parallel black and white lines that, when scanned, relay information about a product. A barcode is used to automate the transfer of product information, for eg. its price, from the product to an electronic system such as a cash register. Barcodes are traditionally read by optical devices such as a barcode reader or scanner. New advances in technology allow consumers to scan barcodes with their smartphones and tablets using in-built cameras. Now you can do the same with your Ionic 4 app as well.</p><p name="5524" class="graf graf--p graf-after--p">To start using this first you need to create an Ionic 4 project. <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">To create an Ionic 4 project you can follow our tutorial on How to create Ionic 4 app for beginners.</a></p><p name="183d" class="graf graf--p graf-after--p">Then install the following packages by executing this command:-</p><pre name="b78a" class="graf graf--pre graf-after--p">ionic cordova plugin add phonegap-plugin-barcodescanner<br>npm install @ionic-native/barcode-scanner</pre><p name="5afa" class="graf graf--p graf-after--pre">Now import the Barcode module in your projects <code class="markup--code markup--p-code">app.module.ts</code> and then inject it inside the provider, so that you can use it as a dependency injection inside the constructor and access it all over the app components.</p><figure tabindex="0" contenteditable="false" name="7896" 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">##iframe0##</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">app.module.ts</figcaption></figure><h4 name="a63a" class="graf graf--h4 graf-after--figure">Add Button to scan a Barcode and to create a QR&nbsp;code</h4><p name="5866" class="graf graf--p graf-after--h4">Now you are ready to use the Barcode function provided by the Ionic Plugin and get the result. Before this let us make a beautiful view to access the barcode function by clicking a button and getting the data in response.</p><figure tabindex="0" contenteditable="false" name="feb2" 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">##iframe1##</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">home.page.html</figcaption></figure><figure tabindex="0" contenteditable="false" name="5664" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 360px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*fjhhe3tcGJ8Phtksi2YcQw.png" data-width="360" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*fjhhe3tcGJ8Phtksi2YcQw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="d884" class="graf graf--p graf-after--figure">After this, you can simply use the following function to complete a scan process.</p><figure tabindex="0" contenteditable="false" name="624b" 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">##iframe2##</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">home.page.ts</figcaption></figure><p name="1de3" class="graf graf--p graf-after--figure">This function will open the phone’s camera, allow you to scan a barcode, and in result will provide <code class="markup--code markup--p-code">success</code> or <code class="markup--code markup--p-code">error</code>&nbsp;.</p><p name="7719" class="graf graf--p graf-after--p">You can also pass an <code class="markup--code markup--p-code">options</code> object in the <code class="markup--code markup--p-code">scan({options})</code> function. These options are</p><pre name="a4b4" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">preferFrontCamera</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showFlipCameraButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showTorchButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">torchOn</strong>: true, // Android, launch with the torch switched on (if   available)<br><strong class="markup--strong markup--pre-strong">saveHistory</strong>: true, // Android, save scan history (default false)<br><strong class="markup--strong markup--pre-strong">prompt</strong> : "Place a barcode inside the scan area", // Android<br><strong class="markup--strong markup--pre-strong">resultDisplayDuration</strong>: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500<br><strong class="markup--strong markup--pre-strong">formats</strong> : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED<br><strong class="markup--strong markup--pre-strong">orientation</strong> : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device</pre><p name="255f" class="graf graf--p graf-after--pre">This plugin will, of course, require a camera and file saving access on the device, so take care of that as per your device. Since iOS 10 it’s mandatory to add <code class="markup--code markup--p-code">NSCameraUsageDescription</code>&nbsp;.<br><code class="markup--code markup--p-code">NSCameraUsageDescription</code> describes the reason that the app accesses the user's camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box. If you didn't provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don't provide a usage description.</p><p name="a88c" class="graf graf--p graf-after--p">To add this entry you can use the <code class="markup--code markup--p-code">edit-config</code> tag in the <code class="markup--code markup--p-code">config.xml</code> like this:</p><pre name="28f0" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge"&gt;<br>    &lt;string&gt;To scan barcodes&lt;/string&gt;<br>&lt;/edit-config&gt;</code></pre><p name="ecd1" class="graf graf--p graf-after--pre">Let's go and check what we get on clicking on barcode scan button</p><figure tabindex="0" contenteditable="false" name="2b33" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 323px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.2%;"></div><img class="graf-image" data-image-id="1*Ni1nwofw5QPfjs3BnPKS7g.jpeg" data-width="1170" data-height="540" src="https://cdn-images-1.medium.com/max/600/1*Ni1nwofw5QPfjs3BnPKS7g.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Scanning a&nbsp;barcode</figcaption></figure><p name="3a7c" class="graf graf--p graf-after--figure"><a href="https://github.com/mdshadman/QrcodeBarcode"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">You will get a response in return after a successful scan.<br>&nbsp;You can check the whole working Barcode application on my GitHub repo here….</strong></a></p><p name="5a98" class="graf graf--p graf-after--p">When I type in the text field my name <strong class="markup--strong markup--p-strong">shadman</strong> to generate a QR code of my name then the result that I got is amazing….</p><figure tabindex="0" contenteditable="false" name="631e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*jdH5e3ZNxlPZDK-0lYcoOw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*jdH5e3ZNxlPZDK-0lYcoOw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Generated QR&nbsp;code</figcaption></figure><h3 name="d783" class="graf graf--h3 graf-after--figure">Step 1.2 QRCode&nbsp;Scanner</h3><figure tabindex="0" contenteditable="false" name="a50b" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 467px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.8%;"></div><img class="graf-image" data-image-id="1*Np82qM-unfv26ZtN8qsmqw.jpeg" data-width="1050" data-height="701" src="https://cdn-images-1.medium.com/max/600/1*Np82qM-unfv26ZtN8qsmqw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f5a1" class="graf graf--p graf-after--figure">Looks familiar? A Quick Response (QR) Code is a type of barcode that contains a matrix of dots. It can be scanned using a QR scanner or a smartphone with a built-in camera. Once scanned, software on the device converts the dots within the code into numbers or a string of characters. For example, scanning a QR code with your phone might open a URL in your phone’s web browser.</p><p name="bb46" class="graf graf--p graf-after--p">QR codes are able to contain more information than traditional barcodes. And now your Ionic 4 app can scan QR codes very efficiently.</p><p name="9c08" class="graf graf--p graf-after--p">Come let's go to check how a QR Scanner works!</p><p name="f21e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1:- </strong>Install the QR Scanner plugin by executing this command</p><pre name="d251" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-qrscanner<br>npm install @ionic-native/qr-scanner</pre><p name="1224" class="graf graf--p graf-after--pre">Now import the QR Scan module in your <code class="markup--code markup--p-code">app.module.ts</code> as we have done above for Barcode Scanner.</p><h4 name="2d34" class="graf graf--h4 graf-after--p">Add Button to scan a QRCode and to get the&nbsp;result</h4><p name="d865" class="graf graf--p graf-after--h4">Now you are ready to use the QRCode Scanner function provided by the Ionic Plugin and get the result. Before this let us make a beautiful view to access the QRCode function by clicking a button and getting the data in response.</p><figure tabindex="0" contenteditable="false" name="6a9d" 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">##iframe3##</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">QRCode Scanner home.pahe.html</figcaption></figure><p name="f908" class="graf graf--p graf-after--figure">The Result for the above code is:</p><figure tabindex="0" contenteditable="false" name="0ee8" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*zrh-soUJX4Xxx2r4wPC7pA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*zrh-soUJX4Xxx2r4wPC7pA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="bebe" class="graf graf--p graf-after--figure">As we have done before for Barcode, you can simply use the Below function to complete a QR Code scan process.</p><figure tabindex="0" contenteditable="false" name="78fe" 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">##iframe4##</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">QR Code Scanner functions</figcaption></figure><p name="c916" class="graf graf--p graf-after--figure">If camera permission was permanently denied you must use <code class="markup--code markup--p-code">QRScanner.openSettings()</code>method to guide the user to the settings page then they can grant the permission from there.</p><p name="8283" class="graf graf--p graf-after--p">You can use <code class="markup--code markup--p-code">QRScanner.useFrontCamera()</code> to use front-camera for scanning as well.<br>Use <code class="markup--code markup--p-code">pausePreview</code> to pause the scanning while the camera is ON.<br>Use <code class="markup--code markup--p-code">resumePreview</code> to resume the scanning.<br>Use <code class="markup--code markup--p-code">destroy</code> to run <code class="markup--code markup--p-code">hide</code>, <code class="markup--code markup--p-code">cancelScan</code>, stop video capture, remove the video preview, and to deallocate as much as possible.</p><p name="f8ca" class="graf graf--p graf-after--p">For more details, you can visit <a href="https://github.com/bitpay/cordova-plugin-qrscanner"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://github.com/bitpay/cordova-plugin-qrscanner</a></p><p name="327b" class="graf graf--p graf-after--p">Now when you click on the button to scan a QR code the result you will get will be amazingly like the below image but before this, it will prompt you for camera permission.</p><figure tabindex="0" contenteditable="false" name="734b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*GL8SmTYICBQvEkDmAzHWTA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*GL8SmTYICBQvEkDmAzHWTA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Camera permission required</figcaption></figure><figure tabindex="0" contenteditable="false" name="dd2e" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*9f0RExnKmwZ45YaSAUZKwA.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*9f0RExnKmwZ45YaSAUZKwA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Scanning a QR&nbsp;Code</figcaption></figure><p name="6d34" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">The result will be:</strong></p><figure tabindex="0" contenteditable="false" name="ae6b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*e0QC_1cOku1tvOsNVB3SjQ.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/600/1*e0QC_1cOku1tvOsNVB3SjQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">QR Code Scanned&nbsp;output</figcaption></figure><p name="b508" class="graf graf--p graf-after--figure">Here in the result, I have scanned the QR code generated in the barcode tutorial above.<a href="https://github.com/mdshadman/QrcodeBarcode/tree/QRCode"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> <strong class="markup--strong markup--p-strong">You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the plugins here and enjoy 😎 😎 😎 🕺 🕺 🕺..…</strong></a></p><h3 name="5082" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="3058" class="graf graf--p graf-after--h3">In this post, we learned how to integrate Barcode scanner and QR Code scanner and how to generate your own QR Code using <code class="markup--code markup--p-code">phonegap-plugin-barcodescanner</code> in Ionic 4 apps. Since both the plugins are amazingly light and have great documentation, it is developers’ first choice when it comes to creating QR code or Scanning a barcode or QR Code.</p><h4 name="1b97" class="graf graf--h4 graf-after--p">Complete source code of this tutorial is available here&#8202;—&#8202;<a href="https://github.com/mdshadman/QrcodeBarcode"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Ionic 4 QRcodeBarcode</a></h4><h3 name="16b3" class="graf graf--h3 graf-after--h4">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of <code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">phonegap-plugin-barcodescanner and cordova-plugin-qrscanner</strong></code> in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/600/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a4ee" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>