Payment Gateway Solutions in Ionic 4 - Paypal, Apple Pay, Stripe and others
Tags: ionic, applepay, stripe, paypal
Published: 2019-09-10 14:19:43

<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="0854" 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"><blockquote name="286f" class="graf graf--blockquote graf-after--figure">A reliable payment plugin requirement is indispensable for selling your products or services through your app. Ionic payment plugins come with several different features and capabilities. You need to choose the one that best suits your business needs and seamlessly integrates with your site. Let’s take a look at the best Ionic payment plugins you can use on your app:</blockquote><h3 name="5a56" class="graf graf--h3 graf-after--blockquote">1. Apple&nbsp;Pay</h3><figure tabindex="0" contenteditable="false" name="ccfe" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 414px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.099999999999994%;"></div><img class="graf-image" data-image-id="1*qDrqoUcmT-Bdcc4lhsN0zw.png" data-width="1238" data-height="732" src="https://cdn-images-1.medium.com/max/720/1*qDrqoUcmT-Bdcc4lhsN0zw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Apple Pay</figcaption></figure><p name="e806" class="graf graf--p graf-after--figure is-selected"><strong class="markup--strong markup--p-strong">Apple Pay</strong> is a mobile payment and digital wallet service by Apple Inc. that allows users to make payments in person, in iOS apps, and on the web. The service is supported on iPhone 6 and newer, iPad Air 2 and newer, Macs with Touch ID, and all Apple Watches. Users with the iPhone 5 and 5C can use the service through an Apple Watch.</p><p name="d2b3" class="graf graf--p graf-after--p">To use <strong class="markup--strong markup--p-strong">Apple Pay</strong>, you need to install the plugin using following commands</p><pre name="ba03" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-applepay</pre><pre name="8b62" class="graf graf--pre graf-after--pre">npm install @ionic-native/apple-pay</pre><p name="fc71" class="graf graf--p graf-after--pre">After installing the plugin, you can use following code-piece to implement the <strong class="markup--strong markup--p-strong">Apple Pay</strong> (code for Ionic 4)</p><pre name="5805" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">// import ApplePay in the component<br>import { ApplePay } from '@ionic-native/apple-pay/ngx';<br><br></code></pre><pre name="0a0e" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private applePay: ApplePay) { }<br><br></code></pre><pre name="4abb" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">async applePay() {<br>  <br>  try {<br>    const applePayTransaction = await this.applePay.makePaymentRequest({<br>      items,<br>      shippingMethods,<br>      merchantIdentifier,<br>      currencyCode,<br>      countryCode,<br>      billingAddressRequirement: ['name', 'email', 'phone'],<br>      shippingAddressRequirement: 'none',<br>      shippingType: 'shipping'<br>    });</code></pre><pre name="8de0" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">    const transactionStatus = await completeTransactionWithMerchant(applePayTransaction);<br>    await this.applePay.completeLastTransaction(transactionStatus);<br>  } catch {<br>    // handle payment request error<br>  }</code></pre><pre name="410a" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">}</code></pre><p name="00ea" class="graf graf--p graf-after--pre">To build the app with <strong class="markup--strong markup--p-strong">Apple Pay</strong> for App store release, you need to enable <code class="markup--code markup--p-code">Apple Pay</code> in XCode <code class="markup--code markup--p-code">capabilities</code> tab. You can find more details <a href="https://developer.apple.com/documentation/passkit/apple_pay/setting_up_apple_pay_requirements"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a></p><figure tabindex="0" contenteditable="false" name="94dd" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 360px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.4%;"></div><img class="graf-image" data-image-id="1*eXotyVwsfMKNrHam9k90SQ.png" data-width="1921" data-height="988" src="https://cdn-images-1.medium.com/max/720/1*eXotyVwsfMKNrHam9k90SQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="7753" class="graf graf--h3 graf-after--figure">2. Apple&nbsp;Wallet</h3><figure tabindex="0" contenteditable="false" name="543c" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 640px; max-height: 421px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 65.8%;"></div><img class="graf-image" data-image-id="1*aVwZ5npUWr2EztcUmKKnUQ.jpeg" data-width="640" data-height="421" src="https://cdn-images-1.medium.com/max/720/1*aVwZ5npUWr2EztcUmKKnUQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4145" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Apple Wallet</strong> is a mobile app included with the iOS operating system that allows users to store <em class="markup--em markup--p-em">Wallet-passes</em>, meaning coupons, boarding passes, student ID cards, event tickets, movie tickets, public transportation tickets, store cards, (and starting with iOS 8.1) credit cards, debit cards, prepaid cards, and loyalty cards via Apple Pay.</p><p name="46ad" class="graf graf--p graf-after--p">To add <strong class="markup--strong markup--p-strong">Apple Wallet</strong> plugin, use following commands</p><pre name="b70d" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-apple-wallet</pre><pre name="cfa0" class="graf graf--pre graf-after--pre">npm install @ionic-native/apple-wallet</pre><p name="ec7b" class="graf graf--p graf-after--pre">Import the installed plugin with</p><pre name="9857" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { AppleWallet } from '@ionic-native/apple-wallet/ngx';</code></pre><p name="7637" class="graf graf--p graf-after--pre">Check if <strong class="markup--strong markup--p-strong">Apple Wallet</strong> is available</p><pre name="c836" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.appleWallet.available()<br> .then((status) =&gt; {<br>   // status is a boolean value, either true or false<br>   console.log("Is Apple Wallet available? ", status);<br>  })<br> .catch((message) =&gt; {<br>   console.error("ERROR &gt;&gt; ", message);<br> });</code></pre><p name="738a" class="graf graf--p graf-after--pre">Start adding a card using this method</p><pre name="bb43" class="graf graf--pre graf-after--p">let data = {<br>      cardholderName: 'Test User',<br>      primaryAccountNumberSuffix: '1234',<br>      localizedDescription: 'Description of payment card',<br>      paymentNetwork: 'VISA'<br>    }<br>    AppleWallet.startAddPaymentPass(data)<br>    .then((res) =&gt; {<br>    /**<br>     * User proceed and successfully asked to add card to his wallet<br>     * Use the callback response JSON payload to complete addition process<br>     * Expect<br>     * res = {<br>     *   "certificateSubCA":"Base64 string represents certificateSubCA",<br>     *   "certificateLeaf":"Base64 string represents certificateLeaf"<br>     *   "nonce":"Base64 string represents nonce",<br>     *   "nonceSignature":"Base64 string represents nonceSignature",<br>     * }<br>     */<br>    })<br>    .catch((err) =&gt; {<br>      // Error or user cancelled.<br>    });</pre><p name="a02e" class="graf graf--p graf-after--pre">And complete the card addition, taking a callback from above function</p><pre name="1baa" class="graf graf--pre graf-after--p">let encryptedData = {<br>        activationData: "encoded Base64 activationData ",<br>        encryptedPassData: "encoded Base64 encryptedPassData ",<br>        wrappedKey: "encoded Base64 wrappedKey"<br>    }<br>    AppleWallet.completeAddPaymentPass(encryptedData)<br>    .then((res) =&gt; {<br>      // A success callback response means card has been added successfully<br>    })<br>    .catch((err) =&gt; {<br>      // Error and can not add the card<br>    });</pre><p name="e9c4" class="graf graf--p graf-after--pre">For more information, please check Apple Developer documentation from <a href="https://developer.apple.com/documentation/passkit/pkaddpaymentpassviewcontrollerdelegate/1615915-addpaymentpassviewcontroller?language=objc"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">here</a>.</p><h3 name="b9e8" class="graf graf--h3 graf-after--p">3. PayPal</h3><figure tabindex="0" contenteditable="false" name="8eb7" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*yL8zhtRzdA_CQGsJtvavsw.jpeg" data-width="700" data-height="350" src="https://cdn-images-1.medium.com/max/720/1*yL8zhtRzdA_CQGsJtvavsw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><blockquote name="7c62" class="graf graf--blockquote graf-after--figure">For details of Paypal integration in Ionic 4, read our blog&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">IONIC 4 PAYPAL PAYMENT INTEGRATION</a></blockquote><p name="9ee6" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">PayPal Holdings, Inc.</strong> is an American company operating a worldwide online payments system that supports online money transfers and serves as an electronic alternative to traditional paper methods like checks and money orders. The company operates as a payment processor for online vendors, auction sites, and many other commercial users, for which it charges a fee in exchange for benefits such as one-click transactions and password memory.</p><p name="6c60" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Paypal</strong> is one of the biggest and most popular payment gateway for mobile and web-apps. Good news is&#8202;—&#8202;it can be used for both iOS and Android. To install <strong class="markup--strong markup--p-strong">Paypal</strong> plugin for Ionic, use</p><pre name="7a9e" class="graf graf--pre graf-after--p">ionic cordova plugin add com.paypal.cordova.mobilesdk</pre><pre name="37b3" class="graf graf--pre graf-after--pre">npm install @ionic-native/paypal</pre><p name="ff0d" class="graf graf--p graf-after--pre">Import <strong class="markup--strong markup--p-strong">Paypal</strong> into your component using</p><pre name="a54c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';</code></pre><p name="2c45" class="graf graf--p graf-after--pre">Use the following command to initiate a payment. You will require you <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"    target="_blank">How to get my credentials from Paypal account</a>)</p><pre name="cdf9" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.payPal.init({<br>  PayPalEnvironmentProduction: 'YOUR_PRODUCTION_CLIENT_ID',<br>  PayPalEnvironmentSandbox: 'YOUR_SANDBOX_CLIENT_ID'<br>}).then(() =&gt; {<br>  // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction<br>  this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({<br>    // Only needed if you get an "Internal Service Error" after PayPal login!<br>    //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal<br>  })).then(() =&gt; {<br>    let payment = new PayPalPayment('3.33', 'USD', 'Description', 'sale');<br>    this.payPal.renderSinglePaymentUI(payment).then(() =&gt; {<br>      // Successfully paid<br>    }, () =&gt; {<br>      // Error or render dialog closed without being successful<br>    });<br>  }, () =&gt; {<br>    // Error in configuration<br>  });<br>}, () =&gt; {<br>  // Error in initialization, maybe PayPal isn't supported or something else<br>});</code></pre><p name="ef7c" class="graf graf--p graf-after--pre">A sample sandbox response will look like</p><pre name="ce00" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">// Example sandbox response<br>      <br>      {<br>        "client": {<br>          "environment": "sandbox",<br>          "product_name": "PayPal iOS SDK",<br>          "paypal_sdk_version": "2.16.0",<br>          "platform": "iOS"<br>        },<br>        "response_type": "payment",<br>        "response": {<br>          "id": "PAY-1AB23456CD789012EF34GHIJ",<br>          "state": "approved",<br>          "create_time": "2016-10-03T13:33:33Z",<br>          "intent": "sale"<br>        }<br>      }</code></pre><blockquote name="dc10" class="graf graf--blockquote graf-after--pre">For details of Paypal integration in Ionic 4, read our blog&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">IONIC 4 PAYPAL PAYMENT INTEGRATION</a></blockquote><h3 name="26b0" class="graf graf--h3 graf-after--blockquote">4. Stripe</h3><figure tabindex="0" contenteditable="false" name="b656" class="graf graf--figure graf-after--h3 is-defaultValue"><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*FA5NViMoZiFR0a3cjIA9VA.jpeg" data-width="1000" data-height="448" src="https://cdn-images-1.medium.com/max/720/1*FA5NViMoZiFR0a3cjIA9VA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><blockquote name="4fab" class="graf graf--blockquote graf-after--figure">For details of Stripe integration in Ionic 4, read our blog&#8202;—&#8202;<a href="https://medium.com/enappd/integrating-stripe-payment-in-ionic-4-for-apps-and-pwa-de05142c523e"  class="markup--anchor markup--blockquote-anchor"    target="_blank">Ionic 4 Stripe Payment Integration</a></blockquote><p name="330d" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Stripe</strong> is a technology company. Its software allows individuals and businesses to receive payments over the Internet. Stripe provides the technical, fraud prevention, and banking infrastructure required to operate on-line payment systems.</p><p name="9584" class="graf graf--p graf-after--p">Stripe is the fastest growing payment solution around the world. It is quickly surpassing the popularity of Paypal etc. in the mobile and web payment domains.</p><p name="943b" class="graf graf--p graf-after--p">Stripe can be used on both iOS and Androi, as well as in an Ionic PWA&nbsp;!</p><p name="9fdf" class="graf graf--p graf-after--p">Install <strong class="markup--strong markup--p-strong">Stripe</strong> using following commands</p><pre name="5496" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-stripe</pre><pre name="8a57" class="graf graf--pre graf-after--pre">npm install @ionic-native/stripe</pre><p name="69dd" class="graf graf--p graf-after--pre">First we need to set our import <strong class="markup--strong markup--p-strong">Stripe</strong> in the component. Then set our publishable key from <strong class="markup--strong markup--p-strong">Stripe</strong> account. This can be your test or live key.</p><pre name="7ba3" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Stripe } from '@ionic-native/stripe/ngx';</code></pre><pre name="2c66" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private stripe: Stripe) { }<br><br></code></pre><pre name="e621" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">this.stripe.setPublishableKey('my_publishable_key');</code></pre><pre name="3783" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">let card = {<br> number: '4242424242424242',<br> expMonth: 12,<br> expYear: 2020,<br> cvc: '220'<br>}</code></pre><pre name="c524" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">this.stripe.createCardToken(card)<br>   .then(token =&gt; console.log(token.id))<br>   .catch(error =&gt; console.error(error));</code></pre><p name="cb52" class="graf graf--p graf-after--pre">Once we get a token from Stripe, we can use this token on our back-end to charge the customer. Stripe integration does not require any special capabilities in XCode.</p><h3 name="b2c2" class="graf graf--h3 graf-after--p">5. Braintree</h3><figure tabindex="0" contenteditable="false" name="193e" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 300px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*HgyOc8zcSsemC3wIsJ7_Nw.png" data-width="600" data-height="300" src="https://cdn-images-1.medium.com/max/720/1*HgyOc8zcSsemC3wIsJ7_Nw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="5f90" class="graf graf--p graf-after--figure">Braintree provide the global commerce tools people need to build businesses, accept payments, and enable commerce for their users. It’s a payment processor acquired by PayPal, which emphasizes “simple, robust way to accept payments”, and with features like a drop-in payment UI. It is a good choice for accepting payments via credit card, PayPal, Venmo and Apple Pay.</p><p name="6494" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Braintree</strong> plugin is available for Ionic apps. This plugin enables the use of the <strong class="markup--strong markup--p-strong">Braintree</strong> Drop-In Payments UI in your Ionic applications on Android and iOS, using the native Drop-In UI for each platform (not the Javascript SDK).</p><p name="4dfc" class="graf graf--p graf-after--p">You can install <strong class="markup--strong markup--p-strong">Braintree</strong> plugin using</p><pre name="d622" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-braintree</pre><pre name="a014" class="graf graf--pre graf-after--pre">npm install @ionic-native/braintree</pre><p name="94e8" class="graf graf--p graf-after--pre">To use this, you need to import <strong class="markup--strong markup--p-strong">Braintree</strong> in the component. Then you will need your Braintree `Tokenization Key` from the Braintree dashboard. Alternatively you can also generate this token server-side using a client ID in order to allow users to use stored payment methods. See the <a href="https://developers.braintreepayments.com/reference/request/client-token/generate/node#customer_id"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Braintree Client Token documentation</a> for details.</p><pre name="5759" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Braintree, ApplePayOptions, PaymentUIOptions } from '@ionic-native/braintree/ngx';</code></pre><pre name="7135" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private braintree: Braintree) { }<br><br></code></pre><pre name="f5bf" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const BRAINTREE_TOKEN = '&lt;YOUR_BRAINTREE_TOKEN&gt;';</code></pre><pre name="2994" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">// NOTE: Do not provide this unless you have configured your Apple Developer account<br>// as well as your Braintree merchant account, otherwise the Braintree module will fail.<br>const appleOptions: ApplePayOptions = {<br>  merchantId: '&lt;YOUR MERCHANT ID&gt;',<br>  currency: 'USD',<br>  country: 'US'<br>}</code></pre><pre name="48a1" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const paymentOptions: PaymentUIOptions = {<br>  amount: '14.99',<br>  primaryDescription: 'Your product or service (per /item, /month, /week, etc)',<br>}</code></pre><pre name="f9cb" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">this.braintree.initialize(BRAINTREE_TOKEN)<br>  .then(() =&gt; this.braintree.setupApplePay(appleOptions))<br>  .then(() =&gt; this.braintree.presentDropInPaymentUI(paymentOptions))<br>  .then((result: PaymentUIResult) =&gt; {<br>    if (result.userCancelled) {<br>      console.log("User cancelled payment dialog.");<br>    } else {<br>      console.log("User successfully completed payment!");<br>      console.log("Payment Nonce: " + result.nonce);<br>      console.log("Payment Result.", result);<br>    }<br>  })<br>  .catch((error: string) =&gt; console.error(error));</code></pre><h3 name="29f3" class="graf graf--h3 graf-after--pre">6. Alipay</h3><figure tabindex="0" contenteditable="false" name="ddcd" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.9%;"></div><img class="graf-image" data-image-id="1*zLXzqD-_VtHH7llHemQjFQ.jpeg" data-width="950" data-height="598" src="https://cdn-images-1.medium.com/max/720/1*zLXzqD-_VtHH7llHemQjFQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Selfie for&nbsp;payments</figcaption></figure><p name="bc56" class="graf graf--p graf-after--figure">Alipay is a very popular payment option in Asia and part of the Alibaba group. It’s a payment option that works like many other “eWallet” services, where you add payment methods (cards or bank accounts) to your Alipay account, and can then process orders using them.</p><p name="41f9" class="graf graf--p graf-after--p">To install Alipay, use the following commands</p><pre name="ac3c" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-gubnoi-alipay</pre><pre name="4c91" class="graf graf--pre graf-after--pre">npm install @ionic-native/alipay</pre><p name="8aa2" class="graf graf--p graf-after--pre">Then we need to import <strong class="markup--strong markup--p-strong">Alipay</strong> in the component.</p><pre name="37b7" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Alipay } from '@ionic-native/alipay/ngx';</code></pre><pre name="b464" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private alipay: Alipay) {</code></pre><pre name="607b" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">//alipayOrder is a string that has been generated and signed by the server side.<br>this.alipay.pay(alipayOrder)<br>   .then(result =&gt; {<br>      console.log(result); // Success<br>   })<br>   .catch(error =&gt; {<br>      console.log(error); // Failed<br>   });<br>}</code></pre><p name="bf54" class="graf graf--p graf-after--pre">More details can be found at&#8202;—&#8202;<a href="https://docs.open.alipay.com/204/105465/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener" target="_blank">https://docs.open.alipay.com/204/105465/</a></p><h3 name="70b2" class="graf graf--h3 graf-after--p">Conclusion:</h3><p name="a310" class="graf graf--p graf-after--h3">We got to know in quick fashion about the top rated payment solutions available in the market. Main code snippets for integration of these plugins are shared right in the blogpost for reference. This will give a boost to your understanding and saves time.</p><p name="c0a8" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">This blog was originally published on </em><a href="https://enappd.com/blog/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--p-em">Enappd</em></a><em class="markup--em markup--p-em">.</em></p><h3 name="f390" class="graf graf--h3 graf-after--p">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="95a9" class="graf graf--p graf-after--h3">Also check out our other blog posts related to <a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--p-anchor"    target="_blank">Firebase in Ionic 4</a>, <a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--p-anchor"    target="_blank">Geolocation</a> in Ionic 4, <a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--p-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment gateways in Ionic 4</a></p><p name="ed14" class="graf graf--p graf-after--p">Also check out this interesting post on <a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--p-anchor"    target="_blank">How to create games in Ionic 4 with Phaser</a></p><h3 name="362a" class="graf graf--h3 graf-after--p">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    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"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Ionic 4&#8202;—&#8202;Firebase Starter</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"    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"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>