Ionic 4 PayPal causes TypeError: Object(...) is not a function on implementation

Ionic Framework
1

I’m testing to see if I can get the PayPal plugin to work in Ionic 4. I have updated to all the latest Ionic CLI, Node, npm, etc…

I start a new project with:

ionic start PayPalTest blank --type=angular

Then I install the paypal plugin as per the document: https://ionicframework.com/docs/native/paypal/

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

Then I go in my home.page.ts, import and implement it in the constructor:

import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal';

Then as soon as I implement it in my constructor:

constructor(private payPal: PayPal) { }

I get the following error:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at index.js:268
    at Object../node_modules/@ionic-native/paypal/index.js (index.js:382)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/home/home.page.ts (home-home-module.js:649)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/home/home.module.ts (home-home-module.js:577)
    at __webpack_require__ (bootstrap:81)
    at $_lazy_route_resource lazy namespace object:17
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at index.js:268
    at Object../node_modules/@ionic-native/paypal/index.js (index.js:382)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/home/home.page.ts (home-home-module.js:649)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/home/home.module.ts (home-home-module.js:577)
    at __webpack_require__ (bootstrap:81)
    at $_lazy_route_resource lazy namespace object:17
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3820)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Here is my ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\Luc\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (D:\dev\android-sdk)
   NodeJS            : v8.9.4 (D:\dev\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

In my package.json:

    "@ionic-native/paypal": "^4.15.0",
    "com.paypal.cordova.mobilesdk": "^3.5.0",
3 Likes
2

@reedrichards has answered this question a million times.

1 Like
3

Ok, got it. Initially tried the following:

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

I get the following response:

Cannot find module '@ionic-native/paypal/ngx'

My package is set to:

"@ionic-native/core": "5.0.0-beta.15"

I have also tried to add it as a provider in my app.module.ts but it’s the same problem:

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

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

Finally figured out that I had to manually update my package.json with:

"@ionic-native/paypal": "5.0.0-beta.15",

and then run npm install

Seems to work now.

4

Since you are using Ionic v3 you should import PayPal from '@ionic-native/paypal' not from '@ionic-native/paypal/ngx' .

If you install PayPal using npm install @ionic-native/paypal uninstall it using npm uninstall @ionic-native/paypal and re-install using npm install --save @ionic-native/paypal@4