iOS in app purchases through cordova-plugin-purchase?

Question

I'm using Capacitor (but not Ionic) to package a SvelteKit application for iOS and am trying to get an in-app-purchase working.

Capacitor's page on in-app-purchases is surprisingly unhelpful. I've done my best and:

1. I have the products set up in appstoreconnect and they're status is "ready to submit"

2. I've installed cordova-plugin-purchase and run npx cap update and npx cap sync and it's installing

[info] Found 1 Cordova plugin for ios: [email protected]

3. I've tried to make the simplest test I could just to see what's going on:

import 'cordova-plugin-purchase'; // This seems to add `CdvPurchase` to the global scope.

function buy() {
    
  const {store, ProductType, Platform} = CdvPurchase;

  store.verbosity = store.DEBUG;
    
  store.register([{
    type: ProductType.CONSUMABLE,
    id: "my-product-id",
    platform: Platform.APPLE_APPSTORE,
  }]);

  store.error(e => {
    console.log('error', e);
  });

  store.when()
    .productUpdated(() => {
      console.log('product updated', product);
    })
    .approved(value => {
      console.log('approved', value);
    })
    .verified(value => {
      console.log('verified', value);
    })
    .finished(value => {
      console.log('finished', value);
    });

  store.ready(() => {
    console.log('ready', store.products);
    store.order('my-product-id');
  });
  
  store.initialize(Platform.APPLE_APPSTORE)
    .then(() => {
      console.log('initialize resolved', store.products);
      store.order('my-product-id');
    });

}

But I run the buy function, all I get is:

[log] - [CordovaPurchase] INFO: initialize()

The store never reports as ready. None of the listeners are triggered, not even .error().

Have I missed something? How do I debug this?

Answer 1

You need to set up and initialize the store when the device is ready.

You can't buy() a product and then initialize the store; it has to be done on device startup.

For example, in Cordova, this is the onDeviceReady event (example).

For Capacitor, if you're using Ionic + Angular, you can use the this.platform.ready() event.

For React, Vue, and other frameworks, you can use:

document.addEventListener("deviceready", function(){
//do something when device is ready
}, false);

Answer 2

Try to import cordova-plugin-purchase this way:

import "cordova-plugin-purchase/www/store.js";

Also try to use "window" as a global in case if a normal way will not work:

const { store, ProductType, Platform } = window.CdvPurchase;

---

Here are other helpful links where you can find code for subscription base code:

1. GitHub issue discussion: https://github.com/j3k0/cordova-plugin-purchase/issues/1437
2. A micro example from developer using PAID_SUBSCRIPTION: https://gist.github.com/j3k0/8b7e72b6af43572651328c613ac86d59
3. Example from developer using .ts and more complex: https://github.com/j3k0/cordova-subscription-example/blob/main/with-server/www/ts/subscription-service.ts

I've found this resource useful in the past, so I thought you might too.