How to integrate Razorpay in Ionic 4 apps and PWA
Tags: ionic, payment, razorpay, business
Published: 2019-09-19 18:18:13

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_94" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="55c7" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="0800" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Razorpay</strong> is a payments company that provides payment solutions to online merchants in India. Razorpay was founded in 2014 in our own city of Jaipur 😃. They were part of the winter batch of Y Combinator’s startup program in 2015. Razorpay allows online businesses to accept, process and disburse digital payments through several payment modes like debit cards, credit cards, net banking, UPI and prepaid digital wallets. Razorpay payment solutions can be integrated by both web and mobile applications.</p><blockquote name="0168" class="graf graf--pullquote graf-after--p">Razorpay currently works only for businesses in India, but that doesn’t make it small. Functionality and developer friendliness-wise Razorpay can be called Stripe of&nbsp;India.</blockquote><p name="53b6" class="graf graf--p graf-after--pullquote is-selected">Do not confusion India-only business with single currency payments. Razorpay accepts payments in almost all currencies.</p><h3 name="2ac0" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="de54" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="f8fe" class="graf graf--h3 graf-after--p">Ionic 4 and Payment&nbsp;Gateways</h3><p name="b85f" class="graf graf--p graf-after--h3">Ionic 4 can create a wide variety of apps, and hence a wide variety of payment gateways can be implemented in Ionic 4 apps. The popular ones are PayPal, Stripe, Razorpay, Braintree, in-app purchase etc. For more details on payment gateways, you can read my overview blog on <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment Gateway Solutions in Ionic 4</a> or detailed blogs on <a href="https://medium.com/enappd/paypal-integration-in-ionic-4-for-apps-and-pwa-ffeeb2b00b49"  class="markup--anchor markup--p-anchor"    target="_blank">PayPal</a> and <a href="https://medium.com/enappd/integrating-stripe-payment-in-ionic-4-for-apps-and-pwa-de05142c523e"  class="markup--anchor markup--p-anchor"    target="_blank">Stripe</a>.</p><p name="7a41" class="graf graf--p graf-after--p">Razorpay 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 Razorpay payment gateway in Ionic 4 apps and Ionic 4 PWA.</strong></p><figure tabindex="0" contenteditable="false" name="4376" 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*-LJPvKrClQXYvosFqtLT0Q.jpeg" data-width="800" data-height="320" src="https://cdn-images-1.medium.com/max/800/1*-LJPvKrClQXYvosFqtLT0Q.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 Razorpay make a great&nbsp;team</figcaption></figure><h3 name="c73c" class="graf graf--h3 graf-after--figure">Razorpay Integration Methods</h3><p name="d761" class="graf graf--p graf-after--h3">Razorpay follows a standard payment flow, similar to Stripe</p><figure tabindex="0" contenteditable="false" name="5857" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 567px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 81.10000000000001%;"></div><img class="graf-image" data-image-id="1*F4_Qm4fjKl4M6_wvtRjzMQ.png" data-width="2154" data-height="1746" src="https://cdn-images-1.medium.com/max/800/1*F4_Qm4fjKl4M6_wvtRjzMQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay payments&nbsp;flow</figcaption></figure><p name="ec8f" class="graf graf--p graf-after--figure">Before you start integrating with our products, you might want to consider the available integration paths:</p><ol class="postList"><li name="603d" class="graf graf--li graf-after--p"><a href="https://razorpay.com/docs/payment-gateway/integrations-guide/checkout"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Integrate with the Checkout</a></li></ol><p name="1af4" class="graf graf--p graf-after--li">Most popular method in websites. This is similar to PayPal Payment button which pops up an auto-generated form and takes care of validations etc itself.</p><figure tabindex="0" contenteditable="false" name="bf6b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*rj5BzlLTWUMlhYiTPXmSwA.gif" data-width="960" data-height="540" src="https://cdn-images-1.medium.com/max/800/1*rj5BzlLTWUMlhYiTPXmSwA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Checkout&nbsp;flow</figcaption></figure><p name="18bc" class="graf graf--p graf-after--figure"><a href="https://razorpay.com/docs/payment-gateway/integrations-guide/mobile"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">2. Integrate with mobile apps</a>&#8202;—&#8202;Using standard SDKs</p><p name="3e3b" class="graf graf--p graf-after--p"><a href="https://razorpay.com/docs/payment-gateway/integrations-guide/s2s"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">3. Integrate with Razorpay APIs</a></p><p name="72be" class="graf graf--p graf-after--p">This needs to be enabled in your Razorpay account specifically. This is essentially server-to-server payment communication.</p><p name="52db" class="graf graf--p graf-after--p"><a href="https://razorpay.com/docs/ecommerce-plugins"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">4. Integrate with the Plugins</a>&#8202;—&#8202;Various plugins are available for Woocommerce, Magento, Wix etc.</p><p name="cdce" class="graf graf--p graf-after--p">Integrating Razorpay in Ionic 4 apps is very simple and straightforward. It makes use of <a href="https://github.com/razorpay/razorpay-cordova"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">razorpay-cordova-plugin</strong></a>, and it works in both Apps and PWA.</p><p name="1af3" class="graf graf--p graf-after--p">Let’s start step-by-step</p><blockquote name="48b3" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ionic4-razorpay.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic4-razorpay Github repository.</a></blockquote><h3 name="9f9e" class="graf graf--h3 graf-after--blockquote">Prerequisites</h3><ul class="postList"><li name="7a7d" class="graf graf--li graf-after--h3">Create an Ionic 4 app for Razorpay integration</li><li name="7ca8" class="graf graf--li graf-after--li">Razorpay Developer account for API keys</li></ul><h4 name="9226" class="graf graf--h4 graf-after--li">Create a basic Ionic 4&nbsp;app</h4><p name="2497" class="graf graf--p graf-after--h4">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="ac95" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 377px; max-height: 669px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.5%;"></div><img class="graf-image" data-image-id="1*J1oEmh_NgdWsq3KXd39eJA.png" data-width="377" data-height="669" src="https://cdn-images-1.medium.com/max/800/1*J1oEmh_NgdWsq3KXd39eJA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay payment home&nbsp;page</figcaption></figure><p name="cf5c" class="graf graf--p graf-after--figure">The file structure looks something like this, just for an idea</p><figure tabindex="0" contenteditable="false" name="f889" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 326px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 163.5%;"></div><img class="graf-image" data-image-id="1*bZtct7iRuxf-xzvy_i0bhQ.png" data-width="326" data-height="533" src="https://cdn-images-1.medium.com/max/800/1*bZtct7iRuxf-xzvy_i0bhQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">File structure for Razorpay Ionic 4 sample&nbsp;app</figcaption></figure><p name="cf0e" class="graf graf--p graf-after--figure">The main functional part of this HTML is nothing but the payment button you see above, which invokes <code class="markup--code markup--p-code">payWithRazor()</code> function in the <code class="markup--code markup--p-code">razor.page.ts</code> file. The HTML looks as following</p><figure tabindex="0" contenteditable="false" name="8d01" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0d29754fe486559fbfa39d43d052e380.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Razorpay implementation HTML</figcaption></figure><h4 name="8c20" class="graf graf--h4 graf-after--figure">Razorpay Developer Account</h4><p name="286d" class="graf graf--p graf-after--h4">Visit <a href="http://razorpay.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">razorpay.com</a> and create an account. Razorpay payment services are currently available only for business in India.</p><p name="dd88" class="graf graf--p graf-after--p">Once you are inside Razorpay Dashboard, look for the <strong class="markup--strong markup--p-strong">Settings</strong> Tab -&gt; API keys.</p><figure tabindex="0" contenteditable="false" name="fdd0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 388px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.50000000000001%;"></div><img class="graf-image" data-image-id="1*P5nV9vT5eC4QfILTd6hkGQ.png" data-width="1388" data-height="770" src="https://cdn-images-1.medium.com/max/800/1*P5nV9vT5eC4QfILTd6hkGQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay API keys in Dashboard</figcaption></figure><p name="9cad" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Key Id </strong>is what you use for connecting the Razorpay SDK in front-end. <strong class="markup--strong markup--p-strong">Key</strong> <strong class="markup--strong markup--p-strong">Secret </strong>is used in the back-end, and is only shown once to you when generated. You should save these values in a safe place, or you can always generate again.</p><p name="2be9" class="graf graf--p graf-after--p">That’s all you need from Razorpay account, for now. You can toggle the <strong class="markup--strong markup--p-strong">Live keys </strong>and use them instead, once you have tested the process.</p><p name="af20" class="graf graf--p graf-after--p">Let’s look into the Ionic 4 integration of Razorpay now.</p><h3 name="a88d" class="graf graf--h3 graf-after--p">Integrate Razorpay plugin in Ionic 4&nbsp;PWA</h3><p name="d03e" class="graf graf--p graf-after--h3">To include Razorpay functionality in your Ionic 4 app, you need to install Razorpay plugin. Install the plugin with following commands</p><pre name="f768" class="graf graf--pre graf-after--p">$ cordova plugin add com.razorpay.cordova --save</pre><p name="13ee" class="graf graf--p graf-after--pre">After installation completes, import Razorpay variable in your <code class="markup--code markup--p-code">razor.page.ts</code></p><figure tabindex="0" contenteditable="false" name="12e7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 697px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.9%;"></div><img class="graf-image" data-image-id="1*PZVbdk_6wlOO-vDr0KNMxg.png" data-width="697" data-height="313" src="https://cdn-images-1.medium.com/max/800/1*PZVbdk_6wlOO-vDr0KNMxg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Decalre RazorPay variable in TS&nbsp;file</figcaption></figure><p name="5755" class="graf graf--p graf-after--figure">Now, using the Razorpay payments is really easy. The payment function looks like the following</p><figure tabindex="0" contenteditable="false" name="2108" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/9a0d9d1ea374ec641fbf905a090c0096.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Razorpay payment function</figcaption></figure><p name="5736" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">RazorpayCheckout.open</code> connects Razorpay SDK using your Key Id.</p><p name="26bc" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">successCallback</code> and <code class="markup--code markup--p-code">cancelCallback</code> are called on successful and failed payment respectively.</p><p name="6179" class="graf graf--p graf-after--p">Note that the <code class="markup--code markup--p-code">prefill</code> details are optional, and can be provided at the checkout modal as well. This is a way to provide better UX to user if you have obtained the email / phone earlier in the app somewhere.</p><p name="16a6" class="graf graf--p graf-after--p">Since Razorpay plugin works for both mobile app and PWA, we can create a browser platform for the app to test the functionality</p><pre name="4355" class="graf graf--pre graf-after--p">$ ionic cordova platform add browser</pre><p name="458e" class="graf graf--p graf-after--pre">Once the platform is added, run</p><pre name="b13e" class="graf graf--pre graf-after--p">$ ionic cordova run browser</pre><p name="8543" class="graf graf--p graf-after--pre">and you can test the implementation of Razorpay plugin in PWA.</p><p name="3d3d" class="graf graf--p graf-after--p">On calling the <code class="markup--code markup--p-code">RazorpayCheckout.open</code> function, Razorpay’s auto-payment modal pops up and takes over the flow</p><figure tabindex="0" contenteditable="false" name="2afe" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 565px; max-height: 767px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 135.8%;"></div><img class="graf-image" data-image-id="1*4ax7P0h4OugLgBdOjcl8Jw.png" data-width="565" data-height="767" src="https://cdn-images-1.medium.com/max/800/1*4ax7P0h4OugLgBdOjcl8Jw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 1&#8202;—&#8202;Confirming User&nbsp;info</figcaption></figure><figure tabindex="0" contenteditable="false" name="7f21" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 564px; max-height: 767px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 136%;"></div><img class="graf-image" data-image-id="1*jgPHtkwTBeEe2OkRHBJFcA.png" data-width="564" data-height="767" src="https://cdn-images-1.medium.com/max/800/1*jgPHtkwTBeEe2OkRHBJFcA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 2&#8202;—&#8202;Collect Card&nbsp;info</figcaption></figure><p name="f8c5" class="graf graf--p graf-after--figure">Here, we have used a test card for Razorpay. 🤓 As you proceed, you get a Razorpay modal that allows you to create a successful payment or a failed payment, to test both. Note that this popup will not come in <strong class="markup--strong markup--p-strong">LIVE</strong> flow</p><figure tabindex="0" contenteditable="false" name="a486" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 327px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.7%;"></div><img class="graf-image" data-image-id="1*3vt4T1oya3wy1oBQ0D3CNQ.png" data-width="898" data-height="419" src="https://cdn-images-1.medium.com/max/800/1*3vt4T1oya3wy1oBQ0D3CNQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 3&#8202;—&#8202;Make a payment successful or&nbsp;failed</figcaption></figure><figure tabindex="0" contenteditable="false" name="12c8" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 194px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 27.700000000000003%;"></div><img class="graf-image" data-image-id="1*5xWkCm-fCpxQMPSEOjXXEg.png" data-width="822" data-height="228" src="https://cdn-images-1.medium.com/max/800/1*5xWkCm-fCpxQMPSEOjXXEg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 4&#8202;—&#8202;Successful payment returns Payment&nbsp;ID</figcaption></figure><h3 name="cbd1" class="graf graf--h3 graf-after--figure">Razorpay integration in Ionic 4 mobile&nbsp;app</h3><p name="cab6" class="graf graf--p graf-after--h3">The integration of Razorpay plugin in Ionic4 mobile app is exactly similar to the one done above. Instead of creating a <code class="markup--code markup--p-code">browser</code> platform, you can create an android platform, for example</p><pre name="6e47" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="e0e9" class="graf graf--p graf-after--pre">And then run the app on a device or emulator</p><pre name="da3e" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="5653" class="graf graf--p graf-after--pre">The payment flow goes similar to PWA, as shown in following screenshots from an Android device</p><figure tabindex="0" contenteditable="false" name="0568" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*HEEdLM8EtivUo1M9joJdHA.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*HEEdLM8EtivUo1M9joJdHA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 1&#8202;—&#8202;Confirming User&nbsp;info</figcaption></figure><figure tabindex="0" contenteditable="false" name="942b" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*b6v3aPx9zfOhZI-qA_5Y5Q.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*b6v3aPx9zfOhZI-qA_5Y5Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 2&#8202;—&#8202;Collect Card&nbsp;info</figcaption></figure><figure tabindex="0" contenteditable="false" name="e16d" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*ASlF5dkCcPkt_ezXK_GoyA.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*ASlF5dkCcPkt_ezXK_GoyA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 3&#8202;—&#8202;Make a payment successful or&nbsp;failed</figcaption></figure><figure tabindex="0" contenteditable="false" name="f96a" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*akC_phXDqvAuiR5sG4RA9Q.png" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*akC_phXDqvAuiR5sG4RA9Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Razorpay Payment modal- Step 4&#8202;—&#8202;Successful payment returns Payment&nbsp;ID</figcaption></figure><p name="5cfa" class="graf graf--p graf-after--figure">For iOS, please note the following</p><ul class="postList"><li name="9f82" class="graf graf--li graf-after--p">The plugin no longer supports Swift 3&nbsp;, moving forward only the latest version of our swift is supported.</li><li name="96e6" class="graf graf--li graf-after--li">Current release is meant for Xcode 10 and above as it uses a framework compiled in Swift 4.2. Also make sure that you set <em class="markup--em markup--li-em">Always Embed Swift Standard Libraries</em> of your main target to <strong class="markup--strong markup--li-strong">Yes</strong>.</li><li name="b619" class="graf graf--li graf-after--li">The iOS framework is shipped with simulator architectures&nbsp;, you have to remove them before you archive, just google <em class="markup--em markup--li-em">stripping simulator architectures</em> and follow the steps. Also remember to <em class="markup--em markup--li-em">Enable bitcode</em> on both your iOS project as well as the RazorpayCheckout project.</li><li name="0c11" class="graf graf--li graf-after--li">Please add this line to the top of your Main.m file</li></ul><pre name="57ae" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code"># import &lt;Razorpay/Razorpay-Swift.h&gt;</code></pre><h3 name="0da6" class="graf graf--h3 graf-after--pre">Conclusion</h3><p name="0aa2" class="graf graf--p graf-after--h3">Razorpay is a relatively simpler Payment gateway to implement in Ionic 4 apps. A simple plugin integration allows you to create payments from the front-end itself. However, you can always go for a more sophisticated payment flow implementation using Orders API&nbsp;.</p><blockquote name="2e66" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ionic4-razorpay.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic4-razorpay Github repository.</a></blockquote><p name="8331" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Stay tuned for more Ionic 4 blogs&nbsp;!</strong></p><h3 name="1681" class="graf graf--h3 graf-after--p">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="178a" class="graf graf--p graf-after--h3">Check out my other post on</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="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="noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li></ul><p name="95a9" class="graf graf--p graf-after--li">Also check out our other blog posts related to</p><ul class="postList"><li name="ffb9" class="graf graf--li graf-after--p"><a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--li-anchor"    target="_blank">Firebase in Ionic 4</a>,</li><li name="a417" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4,</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><h3 name="362a" class="graf graf--h3 graf-after--li">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--li-anchor"    target="_blank">Free Ionic 4&#8202;—&#8202;Phaser game framework integration</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3 graf--trailing"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>