How use in app puchase with ionic 6 & capacitor 4?

I have an app in production and I want to start incorporating payments in it. I have used in app puchase, making this installation:

$ npm install cordova-plugin-purchase
$ npm install @awesome-cordova-plugins/in-app-purchase-2
$ ionic cap sync

…but when I run on android, it says:

Native: tried calling InAppPurchase2.register, but the InAppPurchase2 plugin is not installed.

Is it possible to use in app purchase with ionic 6 and capacitor 4? If it is correct, what can be wrong?

Ionic:

Ionic CLI : 6.20.4 (C:\Users\juanc\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.4.1
@angular-devkit/build-angular : 15.0.4
@angular-devkit/schematics : 15.0.4
@angular/cli : 15.0.4
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.3.0
OS : Windows 10

Thanks in advance.

Did you install @awesome-cordova-plugins/core?

No, not so far. I installed it, and now running ionic. cap sync gives me an IOS error when I have not added that platform. I have only added android.

[capacitor] √ copy ios in 4.41s
[capacitor] √ Updating iOS plugins in 38.41ms
[capacitor] [info] Found 7 Capacitor plugins for ios:
[capacitor] @capacitor-community/admob@3.0.0-2
[capacitor] @capacitor/app@0.3.6
[capacitor] @capacitor/browser@0.4.6
[capacitor] @capacitor/camera@0.4.3
[capacitor] @capacitor/device@0.5.6
[capacitor] @capacitor/splash-screen@0.3.6
[capacitor] @capacitor/status-bar@0.4.6
[capacitor] [info] Found 3 Cordova plugins for ios:
[capacitor] cordova-plugin-advanced-http@3.1.0
[capacitor] cordova-plugin-file@6.0.2
[capacitor] cordova-plugin-purchase@13.1.6
[capacitor] × Updating iOS native dependencies with pod install - failed!
[capacitor] × update ios - failed!
[capacitor] [error] “pod” is not recognized as an internal or external command,
[capacitor] program or executable batch file.
[capacitor]
[ERROR] An error occurred while running subprocess capacitor.

After this,

Line 1 - Msg: Native: tried calling InAppPurchase2.register, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’.

Any idea?

What’s strange to me is that in the capacitor documentation, at Capacitor - Cross-platform Native Runtime for Web Apps | Capacitor Documentation, when referring to In App Purchase, it just says to install the plugin, no more.

…and on the Ionic page, plugins v5 (in v6 it doesn’t appear), the way to install it for capacitor is said to be:

I’m a bit confused.

You do need to do the following:

npm install @awesome-cordova-plugins/core
npm install cordova-plugin-purchase
npm install @awesome-cordova-plugins/in-app-purchase-2
ionic cap sync

Please confirm you have done that and let us know if you have any additional errors upon running ionic cap sync.

In regards to the documentation, Ionic no longer manages the Cordova Plugin repo/documentation so that is my guess why they were removed from the v6 documentation.

First of all, thanks for the help.

I have deleted modules, android and I have installed again all the modules, including the 3 related to InAppPurchase, in the order in which you have told me.

After this, the errors have disappeared and I can run again in Android, but I still get the same error (list below).

I tried with a project from scratch, running
ionic start test-in-app-purchase sidemenu --capacitor
…and in
this.platform.ready().then(() => {
…I have initialized the store, as indicated in the plugin page, and all the service methods give me the same error:

Line 1 - Msg: Native: tried calling InAppPurchase2.DEBUG, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’
Line 1 - Msg: Native: tried calling InAppPurchase2.verbosity, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’
Line 1 - Msg: Native: tried calling InAppPurchase2.NON_RENEWING_SUBSCRIPTION, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’
Line 1 - Msg: Native: tried calling InAppPurchase2.register, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’
Line 1 - Msg: Native: tried calling InAppPurchase2.when, but the InAppPurchase2 plugin is not installed.
Line 1 - Msg: Install the InAppPurchase2 plugin: ‘ionic cordova plugin add cordova-plugin-purchase’

The same error list both in my App and in the test project where I have only installed this plugin. any additional ideas?

Thanks in advance.

Assuming you also ran ionic cordova plugin add cordova-plugin-purchase? I don’t remember that being required but it is what the error message is saying :rofl:

I can say I had success on Capacitor 3 in a Vue project. I switched to RevenueCat before upgrading to Capacitor 4 though.

Yes, it is not possible to run that command with capacitor. It gives the following error:

[ERROR] Refusing to run ionic cordova plugin inside a Capacitor project.

Regarding cap-go/capacitor-purchase, the best thing would be for Capacitor to provide its own plugin, official or community, and not do it through a third platform. A plugin in the style of cordova, which interacts directly with Google or Apple, without intermediaries.

Why did you switch to cap-go, did you have similar problems to mine? If not, what made you look for a third platform?

Hmmm, unfortunately I am not sure what the issue could be. EDIT: maybe there is a breaking change in Capacitor 4 that the plugin hasn’t been updated to handle?

I switched to RevenueCat, not CapGo’s plugin. I actually didn’t know about CapGo until @mikrochipkid mentioned it! EDIT: Oh, just realized the CapGo plugin is using RevenueCat :slight_smile:

I switched to RevenueCat because I was running into weird iOS issues and support seemed lacking. This was back in the summer 2022 so maybe things have changed since. I wasn’t using their service (https://billing.fovea.cc/). I developed the entire backend to handle all the webhooks and transactions from Google/Apple.

Subscriptions are how we make money so they need to work. I’m willing to pay a little bit to know that an entire team is behind the product and can provide support. Having much less code to handle subscriptions was also a plus. All the code I had written no longer needs to be maintained and I can focus on the core features of our app going forward.

Implementing RevenueCat seemed much easier to implement as well. It doesn’t require listening to events in the app which was a bonus for me. I had to do some workarounds with the events to get things working as I needed.

I use the Cordova In-app purchase in my Capacitor 4 and Ionic 6 with no problem. (On iOS)

Here is my installation :

Hi, I see that the most important difference is that you use Vue, and I use Angular. And that you use @ionic-native/in-app-puchase-2.

“dependencies”: {
@angular/common”: “^15.0.0”,
@angular/core”: “^15.0.0”,
@angular/forms”: “^15.0.0”,
@angular/platform-browser”: “^15.0.0”,
@angular/platform-browser-dynamic”: “^15.0.0”,
@angular/router”: “^15.0.0”,
@awesome-cordova-plugins/core”: “^6.3.0”,
@awesome-cordova-plugins/in-app-purchase-2”: “^6.3.0”,
@capacitor-community/admob”: “^4.0.0-1”,
@capacitor/android”: “4.6.1”,
@capacitor/app”: “^4.1.1”,
@capacitor/browser”: “^4.1.1”,
@capacitor/camera”: “^4.1.4”,
@capacitor/core”: “4.6.1”,
@capacitor/device”: “^4.1.0”,
@capacitor/haptics”: “4.1.0”,
@capacitor/http”: “^0.0.2”,
@capacitor/keyboard”: “4.1.0”,
@capacitor/share”: “^4.1.0”,
@capacitor/splash-screen”: “^4.1.3”,
@capacitor/status-bar”: “^4.1.1”,
@ionic/angular”: “^6.1.9”,
@ionic/storage”: “^3.0.6”,
@ionic/storage-angular”: “^3.0.6”,
@ngx-translate/core”: “^14.0.0”,
@ngx-translate/http-loader”: “^7.0.0”,
@types/crypto-js”: “^4.1.1”,
“cordova-plugin-purchase”: “^13.1.6”,
“crypto-js”: “^4.1.1”,
“ionicons”: “^6.0.3”,
“moment”: “^2.29.4”,
“ngx-clipboard”: “^15.1.0”,
“rxjs”: “~7.5.0”,
“ts-md5”: “^1.3.1”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.11.4”
},

In the test I did with an App from scratch, I also used Angular. I will try to make a test App from scratch with Vue to really determine the problem would be in the integration with ionic/capacitor/Angular. Although Vue I have never touched it in my life :sweat_smile:

I’ll also try using @ionic-native/in-app-purchase-2, although I seem to recall that this was not compatible with the version of rxjs I have installed (and I think you have a compatible version).

Thanks for the info!

Yes, but I don’t have the impression that this plugin is still maintained. I originally used the documentation on Ionic > Native website but it seems to have been removed.