Ionic React: Implementing InAppPurchase 2 on React Hooks - reactjs

Question

I am trying to implement InAppPurchase 2 from https://github.com/j3k0/cordova-plugin-purchase in Ionic React.
It seems that the ready event is never been called.
Here is my code:
....
import { IAPProduct, InAppPurchase2 as iap } from "#ionic-native/in-app-purchase-2";
const App: React.FC = () => {
useEffect(() => {
const init = async () => {
await initInAppPurchase();
setInitialized(true);
}
init();
}, [])
....
}
export const initInAppPurchase = () => {
if (isPlatform('android') || isPlatform('ios')) {
iap.verbosity = iap.DEBUG;
iap.register({
id: "com.mysoftwares.posapp.test",
alias: "Test",
type: iap.NON_CONSUMABLE
});
iap.when("com.mysoftwares.posapp.test").updated((product: IAPProduct) => {
if (product.owned)
console.log('Product owned')
else
console.log('Product not owned')
});
iap.when("com.mysoftwares.posapp.test").approved(function (product: any) {
product.finish();
});
iap.ready(() => {
alert("Product ready!")
let product = iap.get('Test');
alert(product);
if (product.canPurchase) {
iap.order('Test');
}
})
iap.refresh();
}
}
Here is the log from debug verbose:
[store.js] DEBUG: state: com.mysoftwares.posapp.test -> registered
[store.js] DEBUG: store.trigger -> triggering action refreshed
InAppBilling[js]: setup ok
InAppBilling[js]: load ["com.mysoftwares.posapp.test"]
InAppBilling[js]: listener: {"type":"ready","data":{}}
[store.js] DEBUG: store.trigger -> triggering action refresh-finished
InAppBilling[js]: setup ok
InAppBilling[js]: load ["com.mysoftwares.posapp.test","com.mysoftwares.posapp.test"]
InAppBilling[js]: listener: {"type":"ready","data":{}}
InAppBilling[js]: setup ok
InAppBilling[js]: load ["com.mysoftwares.posapp.test","com.mysoftwares.posapp.test","com.mysoftwares.posapp.test"]
InAppBilling[js]: listener: {"type":"ready","data":{}}
InAppBilling[js]: setup ok
I am using React Hooks. I have published my app in Google Play Console and have added the test product in In-app Products section inside Google Play Console. Currently my app is on open testing phase.
I have created an app before coded in pure Apache Cordova without Ionic, it works fine, but this in React is not.
What is wrong with my code? Please help...

Answer 1

I am testing it on emulator which is dumb. On mobile devices, it works fine.

Answer 2

I had to do the following:
Install these in terminal
npm install #ionic-native/in-app-purchase-2
npm install cordova-plugin-purchase
This code in .tsx file
import React, { useState, useEffect } from 'react';
import { InAppPurchase2 as iap, IAPProduct } from "#ionic-native/in-app-purchase-2";
const Home: React.FC = () => {
//declare variables
const [productPrice, setPrice] = useState('')
const [product, setProduct] = useState([]) as any
//initiate initInAppPurchase function
useEffect(() => {
const init = async () => {
await initInAppPurchase();
}
init();
}, []);
//if on an ios or android device, then get product info
const initInAppPurchase = () => {
if ((isPlatform('ios')) || (isPlatform('android'))) {
iap.verbosity = iap.DEBUG;
iap.register({
id: "com.test.test",
alias: "Test",
type: iap.NON_CONSUMABLE
});
iap.ready(() => {
let product = iap.get('Test');
setPrice(product.price)
setProduct(product)
})
iap.refresh();
}
}
//if user clicks purchase button
const purchaseProduct = () => {
if (product.owned) {
alert('Product already owned, click restore button instead!')
} else {
iap.order('Test').then(() => {
iap.when("com.test.test").approved((p: IAPProduct) => {
//store product
p.verify();
p.finish();
});
})
iap.refresh();
}
}
//if user clicks retore or promo code button
const restore = () => {
iap.when("com.test.test").owned((p: IAPProduct) => {
if (product.owned) {
//store product
} else {
alert("You have not purchased this product before.")
}
});
iap.refresh();
}
return (
<IonPage>
<IonContent fullscreen>
<IonCard className="homeCards">
<IonButton onClick={purchaseProduct}>Buy for {productPrice}</IonButton>
<IonButton onClick={restore}>Restore</IonButton>
<IonButton onClick={restore}>Promo code</IonButton>
</IonCard>
</IonContent>
</IonPage>
);
};
export default Home;
To test apple in app purchase on device:
Had a developer account
Created in app purchase in apple connect
Added my email as a tester in apple connect
Uploaded app onto phone from Xcode and purchases worked
To test android in app purchase on device:
<uses-permission android:name="com.android.vending.BILLING" />
Added above line of code to AdnroidManifest.xml file
Had a developer account
Uploaded the .aab or .apk file to internal testing on google play console and added my email as a tester
Created in app purchase
Uploaded app onto phone from Android Studio and purchases worked