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

WolfCov00 · August 30, 2017, 11:51am

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.

Sujan12 · August 30, 2017, 12:15pm

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?

Madm0x · August 30, 2017, 12:25pm

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

WolfCov00 · August 30, 2017, 12:40pm

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”

Sujan12 · August 30, 2017, 12:40pm

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

WolfCov00 · August 30, 2017, 12:45pm

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.

WolfCov00 · August 30, 2017, 12:58pm

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

Sujan12 · August 30, 2017, 1:06pm

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.

WolfCov00 · August 30, 2017, 1:37pm

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

WolfCov00 · August 30, 2017, 1:51pm

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:

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”

Sujan12 · August 30, 2017, 2:01pm

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

WolfCov00 · August 30, 2017, 2:05pm

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
    );
  }
}

Sujan12 · August 30, 2017, 2:08pm

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.

WolfCov00 · August 31, 2017, 2:45pm

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.

Sujan12 · August 31, 2017, 2:56pm

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.

WolfCov00 · August 31, 2017, 3:08pm

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:

Splash Screen:

constructor(
…
public splashScreen: SplashScreen,
…
)

ionViewDidEnter() {

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

}

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

Sujan12 · August 31, 2017, 3:28pm

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

WolfCov00 · September 1, 2017, 5:22am

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.

WolfCov00 · September 1, 2017, 5:59am

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.

WolfCov00 · September 1, 2017, 9:20am

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.

Topic		Replies	Views
Package.json dependencies plugins ionic-v3	4	2949	August 18, 2017
Ionic Paypal plugin not working in build apk cordova	1	890	July 10, 2019
Plugins Not working :-( - Upgrade Cordova 5.1.1 from 4.3, Ionic CLI 1.3.15 to 1.6.1	3	2159	July 13, 2015
PayPal Cordova plugin ionic-v3	37	6086	October 16, 2019
Error cordova_not_available Ionic Native	46	57274	October 2, 2019

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

Related topics