Tutorials > In-App Purchases

React Native Starter comes with RevenueCat integration which handles both Google Play Store and Apple App Store payments for you!

React Native Starter AI Subscription Paywall Screen

In your app, you may have features that only paying users can access by buying recurring subscriptions. Alternatively, you may need a structure where a certain number of credits are spent per transaction, and these credits are allocated to users when they make a payment.

With React Native Starter, you can securely manage credits and subscriptions using the integration of RevenueCat and Firebase. Thanks to our ready-made paywall screens, all you need to do is define the products and prices.

List the Products on Paywall

/useRevenueCat.tsx

  // Load all offerings a user can (currently) purchase
  const loadOfferings = async () => {
    const offerings = await Purchases.getOfferings();
    if (offerings.current) {
      setPackages(offerings.current.availablePackages);
    }
    if (offerings.all.Credits) {
      setCreditPackages(offerings.all.Credits.availablePackages);
    }
  };

Update the User's State When a Payment Made

/useRevenueCat.tsx

  // Update state when customerInfo loads/changes
  const updateCustomerInformation = async (customerInfo: CustomerInfo) => {
    const newUser: UserState = { credits: user.credits, pro: user.pro };

    if (customerInfo?.entitlements.active["Pro"] !== undefined) {
      newUser.pro = true;
      setUser(newUser);
    }
  };

Listen for Payments on Backend

It is also possible to listen for payments on backend just so that you also can store your users' payments on your database and use it as source of truth.

react-native-starter-backend/functions/src/index.tsx

export const iapEventHandler = onDocumentCreated(`${IAP_EVENT_COLLECTION}/{id}`, async (event) => {
    const snapshot = event.data;
    const data = snapshot.data();
    const productId = data.product_id;
    let credits = 0;
    switch (productId) {
      case '25_credits':
        credits = 25;
        break;
      case '50_credits':
        credits = 50;
        break;
      case '100_credits':
        credits = 100;
        break;
    }
  
    if (credits <= 0) {
      console.log(`No credits to give for productId(${productId})`);
      return;
    }
    const db = getFirestore();
    const userRef = db.collection(USER_COLLECTION).doc(data.app_user_id);
  
    // Add credits to user
    await userRef.update({
      credit: FieldValue.increment(credits),
    });
  
  });

In the above example, when one of the three different non-consumable products with options of 25, 50 and 100 credits is purchased, a Firebase serverless function is triggered to increase the credit count of the respective user in the database.