Unable to use some Cordova Plugins like Paypal, Splashscreen, etc

Due to my upgrade to Ionic V3.9.2, i am now unable to use some Cordova Plugins like Paypal, Splashscreen, etc, see the attached screenshot:

The above screenshot is the Chrome Remote Device’s Inspect Page, and not the Ionic Serve one.

Here i am unable to run the cordova packages, as the cordova is missing!

But the Ionic Team from V3.8.2 asked us to remove the cordova items:
npm uninstall --save-dev --save-exact @ionic/cli-plugin-cordova
[WARN] Detected @ionic/cli-plugin-ionic-angular in your package.json.
As of CLI 3.8, it is no longer needed. You can uninstall it:
npm uninstall --save-dev --save-exact @ionic/cli-plugin-ionic-angular

Also it won’t install Cordova now.

And if i install cordova, it won’t recognize the cordova in the Android Build, hence the plugins are not working.

Can we get the Cordova to work by generating an Android Build in Production Mode?

Please let me know if you have ideas fixing it.

You are mixing different things here.

This was a plugin of the Ionic CLI that is now part of the CLI itself again. Nothing changes for your project.

Anything you are seeing here is unrelated

How are you building and running your app?
What is your ionic info output?
What is you ionic cordova plugin list output?

I have the same problem here, many plugins were “plugin_not_installed” in device.
I have same problem with splash screen, status bar , google maps … i had to remove and re install them
Last situtation was with http_cordova: i tried using platform.ready() , removing and re-installing, nothing worked … , the only temporal way i had was to use the plugin directly without ionic-native, with callbacks …

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0

System:

Android SDK Tools : 25.2.5
Node              : v6.11.0
npm               : 5.3.0
OS                : Windows 10

ionic info:

cli packages: (E:\Ionic Projects\cSMART-Mobileapp\V.1\node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.1.0 browser 4.1.0
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 26.0.2
Node              : v6.11.0
npm               : 3.10.10
OS                : Windows 8.1

ionic cordova plugin list:

cordova plugin ls
√ Running command - done!
card.io.cordova.mobilesdk 2.1.0 "CardIO"
com.paypal.cordova.mobilesdk 3.5.0 "PayPalMobile"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-secure-storage 2.6.8 "SecureStorage"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”

This is very old and should be updated to the current 6.2.3.

Ok, i will try to update it and will let you know.

But i have already uninstalled all the plugins, Platform Removed and Added back both Browser and Android. And now upgrading the Android SDK and other utilities. Which is consuming much time.

I will check as soon as i complete the Installations.

1 Like

Also i have checked the npm outdated

npm outdated
tells you which installed packages are outdated with respect to what is current in the npm registry but allowable by the version definition in your package.json

Example Output:

Package Current Wanted Latest Location
@angular/common 4.1.3 4.1.3 4.3.6 cSmart
@angular/compiler 4.1.3 4.1.3 4.3.6 cSmart
@angular/compiler-cli 4.1.3 4.1.3 4.3.6 cSmart
@angular/core 4.1.3 4.1.3 4.3.6 cSmart
@angular/forms 4.1.3 4.1.3 4.3.6 cSmart
@angular/http 4.1.3 4.1.3 4.3.6 cSmart
@angular/platform-browser 4.1.3 4.1.3 4.3.6 cSmart
@angular/platform-browser-dynamic 4.1.3 4.1.3 4.3.6 cSmart
@ionic-native/core 3.12.1 3.12.1 4.2.1 cSmart
@ionic-native/network 4.1.0 4.2.1 4.2.1 cSmart
@ionic-native/splash-screen 3.12.1 3.14.0 4.2.1 cSmart
@ionic-native/status-bar 3.12.1 3.12.1 4.2.1 cSmart
@ionic/app-scripts 2.0.2 2.0.2 2.1.4 cSmart
@types/googlemaps 3.26.17 3.26.20 3.26.20 cSmart
cordova-android 6.1.0 6.2.3 6.2.3 cSmart
cordova-browser 4.1.0 4.1.0 5.0.0 cSmart
cordova-plugin-console 1.0.5 1.0.5 1.0.7 cSmart
cordova-plugin-device 1.1.4 1.1.4 1.1.6 cSmart
cordova-plugin-statusbar 2.2.2 2.2.2 2.2.3 cSmart
ionic-angular 3.5.3 3.5.3 3.6.0 cSmart
rxjs 5.4.0 5.4.0 5.4.3 cSmart
typescript 2.3.4 2.3.4 2.4.2 cSmart
zone.js 0.8.12 0.8.12 0.8.17 cSmart

As you can see cordova-android was lagging behind, so i have thought out upgrading it as well

Just updating it via npm won’t be enough, you have to actuall update the Cordova platform. cordova platform update android should do that. ionic info has to report the current version.

Thanks, i am looking into it now. Completed the Android SDK update.

Hi, i have installed the latest cordova-android@6.2.3.
But still not working, and i am still unable ti access the cordova within the Android APK, see the similar screenshot:

No Cordova Plugin V2

The current Ionic Specs:

ionic info

cli packages: (…\node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3 browser 4.1.0
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 26.0.2
Node              : v6.11.0
npm               : 3.10.10
OS                : Windows 8.1

ionic cordova plugin list
cordova plugin ls
√ Running command - done!
card.io.cordova.mobilesdk 2.1.0 “CardIO”
com.paypal.cordova.mobilesdk 3.5.0 “PayPalMobile”
cordova-plugin-console 1.0.5 “Console”
cordova-plugin-device 1.1.4 “Device”
cordova-plugin-secure-storage 2.6.8 “SecureStorage”
cordova-plugin-splashscreen 4.0.3 “Splashscreen”
cordova-plugin-statusbar 2.2.2 “StatusBar”
cordova-plugin-whitelist 1.3.1 “Whitelist”
ionic-plugin-keyboard 2.2.1 “Keyboard”

Show us where you are calling Paypal.init (or similar)

I am using the following ts file, as you can see the following is the complete file.

import { Component, Inject } from '@angular/core';
import { PayPal, PayPalPayment, PayPalConfiguration } from 'ionic-native';
import { APP_CONFIG, IAppConfig } from "../../config";

@Component({
  templateUrl: "paypal.html"
})
export class PayPalPage {
  constructor(@Inject(APP_CONFIG) private config: IAppConfig) {}

  test = true;

  payment: PayPalPayment = new PayPalPayment("10.10", "USD", "TV", "sale");
  currencies = ["EUR", "USD"];
  payPalEnvironment: string = "payPalEnvironmentSandbox";
  pConfig = new PayPalConfiguration({
    merchantName: "Mobile Payments",
    acceptCreditCards: true,
    rememberUser: true,
    merchantPrivacyPolicyURL:
      "http://somewebsite/privacy-policy",
    merchantUserAgreementURL:
      "https://www.paypal.com/in/webapps/mpp/ua/useragreement-full"
  });

  clientIds = {
    PayPalEnvironmentProduction: `${this.config.payPalEnvironmentProduction}`,
    PayPalEnvironmentSandbox: `${this.config.payPalEnvironmentSandbox}`
  };

  processAuthToken(auth){
    alert("auth: " + JSON.stringify(auth, null, 4));
    if (auth.authorization.response_type == "authorization_code") {
      let authCode = auth.authorization.response.code;
      this.sendToServer(authCode);
    } else {
      alert("Error gathering the Token for starting the procedure for Future Payments via Paypal.");
    }
  }

  renderFuturePayUI(){
    PayPal.renderFuturePaymentUI()
    .then(
      auth => this.processAuthToken(auth), 
      error => alert(error));
  }

  makePayment() {
    PayPal.init(this.clientIds).then(() => {
        PayPal.prepareToRender(this.payPalEnvironment, this.pConfig).then(() => {
            if (this.test) {
              PayPal.clientMetadataID()
              .then(val => { 
                if (val) {alert(val);}
                else {this.renderFuturePayUI();}
              }, () => {
                alert("Error fetching Client Info.");
                console.error("Error fetching Client Info.");
              });
            } else {
              PayPal.renderSinglePaymentUI(this.payment).then(response => {
                  alert(`Successfully paid. Status = ${response.response.state}`);
                  console.log(response);
                }, () => {
                  console.error("Error or render dialog closed without being successful");
                });
            }
          }, () => {
            console.error("Error in configuration");
          });
      }, () => {
        console.error("Error in initialization, maybe PayPal isn't supported or something else");
      });
  }

  sendToServer(authToken) {
    console.log(
      "Authorization Code which will be sent to Server is: " + authToken
    );
  }
}

Ionic Native doesn’t workt that way any more for quite some time. Check the current docs to see how this has to be imported. Also normally you inject the object in the constructor as paypal and work with this.paypal later on.

I have no idea what I am seeing here, sorry.

Hi

I have tried the suggestion and followed everything, but unfortunately i am still unable to see cordova included.

After reading through the Release notes of Ionic 3.8.0 CLI, it is mentioned that the Cordova Plugins are now being taken care by Integrations and not the Cordova CLI’s anymore as they are being deprecated.

Followed by Ionic CLI 3.9.1 fixing some Missing Integrations :

3.9.1 (2017-08-16)

  • Fixed missing detection of all deprecated plugins. The CLI now warns for all plugins, not just @ionic/cli-plugin-cordova.
  • Default Ionic Cordova resources are no longer bundled with CLI installation, they are instead downloaded and copied into project directories when needed.
  • Fixed recurring prompting of proxy plugin installation.

But even this is not fixing the issue for my plugins, like Splashscreen, Paypal, etc.

Any help needed is helpful, do i need to raise an issue for this?

Please advise.

This is not about Cordova plugins but the Ionic CLI Cordova plugin which has a similar name but is something completely different.

Show your new ionic info output, package.json file and usage of the Ionic Native code you have right now. This definitely is nothing for an issue, thousands of developers are using this right now.

Yeah i agree with you.

ionic info
cli packages: (E:\Ionic Projects\cSMART-Mobileapp\V.1\node_modules)

@ionic/cli-utils  : 1.8.1
ionic (Ionic CLI) : 3.8.1

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3 browser 4.1.0
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 26.0.2
Node              : v6.11.0
npm               : 3.10.10
OS                : Windows 8.1

package.json:

{
“name”: “App”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“config”: {
“ionic_copy”: “./config/copy.config.js”,
“ionic_sass”: “./config/sass.config.js”,
“custom_icons”: “./config/custom-icons.config.js”
},
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic2-custom-icons”: “ionic2-custom-icons”,
“ionic:watch:before”: “ionic2-custom-icons”,
“ionic:build:before”: “ionic2-custom-icons”,
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “4.1.3”,
"@angular/compiler": “4.1.3”,
"@angular/compiler-cli": “4.1.3”,
"@angular/core": “4.1.3”,
"@angular/forms": “4.1.3”,
"@angular/http": “4.1.3”,
"@angular/platform-browser": “4.1.3”,
"@angular/platform-browser-dynamic": “4.1.3”,
"@ionic-native/core": “3.12.1”,
"@ionic-native/network": “^4.2.1”,
"@ionic-native/paypal": “^4.2.1”,
"@ionic-native/secure-storage": “^4.1.0”,
"@ionic-native/social-sharing": “^4.2.1”,
"@ionic-native/splash-screen": “^3.14.0”,
"@ionic-native/status-bar": “3.12.1”,
"@ionic/storage": “^2.0.1”,
"@types/googlemaps": “^3.26.20”,
“chart.js”: “^2.6.0”,
“com.paypal.cordova.mobilesdk”: “^3.5.0”,
“cordova-android”: “^6.2.3”,
“cordova-browser”: “~4.1.0”,
“cordova-plugin-console”: “1.0.5”,
“cordova-plugin-device”: “1.1.4”,
“cordova-plugin-secure-storage”: “^2.6.8”,
“cordova-plugin-splashscreen”: “~4.0.3”,
“cordova-plugin-statusbar”: “2.2.2”,
“cordova-plugin-whitelist”: “~1.3.1”,
“ionic-angular”: “3.5.3”,
“ionic-native”: “^2.9.0”,
“ionic-plugin-keyboard”: “~2.2.1”,
“ionic2-custom-icons”: “^0.5.1”,
“ionicons”: “3.0.0”,
“jquery”: “^3.2.1”,
“moment”: “^2.18.1”,
“ng2-mdf-validation-messages”: “^0.1.5”,
“rxjs”: “5.4.0”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.12”
},
“devDependencies”: {
"@ionic/app-scripts": “2.0.2”,
"@ionic/cli-plugin-cordova": “1.6.2”,
"@ionic/cli-plugin-ionic-angular": “1.4.1”,
"@types/googlemaps": “^3.26.17”,
“ionic”: “~3.8.1”,
“typescript”: “2.3.4”
},
“description”: “An Ionic project for App.”,
“cordova”: {
“platforms”: [
“android”,
“browser”
],
“plugins”: {
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-secure-storage”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“com.paypal.cordova.mobilesdk”: {}
}
}
}

Usage of Ionic Native code:

  1. Splash Screen:

constructor(

public splashScreen: SplashScreen,

)

ionViewDidEnter() {

setTimeout(() => {
  this.splashScreen.hide();
}, 100);

}

  1. Paypal:

export class PayPalPage {
constructor(
@Inject(APP_CONFIG) private config: IAppConfig,
private payPal: PayPal
) {}

renderFuturePayUI() {
this.payPal.renderFuturePaymentUI().then(
auth => this.processAuthToken(auth),
error => alert(error)
);
}

On par with Native Ionic Plugin Link

What about this step?
https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module

I have tried that as well, I have put the PayPal, SocialSharing, etc in the providers section of app.module.ts file. Even then i am still seeing the same issue:

Native: tried calling SocialSharing.shareViaFacebook, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Native: tried calling PayPal.init, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Please let me know what more steps can i do to fix this issue.

Also one more observation, i tried to downgrade the Ionic Version from 3.9.2 to 3.7.0, even then i am seeing the same problem now.

I though the issue was due to Integrations introduced in 3.8.2, but that doesn’t seem to be an issue here.

cli packages: (E:\Ionic Projects\V.1\node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3 browser 4.1.0
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 26.0.2
Node              : v6.11.0
OS                : Windows 8.1
npm               : 3.10.10

Please advise.

Hi, You were able to fix the issue, can you describe how you were able to fix it, i am unable to the issue.

Any help is appreciated.