Ionic 4/5 PayPal integration in Ionic & Angular Apps and PWA Ionic 5

In this post, you'll learn how to add PayPal payment to Ionic 5 apps and PWA so that you can accept payments on both mobile and desktop devices.

What does PayPal checkout mean in an ionic app?

PayPal is the best popular payment gateway and one of the easiest to add to your website or app. It is also sent all over the world, which helps a lot of different ways to pay. PayPal and Stripe can take care of almost all your payment needs, so you don't need to go elsewhere. One of the most common ways to pay is through Paypal. It helps us move money quickly when making online payments. Paypal provides many payment solutions. Paypal will help us move money from the user to the merchant in our ionic app.

Why do we use PayPal checkout in our ionic app?

It's good to know we're using Paypal because,

• Provides many of the business products like Credit products, etc.
• Gives lots of features of merchant services.
• The best solution for industrial payment problems with many more benefits.
• A secure and standard payment gateway.

So that's all there is to say about why and what PayPal is for the ionic app. Let's start the process of putting it into place.

So friends, Are you ready for the Paypal checkout to be added to the ionic application? First, let's look at the first one.

What does Ionic Framework mean?

You probably know about Ionic already, but I'm putting it here for people who don't. Ionic is an SDK for making hybrid mobile apps. It offers tools and services for making hybrid mobile apps with Web technologies like CSS, HTML5, and Sass. Using Cordova or Capacitor environment, apps created with these Web technologies can be sent to native app stores and installed on devices.

Ionic System is a set of open-source tools for building high-performance, flexible, and work area apps that use web technologies (HTML, CSS, and JavaScript). Ionic System focuses on an application's front-end user interface (UI) (controls, keen movements, activities). It's easy to keep up with and works well with other libraries or frameworks like Precise. It can also be used without a front-end framework by using an essential content fuse.

Ionic 4 Steps

Step 1 — The first step is to make an Ionic app.

Step 2 — Make a PayPal developer account and set it up to work with apps and PWAs.

Step 3 — Use the Ionic Native PayPal plugin to let people pay with mobile apps

Step 4 — Make the app for Android to test payments through the app.

Step 5 — Set up PayPal web integration with Javascript

Step 6 — Set up PayPal web integration with Javascript

Step 1 — First, make a simple Ionic 4 app.

First, make sure you have the most recent version of Ionic CLI. It will make sure you have the latest versions of everything. Make sure you have the latest version of Ionic CLI by

$ npm install -g ionic@latest

It's easy to make a simple Ionic 4 app. Assuming that your system has all of the basic requirements, run:

$ ionic start MyApp blank

It makes an app for you with the name "MyApp" and a blank template.

Installation:

$ ionic cordova plugin add com.paypal.cordova.mobilesdk$ npm install @ionic-native/paypal

It adds PayPal to our Ionic App. Let's implement using PayPal in our app when we're finished with this.

Update app.module.ts and modify the changes like below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PayPal } from '@ionic-native/paypal/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

     Paypal

  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Once this is done, let's implement paypal now. Open file where you wanna implement paypal and import paypal like:

import { PayPal } from '@ionic-native/paypal/ngx';

and in the constructor, modify these changes:

constructor(private payPal: PayPal) { }

now create a function to checkout paypal, like this:

onCheckOutPaypal() {
  this.payPal.init({
    PayPalEnvironmentProduction: 'YOUR_PRODUCTION_CLIENT_ID',
    PayPalEnvironmentSandbox: 'YOUR_SANDBOX_CLIENT_ID'
  }).then(() => {
    // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, 

PayPalEnvironmentProduction
    this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
      // You might need this if you get an "Internal Service Error" after PayPal login!
      //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
    })).then(() => {
      const paymnt = new PayPalPayment('9.99', 'USD', 'Description', 'sale');
      this.payPal.renderSinglePaymentUI(paymnt).then(() => {
        // Successfully paid

        // Example sandbox response
        //
        // {
        //   "client": {
        //     "environment": "sandbox",
        //     "product_name": "PayPal iOS SDK",
        //     "paypal_sdk_version": "2.16.0",
        //     "platform": "iOS"
        //   },
        //   "response_type": "payment",
        //   "response": {
        //     "id": "PAY-1AB23456CD789012EF34GHIJ",
        //     "state": "approved",
        //     "create_time": "2016-10-03T13:33:33Z",
        //     "intent": "sale"
        //   }
        // }
      }, () => {
        // Render dialog closed (Something Went Wrong) without being successful
      });
    }, () => {
      // Configuration Failed
    });
  }, () => {
    // PayPal initialization failed, PayPal isn't supported or Something Else Went Wrong
  });
}

in html:

<ion-button (click)="onCheckOutPaypal()">
   Paypal
</ion-button>

We are done with this. We were able to get PayPal Payment to work with our Ionic App. So, you can't test PayPal integration in a browser. To try it, we'll build our app and run it on an actual device. Run this command to make our app:

$ ionic cordova build android --aot --prod

It will build your app, and once it's built, you can test it on an actual device.

Leave a comment below if you have any questions, and I'll do my best to answer them.