iOS In-App Purchase completes successfully but currentPurchase remains undefined - getAvailablePurchases() always returns empty array

[shuvajitmaitra]

**I'm implementing in-app purchases for iOS using react-native-iap. The purchase flow appears to work (App Store sheet shows, payment processes successfully), but the purchase is never detected by the React Native layer. Both currentPurchase from useIAP hook and getAvailablePurchases() remain empty/undefined.

When I am entering the component for the second time and click in the buy now button then in-app purchase bottomsheet is not showing but get the current purchases.**

Version:
"react-native": "0.79.2",
"react-native-iap": "^14.0.1",
"react-native-nitro-modules": "^0.29.2",

Code:
import {Alert, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {cn} from '../../utils/cn';
import HeadingTextV2 from '../common/HeadingTextV2';
import {useIAP, finishTransaction, initConnection} from 'react-native-iap';

// Interface for component props
interface IapButtonProps {
containerStyle?: string;
title?: string;
textStyle?: string;
courseId: string;
iapProductId: string;
slug?: string;
}

const IapButton: React.FC = ({
containerStyle,
title,
textStyle,
iapProductId,
slug,
}) => {
const [isLoading, setIsLoading] = useState(false);
const {connected, requestPurchase, currentPurchase} = useIAP();

useEffect(() => {
const initializeIAP = async () => {
try {
await initConnection();
} catch (error) {
console.error(error);
}
};
console.log(
'Current Purchase -----------------------------------------',
currentPurchase?.productId,
);
!currentPurchase && initializeIAP();
}, []);

const completePurchase = async () => {
if (!currentPurchase) return;
try {
// Grant the purchase to user here

  console.log(
    'Purchase completed===========================:',
    currentPurchase?.productId,
  );
  Alert.alert('Purchase Finished', currentPurchase.productId);
  // Finish the transaction
  await finishTransaction({
    purchase: currentPurchase,
    isConsumable: true, // Set based on your product type
  });
} catch (error) {
  console.error('Failed to complete purchase:', error);
}

};

useEffect(() => {
if (currentPurchase) {
completePurchase();
}
}, [currentPurchase]);

const handlePurchase = async (productId: string) => {
if (!connected) {
Alert.alert(
'Not Connected',
'Store connection unavailable. Please try again later.',
);
return;
}

try {
  setIsLoading(true);
  await requestPurchase({
    request: {
      ios: {
        sku: productId,
        andDangerouslyFinishTransactionAutomatically: false,
      },
    },
  });
  console.log(
    'Request Purchase................................................',
    currentPurchase?.productId,
  );
  currentPurchase && completePurchase();

  setIsLoading(false);
} catch (error) {
  console.error('Purchase request failed:', error);
}

};

return (
<>
<TouchableOpacity
onPress={() => {
handlePurchase(iapProductId);
}}
disabled={isLoading}
className={cn(
'bg-black h-14 mt-2 rounded justify-center items-center',
containerStyle,
)}>
<HeadingTextV2 className={cn('text-white', textStyle)}>
{isLoading ? 'Processing...' : title || 'Buy Now'}


</>
);
};

export default IapButton;

When I am entering for the first time on the screen and click on the Buy Now button:

When I am entering for the second time on the screen and click on the Buy Now button:

[theonlineaid]

We also face same problem. How we fix this problem. First time it can not success. If user buy it again then work.

[hyochan]

Could you kindly compare your codebase to https://github.com/hyochan/react-native-iap/blob/main/example/screens/PurchaseFlow.tsx and try the example code and here is useIAP version https://github.com/hyochan/react-native-iap/blob/main/example/screens/SubscriptionFlow.tsx.

currentPurchase flow is very old approach. We recommend using onPurchaseSuccess, onPurchaseError.

[shuvajitmaitra]

Yes, I have tried with the PurchaseFlow component code. Facing the same issues.

import React, {useState, useEffect, useRef, useCallback} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ScrollView,
ActivityIndicator,
Alert,
Platform,
Modal,
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
import {
initConnection,
endConnection,
fetchProducts,
requestPurchase,
finishTransaction,
purchaseUpdatedListener,
purchaseErrorListener,
type Product,
type Purchase,
type NitroPurchaseResult,
} from 'react-native-iap';

// Test product IDs - Non-consumable products
const PRODUCT_IDS = ['course_tier_c_1', 'course_tier_c_2'];

const PurchaseFlow: React.FC = () => {
const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState(false);
const [purchasing, setPurchasing] = useState(false);
const [connected, setConnected] = useState(false);
const [purchaseResult, setPurchaseResult] = useState('');
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [modalVisible, setModalVisible] = useState(false);
const subscriptionsRef = useRef<{updateSub?: any; errorSub?: any}>({});

const handlePurchaseUpdate = useCallback(async (purchase: Purchase) => {
console.log('Purchase successful:', purchase);
setPurchasing(false);

// IMPORTANT: Server-side receipt validation should be performed here
// Send the receipt to your backend server for validation
// Example:
// const isValid = await validateReceiptOnServer(purchase.transactionReceipt);
// if (!isValid) {
//   Alert.alert('Error', 'Receipt validation failed');
//   return;
// }

// After successful server validation, finish the transaction
// For consumable products (like bulb packs), set isConsumable to true
await finishTransaction({
  purchase,
  isConsumable: true, // Set to true for consumable products
});

// Handle successful purchase
setPurchaseResult(
  `✅ Purchase successful (${purchase.platform})\n` +
    `Product: ${purchase.productId}\n` +
    `Transaction ID: ${purchase.transactionId || 'N/A'}\n` +
    `Date: ${new Date(purchase.transactionDate).toLocaleDateString()}\n` +
    `Receipt: ${purchase.transactionReceipt?.substring(0, 50)}...`,
);

Alert.alert('Success', 'Purchase completed successfully!');

}, []);

const initializeIAP = useCallback(async () => {
try {
setLoading(true);
const isConnected = await initConnection();
setConnected(isConnected);

  if (isConnected) {
    await loadProducts();
  }
} catch (error) {
  // Failed to initialize IAP
  Alert.alert('Error', 'Failed to initialize IAP connection');
} finally {
  setLoading(false);
}

}, []);

useEffect(() => {
// Initialize connection when component mounts
initializeIAP();

const setupPurchaseListeners = () => {
  // Set up purchase success listener
  subscriptionsRef.current.updateSub =
    purchaseUpdatedListener(handlePurchaseUpdate);

  // Set up purchase error listener
  subscriptionsRef.current.errorSub =
    purchaseErrorListener(handlePurchaseError);
};

setupPurchaseListeners();

// Capture current subscription references at the time the effect runs
const currentSubscriptions = subscriptionsRef.current;

// Cleanup when component unmounts
return () => {
  // Clean up listeners
  currentSubscriptions.updateSub?.remove();
  currentSubscriptions.errorSub?.remove();
  endConnection();
};

}, [handlePurchaseUpdate, initializeIAP]);

const handlePurchaseError = (error: NitroPurchaseResult) => {
// Purchase failed

const errorMessage = error.message || 'Purchase failed';
setPurchaseResult(`❌ Purchase failed: ${errorMessage}`);
setPurchasing(false);

if (error.code === 'user_cancelled') {
  Alert.alert('Purchase Cancelled', 'You cancelled the purchase');
} else {
  Alert.alert('Purchase Failed', errorMessage);
}

};

const loadProducts = async () => {
try {
setLoading(true);
const fetchedProducts = await fetchProducts({
skus: PRODUCT_IDS,
type: 'inapp',
});

  // Products fetched successfully
  setProducts(fetchedProducts);
} catch (error) {
  // Failed to load products
  Alert.alert('Error', 'Failed to load products');
} finally {
  setLoading(false);
}

};

const handlePurchase = async (itemId: string) => {
try {
setPurchasing(true);
setPurchaseResult('Processing purchase...');

  // Request purchase - results will be handled by event listeners
  await requestPurchase({
    request: {
      ios: {
        sku: itemId,
        quantity: 1,
      },
      android: {
        skus: [itemId],
      },
    },
    type: 'inapp',
  });

  // Purchase request sent - waiting for result via event listener
} catch (error: any) {
  // Purchase request failed
  const errorMessage =
    error instanceof Error ? error.message : 'Purchase request failed';
  setPurchaseResult(`❌ Purchase request failed: ${errorMessage}`);
  setPurchasing(false);

  Alert.alert('Request Failed', errorMessage);
}

};

const handleProductPress = (product: Product) => {
setSelectedProduct(product);
setModalVisible(true);
};

const getProductDisplayPrice = (product: Product): string => {
// Use the simplified Android offer price fields (added by type bridge)
const androidProduct = product as any;
if (
Platform.OS === 'android' &&
androidProduct.oneTimePurchaseOfferFormattedPrice
) {
return androidProduct.oneTimePurchaseOfferFormattedPrice;
}
return product.displayPrice;
};

const copyToClipboard = async () => {
if (!selectedProduct) return;
// React Native doesn't have built-in clipboard, showing as console.log instead
JSON.stringify(selectedProduct, null, 2);
// Product data would be logged here in development
Alert.alert('Console', 'Product data logged to console');
};

const renderProductDetails = () => {
const product = selectedProduct;
if (!product) return null;

const jsonString = JSON.stringify(product, null, 2);

return (
  <View style={styles.modalContent}>
    <ScrollView style={styles.jsonContainer}>
      <Text style={styles.jsonText}>{jsonString}</Text>
    </ScrollView>
    <View style={styles.buttonContainer}>
      <TouchableOpacity
        style={[styles.actionButton, styles.consoleButton]}
        onPress={copyToClipboard}>
        <Text style={styles.actionButtonText}>🖥️ Console Log</Text>
      </TouchableOpacity>
    </View>
  </View>
);

};

return (


In-App Purchase Flow
Testing with react-native-iap


Store: {connected ? '✅ Connected' : '❌ Disconnected'}


Platform: {Platform.OS === 'ios' ? '🍎 iOS' : '🤖 Android'}

  <View style={styles.section}>
    <Text style={styles.sectionTitle}>Available Products</Text>
    {loading ? (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text style={styles.loadingText}>Loading products...</Text>
      </View>
    ) : products.length > 0 ? (
      products.map(product => (
        <View key={product.id} style={styles.productCard}>
          <View style={styles.productInfo}>
            <Text style={styles.productTitle}>{product.title}</Text>
            <Text style={styles.productDescription}>
              {product.description}
            </Text>
            <Text style={styles.productPrice}>
              {getProductDisplayPrice(product)}
            </Text>
          </View>
          <View style={styles.productActions}>
            <TouchableOpacity
              style={styles.infoButton}
              onPress={() => handleProductPress(product)}>
              <Text style={styles.infoButtonText}>ℹ️</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[
                styles.purchaseButton,
                purchasing && styles.disabledButton,
              ]}
              onPress={() => handlePurchase(product.id)}
              disabled={purchasing || !connected}>
              <Text style={styles.purchaseButtonText}>
                {purchasing ? 'Processing...' : 'Purchase'}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      ))
    ) : (
      <View style={styles.noProductsCard}>
        <Text style={styles.noProductsText}>
          No products found. Make sure to configure your product IDs in your
          app store.
        </Text>
        <TouchableOpacity style={styles.retryButton} onPress={loadProducts}>
          <Text style={styles.retryButtonText}>Retry</Text>
        </TouchableOpacity>
      </View>
    )}
  </View>

  {purchaseResult ? (
    <View style={styles.section}>
      <Text style={styles.sectionTitle}>Result</Text>
      <TouchableOpacity
        onLongPress={() => {
          Clipboard.setString(purchaseResult);
          Alert.alert('Copied', 'Purchase result copied to clipboard');
        }}
        delayLongPress={500}>
        <ScrollView style={styles.resultCard} horizontal={true}>
          <Text style={styles.resultText}>{purchaseResult}</Text>
        </ScrollView>
      </TouchableOpacity>
      <Text style={styles.copyHint}>Long press to copy</Text>
    </View>
  ) : null}

  <Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    onRequestClose={() => setModalVisible(false)}>
    <View style={styles.modalOverlay}>
      <View style={styles.modalContainer}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalTitle}>Product Details</Text>
          <TouchableOpacity
            style={styles.closeButton}
            onPress={() => setModalVisible(false)}>
            <Text style={styles.closeButtonText}>✕</Text>
          </TouchableOpacity>
        </View>
        {renderProductDetails()}
      </View>
    </View>
  </Modal>

  <View style={styles.infoSection}>
    <Text style={styles.infoTitle}>Test Information</Text>
    <Text style={styles.infoText}>
      {Platform.OS === 'ios'
        ? 'Using Sandbox environment for testing'
        : 'Using Android test products'}
    </Text>
    <Text style={styles.infoText}>Products: {PRODUCT_IDS.join(', ')}</Text>
  </View>

</ScrollView>

);
};

[shuvajitmaitra]

Got a purchase successful in onPurchaseSuccess when I click the second time on the buy button.

Console log

Purchase successful: {id: '2000001006996501', productId: 'course_tier_c_1', transactionDate: 1757569396000, transactionReceipt: '', purchaseToken: 'xxxxxxxxxxxxxxxxxx'..EFlX9F2psIXQLlbQIuIvs3Ro-znb_uTEYO-orrj1vzY4oxtwYRve455VMngUWsWokJzIiF9haGNGpI5b2Awjjg', platform: 'ios', quantity: 1, purchaseState: 'purchased', isAutoRenewing: false, quantityIOS: 1, …}

//Hook-----------------------------------------------
const {connected, requestPurchase, currentPurchase, getAvailablePurchases} =
useIAP({
onPurchaseSuccess: async purchase => {
console.log('Purchase successful:', purchase);
setIsLoading(false);