InAppPurchase2 (Ionic/Capacitor) - x is not a function

I’ve recently been trying to implement InAppPurchase2 in an ionic capacitor app and all the callback functions are prompting the error “x is not a function” in my chrome debugger.

I get this error when writing all the callbacks - .approved, .order, .owned.

The code compiles fine, am I missing a dependency or?

example error:

ERROR Error: Uncaught (in promise): TypeError: this.store.when(...).approved is not a function
    TypeError: this.store.when(...).approved is not a function
    at HomePage.setupListeners (home.page.ts:56)
    at home.page.ts:24
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27437)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:864
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

template:

import { Component } from '@angular/core';
import { InAppPurchase2, IAPProduct } from "@ionic-native/in-app-purchase-2/ngx";
import { Platform, AlertController} from '@ionic/angular';

const REMOVE_ADS = 'remove_ads';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  isPro = false;

  constructor(private store: InAppPurchase2, private plt: Platform, 
    private alertControllers: AlertController) {
      
    this.plt.ready().then(() =>{
  
      this.store.verbosity = this.store.DEBUG;
      this.registerProducts();
      this.setupListeners();

      this.store.ready(() =>  {
        console.log('Store is ready');
        this.presentAlert('Products: ' ,JSON.stringify(this.store.products));

      });
    })
  }

  async presentAlert(header, message){
    const alert = await this.alertControllers.create({
      header,
      message,
      buttons: ['OK']
    })

    await alert.present();
  }

  registerProducts(){
    this.store.register({
      id: REMOVE_ADS,
      type: this.store.NON_CONSUMABLE 
    });

    this.store.refresh();

  }

  setupListeners(){
    // Subscribe in-app purchase event listeners
    this.store.when(REMOVE_ADS).approved((p: IAPProduct) =>{
      //
    });
    

    this.store.when(REMOVE_ADS).owned((p: IAPProduct) =>{
      //
    });

    this.store.refresh();
  }

  purchase() {
    this.store.refresh();
    this.store.order(REMOVE_ADS).then(x => {this.presentAlert('Success', 'yey');}, e => {this.presentAlert('Failed', '${e}');});

  }

  restore(){
    this.store.refresh();
  }
 
}

Could you post package.json?

package.json:

{
  "name": "xx",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^10.0.14",
    "@angular/core": "^10.0.14",
    "@angular/forms": "^10.0.14",
    "@angular/platform-browser": "^10.0.14",
    "@angular/platform-browser-dynamic": "^10.0.14",
    "@angular/router": "^10.0.14",
    "@capacitor/android": "^2.4.0",
    "@capacitor/core": "2.4.0",
    "@ionic-native/admob-free": "^5.28.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "capacitor-admob": "^0.1.0",
    "cc.fovea.cordova.purchase": "^10.1.1",
    "cordova-android": "9.0.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-purchase": "^10.2.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.8",
    "@angular/cli": "^10.0.8",
    "@angular/compiler": "^10.0.14",
    "@angular/compiler-cli": "^10.0.14",
    "@angular/language-service": "^10.0.14",
    "@capacitor/cli": "2.4.0",
    "@ionic/angular-toolkit": "^2.3.0",
    "@types/jasmine": "^3.5.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cordova-admob-sdk": "^0.24.1",
    "cordova-plugin-admob-free": "^0.27.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-promise-polyfill": "0.0.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jetifier": "^1.6.6",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-admob-free": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

What I don’t see is more interesting this time, and what I don’t see is “@ionic-native/in-app-purchase-2”.

Hmm, I added that manually, rebuilt and getting the same errors. I’m guessing my installation is botched, how best to proceed?

First thing I would try is npx cap sync.

Tried that and then ionic build afterwards, hasn’t worked :confused:.

How are you running the app…? I just had exactly the same issue

ERROR Error: Uncaught (in promise): TypeError: this.store.when(...).approved is not a function

Which wen I added a debug line…

console.log(this.store.when('product'));

…returned with…
{error: "cordova_not_available"}

Which makes total sense - now off to test on a device rather than with ionic serve