I have an Expo React Native application and I am using react-native-iap library. I have setup the URL for sandbox and production url to receive notifications when a something happens regarding subscriptions. I am not able to receive those notifications when I simulate the purchase on the Simulator using Xcode.
I then have used the node library app-store-server-library to mock a test notification and I am receiving the test notification when I call requestTestNotification method.
below is the react-native code I am using:
import {useEffect, useState} from "react";
import {
initConnection,
Sku,
Subscription,
useIAP,
SubscriptionIOS,
requestSubscription,
PurchaseError,
clearTransactionIOS
} from "react-native-iap";
import styles from "@/screens/IAP/IAPStyles";
import CustomText from "@/components/CustomText";
import Heading from "@/components/Heading";
import subscriptionsProducts from "@/utilities/products";
function IAPScreen() {
const [isPurchasing, setIsPurchasing] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const { subscriptions, currentPurchase, finishTransaction, getSubscriptions } = useIAP();
function RenderProduct({ item } : { item: Subscription }) {
const iosSubscription: SubscriptionIOS = item as SubscriptionIOS;
return(
<View style={styles.productCard}>
<CustomText
customStyles={styles.productTitle}
text={iosSubscription.title}
size={"medium"}
/>
<CustomText
customStyles={styles.productDescription}
text={iosSubscription.description}
size={"small"}
/>
<CustomText
customStyles={styles.productPrice}
text={iosSubscription.localizedPrice}
size={"small"}
/>
<Button
title="Purchase"
disabled={isPurchasing}
onPress={
() => HandlePurchase(iosSubscription.productId)
}
/>
</View>
);
}
async function HandlePurchase(sku: Sku) {
try {
setIsPurchasing(true);
await requestSubscription({
sku,
andDangerouslyFinishTransactionAutomaticallyIOS: false
});
}
catch (error: any) {
Alert.alert("Error", "Failed to purchase: " + error.message);
}
finally {
setIsPurchasing(false);
}
}
useEffect(() => {
setLoading(true);
console.log(`[${new Date().toISOString()}] Initializing IAP connection...`);
const setupIAP = async () => {
try {
const result = await initConnection();
console.log(`[${new Date().toISOString()}] IAP connection initialized:`, result);
await clearTransactionIOS();
await getSubscriptions({
skus: subscriptionsProducts
});
}
catch (error: any) {
Alert.alert("Error", "Failed to load products: " + error.message);
}
finally {
setLoading(false);
}
};
setupIAP()
.finally(() => setLoading(false));
}, []);
useEffect(() => {
const checkCurrentPurchase = async () => {
try {
if(currentPurchase?.productId) {
console.log("Current purchase: ", currentPurchase);
console.log("Transaction Id: ", currentPurchase.transactionId);
await finishTransaction({
purchase: currentPurchase,
isConsumable: false,
});
}
}
catch (error) {
if(error instanceof PurchaseError) {
console.log("Purchase error: ", error);
}
else {
Alert.alert("Error", "Failed to finish transaction: " + error);
}
}
}
if(currentPurchase) {
console.log("Finishing current purchase.");
checkCurrentPurchase()
.catch(error => Alert.alert("Error", "Failed to finish transaction: " + error.message));
}
}, [currentPurchase, finishTransaction]);
return(
<View style={styles.mainContainer}>
<Heading
text={"Packages & Subscriptions"}
type={"h2"}
customStyles={styles.header}
/>
{
loading ?
<ActivityIndicator size="large" /> :
subscriptions.length > 0 ?
(
<>
<FlatList
data={subscriptions}
renderItem={RenderProduct}
keyExtractor={(item) => item.productId}
/>
</>
) :
(
<CustomText
customStyles={styles.productDescription}
text={"No available products."}
size={"small"}
/>
)
}
</View>
);
}
export default IAPScreen;
I am using a store kit file where I just edited the scheme of application to use that store kit file.
I would be really thankful If you can help me in this matter.
