InApp purchase with capacitor and react js

Question

I'm working with one of the application in capacitor and react js, and i need to integrate inApp purchase in ios and android but i haven't found any documentation or anything which helps me to integrate inApp purchase in capacitor with react JS Please let me know if anyone worked with capacitor and react js

I want documentation or any other solution for inApp purchase with capacitor and react js

Answer 1

Here is a simple micro example in-app purchase in capacitor with react.js which works - for NON_CONSUMABLE:

Start with installing the plugin:

npm i cordova-plugin-purchase

import React, { useState, useEffect } from "react";
import { Capacitor } from "@capacitor/core";
import "cordova-plugin-purchase/www/store.js";

const { store, ProductType, Platform } = window.CdvPurchase;
const platformName = Capacitor.getPlatform() === 'android' ? Platform.GOOGLE_PLAY : Platform.APPLE_APPSTORE;
// change the productid to your own productis from google play console and apple developer store
const productId = "productid";

const PremiumContainer = () => {
  const [iapProduct, setIapProduct] = useState(null);

  useEffect(() => {
    store.verbosity = store.DEBUG;

    store.register({
      type: ProductType.NON_CONSUMABLE,
      id: productId,
      platform: platformName,
    });

    store.when().productUpdated(refreshUI).approved(finishPurchase);
    store.initialize([platformName, ProductType.NON_CONSUMABLE]);
  }, []);

  const finishPurchase = (p) => {
    p.finish();
    refreshUI();
  };

  const refreshUI = () => {
    setIapProduct(
      store.get(
        productId,
        platformName,
        ProductType.NON_CONSUMABLE
      )
    );
  };

  const orderProduct = () => {
    iapProduct.getOffer().order();
  };

  const restoreProduct = () => {
    store.restorePurchases();
  }

  return (
    <div>
      <h1>{iapProduct?.title}</h1>
      <p>{(iapProduct?.description ? `${iapProduct.description || ''}` : '')}</p>
      <pre>{iapProduct?.offers[0].pricingPhases[0].price}</pre>
      <button className="btn btn-primary btn-block mt-1" onClick={() => orderProduct()}>Purchase Product</button>
      <button className="btn btn-link btn-block mt-1" onClick={() => restoreProduct()}>Restore Product</button>
    </div>
  );
};

export default PremiumContainer;

---

Here is a doc from developer about the changes and migration to v13 which is very helpful: https://github.com/j3k0/cordova-plugin-purchase/wiki/HOWTO:-Migrate-to-v13

---

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.