Bar-iap NPM | npm.io

bar-iap

In App Purchase wrapper for use with Expo Go.

This package wraps on react-native-iap. Please refer to that package for advanced configurations and error states.

Installation

npm install bar-iap

Setup

This requires an additional line in app.json's expo > plugins for the android build to work correctly:

{
  "expo": {
    // ...
    "plugins": [
      "react-native-iap",
      // ...
    ]
    // ...
  }
}

Usage

Here is a very basic example. Make sure to read all comments as they are required code.

import * as React from 'react';
import { Button, Text, View } from 'react-native';

// Import iap
import { inAppPurch } from 'react-native-bear-and-rye-library';

const GoldModal = () => {
  // Prices for products
  const [goldPrice, setGoldPrice] = React.useState(0);
  const [silverPrice, setSilverPrice] = React.useState(0);
  const [purchaseStatus, setPurchaseStatus] = React.useState('');

  // Call the hook and auto-connect/disconnect.
  const iap = inAppPurch.useIAP();

  // Request Product Information
  React.useEffect(() => {
    iap.getProducts({ skus: ['gold', 'silver']});
  }, [iap.connected]);

  // Listen for product data and set prices
  React.useEffect(() => {
    iap.products?.forEach(({ productId, price }) => {
      if (productId === 'gold') {
        setGoldPrice(price);
      }
      if (productId === 'silver') {
        setSilverPrice(price);
      }
    })
  }, [iap.products]);

  // Purchase Helper
  const purchase = React.useCallback(async (sku) => {
    try {
      // Set Purchase Status
      setPurchaseStatus('loading');

      // Purchase the sku
      await iap.requestPurchase(sku);
    } catch (error) {
      setPurchaseStatus('Failed' + error);
    }
  }, [inAppPurch]);

  // Listen for purchase
  React.useEffect(() => {
    const checkCurrentPurchase = async () => {
      try {
        if (iap.hasCurrentPurchase && iap.currentPurchase) {
          await iap.finishTransaction({
            purchase: iap.currentPurchase,
            isConsumable: true,
          });
          if (iap.currentPurchase?.productId === 'gold') {
            setPurchaseStatus('Gold Success');
          }
          if (iap.currentPurchase?.productId === 'silver') {
            setPurchaseStatus('Silver Success');
          }
        }
      } catch (error) {
        setPurchaseStatus('Failed' + error);
      }
    };

    checkCurrentPurchase();
  }, [iap.currentPurchase, iap.finishTransaction]);

  return (
    <View>
      <Text>Purchase</Text>
      {goldPrice && 
        <Button
          title="Buy Gold"
          onPress={() => purchase('gold')}
          disabled={purchaseStatus==='loading'}
        >
        </Button>
      }
      {silverPrice && 
        <Button
          title="Buy Silver"
          onPress={() => purchase('silver')}
          disabled={purchaseStatus==='loading'}
        >
        </Button>
      }
      <Text>Status: {purchaseStatus}</Text>
    </View>
  )
}

// Ensure at minimum this component is wrapped with this context
export default inAppPurch.withIAPContext(GoldModal);