Using RevenueCat

Not using RevenueCat? No problem! Superwall works out of the box without any additional SDKs.

Integrate RevenueCat with Superwall in one of two ways:

Using a purchase controller: Use this route if you want to maintain control over purchasing logic and code.
Using PurchasesAreCompletedBy: Here, you don't use a purchase controller and you tell RevenueCat that purchases are completed by your app using StoreKit. In this mode, RevenueCat will observe the purchases that the Superwall SDK makes. For more info see here.

1. Create a PurchaseController

Create a new file called RCPurchaseController, then copy and paste the following:

import { Platform } from "react-native"
import Superwall, {
  PurchaseController,
  PurchaseResult,
  RestorationResult,
  SubscriptionStatus,
  PurchaseResultCancelled,
  PurchaseResultFailed,
  PurchaseResultPending,
  PurchaseResultPurchased,
} from 'expo-superwall/compat';
import Purchases, {
  type CustomerInfo,
  PRODUCT_CATEGORY,
  type PurchasesStoreProduct,
  type SubscriptionOption,
  PURCHASES_ERROR_CODE,
  type MakePurchaseResult,
} from "react-native-purchases"

export class RCPurchaseController extends PurchaseController {
  constructor() {
    super()

    Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG);
    const apiKey = Platform.OS === 'ios' ? 'ios_rc_key' : 'android_rc_key';
    Purchases.configure({ apiKey });
  }

  syncSubscriptionStatus() {
    // Listen for changes
    Purchases.addCustomerInfoUpdateListener((customerInfo) => {
      const entitlementIds = Object.keys(customerInfo.entitlements.active)
      Superwall.shared.setSubscriptionStatus(
        entitlementIds.length === 0
          ? SubscriptionStatus.Inactive()
          : SubscriptionStatus.Active(entitlementIds)
      )
    })
  }

  async purchaseFromAppStore(productId: string): Promise<PurchaseResult> {
    const products = await Promise.all([
      Purchases.getProducts([productId], PRODUCT_CATEGORY.SUBSCRIPTION),
      Purchases.getProducts([productId], PRODUCT_CATEGORY.NON_SUBSCRIPTION),
    ]).then((results) => results.flat())

    // Assuming an equivalent for Dart's firstOrNull is not directly available in TypeScript,
    // so using a simple conditional check
    const storeProduct = products.length > 0 ? products[0] : null

    if (!storeProduct) {
      return new PurchaseResultFailed("Failed to find store product for $productId")
    }

    return await this._purchaseStoreProduct(storeProduct)
  }

  async purchaseFromGooglePlay(
    productId: string,
    basePlanId?: string,
    offerId?: string
  ): Promise<PurchaseResult> {
    // Find products matching productId from RevenueCat
    const products = await Promise.all([
      Purchases.getProducts([productId], PRODUCT_CATEGORY.SUBSCRIPTION),
      Purchases.getProducts([productId], PRODUCT_CATEGORY.NON_SUBSCRIPTION),
    ]).then((results) => results.flat())

    // Choose the product which matches the given base plan.
    // If no base plan set, select first product or fail.
    const storeProductId = `${productId}:${basePlanId}`

    // Initialize matchingProduct as null explicitly
    let matchingProduct: PurchasesStoreProduct | null = null

    // Loop through each product in the products array
    for (const product of products) {
      // Check if the current product's identifier matches the given storeProductId
      if (product.identifier === storeProductId) {
        // If a match is found, assign this product to matchingProduct
        matchingProduct = product
        // Break the loop as we found our matching product
        break
      }
    }

    let storeProduct: PurchasesStoreProduct | null =
      matchingProduct ??
      (products.length > 0 && typeof products[0] !== "undefined" ? products[0] : null)

    // If no product is found (either matching or the first one), return a failed purchase result.
    if (storeProduct === null) {
      return new PurchaseResultFailed("Product not found")
    }

    switch (storeProduct.productCategory) {
      case PRODUCT_CATEGORY.SUBSCRIPTION:
        const subscriptionOption = await this._fetchGooglePlaySubscriptionOption(
          storeProduct,
          basePlanId,
          offerId
        )
        if (subscriptionOption === null) {
          return new PurchaseResultFailed("Valid subscription option not found for product.")
        }
        return await this._purchaseSubscriptionOption(subscriptionOption)
      case PRODUCT_CATEGORY.NON_SUBSCRIPTION:
        return await this._purchaseStoreProduct(storeProduct)
      default:
        return new PurchaseResultFailed("Unable to determine product category")
    }
  }

  private async _purchaseStoreProduct(
    storeProduct: PurchasesStoreProduct
  ): Promise<PurchaseResult> {
    const performPurchase = async (): Promise<MakePurchaseResult> => {
      // Attempt to purchase product
      const makePurchaseResult = await Purchases.purchaseStoreProduct(storeProduct)
      return makePurchaseResult
    }
    return await this.handleSharedPurchase(performPurchase)
  }

  private async _fetchGooglePlaySubscriptionOption(
    storeProduct: PurchasesStoreProduct,
    basePlanId?: string,
    offerId?: string
  ): Promise<SubscriptionOption | null> {
    const subscriptionOptions = storeProduct.subscriptionOptions

    if (subscriptionOptions && subscriptionOptions.length > 0) {
      // Concatenate base + offer ID
      const subscriptionOptionId = this.buildSubscriptionOptionId(basePlanId, offerId)

      // Find first subscription option that matches the subscription option ID or use the default offer
      let subscriptionOption: SubscriptionOption | null = null

      // Search for the subscription option with the matching ID
      for (const option of subscriptionOptions) {
        if (option.id === subscriptionOptionId) {
          subscriptionOption = option
          break
        }
      }

      // If no matching subscription option is found, use the default option
      subscriptionOption = subscriptionOption ?? storeProduct.defaultOption

      // Return the subscription option
      return subscriptionOption
    }

    return null
  }

  private buildSubscriptionOptionId(basePlanId?: string, offerId?: string): string {
    let result = ""

    if (basePlanId !== null) {
      result += basePlanId
    }

    if (offerId !== null) {
      if (basePlanId !== null) {
        result += ":"
      }
      result += offerId
    }

    return result
  }

  private async _purchaseSubscriptionOption(
    subscriptionOption: SubscriptionOption
  ): Promise<PurchaseResult> {
    // Define the async perform purchase function
    const performPurchase = async (): Promise<MakePurchaseResult> => {
      // Attempt to purchase product
      const purchaseResult = await Purchases.purchaseSubscriptionOption(subscriptionOption)
      return purchaseResult
    }

    const purchaseResult: PurchaseResult = await this.handleSharedPurchase(performPurchase)
    return purchaseResult
  }

  private async handleSharedPurchase(
    performPurchase: () => Promise<MakePurchaseResult>
  ): Promise<PurchaseResult> {
    try {
      // Perform the purchase using the function provided
      const makePurchaseResult = await performPurchase()

      // Handle the results
      if (this.hasActiveEntitlementOrSubscription(makePurchaseResult.customerInfo)) {
        return new PurchaseResultPurchased()
      } else {
        return new PurchaseResultFailed("No active subscriptions found.")
      }
    } catch (e: any) {
      // Catch block to handle exceptions, adjusted for TypeScript
      if (e.userCancelled) {
        return new PurchaseResultCancelled()
      }
      if (e.code === PURCHASES_ERROR_CODE.PAYMENT_PENDING_ERROR) {
        return new PurchaseResultPending()
      } else {
        return new PurchaseResultFailed(e.message)
      }
    }
  }

  async restorePurchases(): Promise<RestorationResult> {
    try {
      await Purchases.restorePurchases()
      return RestorationResult.restored()
    } catch (e: any) {
      return RestorationResult.failed(e.message)
    }
  }

  private hasActiveEntitlementOrSubscription(customerInfo: CustomerInfo): Boolean {
    return (
      customerInfo.activeSubscriptions.length > 0 &&
      Object.keys(customerInfo.entitlements.active).length > 0
    )
  }
}

As discussed in Purchases and Subscription Status, this PurchaseController is responsible for handling the subscription-related logic. Take a few moments to look through the code to understand how it does this.

2. Configure Superwall

Initialize an instance of RCPurchaseController and pass it in to Superwall.configure(apiKey:purchaseController):

React.useEffect(() => {
  const apiKey = Platform.OS === "ios" ? "MY_SUPERWALL_IOS_API_KEY" : "MY_SUPERWALL_ANDROID_API_KEY"

  const purchaseController = new RCPurchaseController()

  Superwall.configure(apiKey, null, purchaseController)
  purchaseController.syncSubscriptionStatus()
}, [])

3. Sync the subscription status

Then, call purchaseController.syncSubscriptionStatus() to keep Superwall's subscription status up to date with RevenueCat.

That's it! Check out our sample app for working examples:

Using PurchasesAreCompletedBy

If you're using RevenueCat's PurchasesAreCompletedBy, you don't need to create a purchase controller. Register your placements, present a paywall — and Superwall will take care of completing any purchase the user starts. However, there are a few things to note if you use this setup:

Here, you aren't using RevenueCat's entitlements as a source of truth. If your app is multiplatform, you'll need to consider how to link up pro features or purchased products for users.
If you require custom logic when purchases occur, then you'll want to add a purchase controller. In that case, Superwall handles purchasing flows and RevenueCat will still observe transactions to power their analytics and charts.
Be sure that user identifiers are set the same way across Superwall and RevenueCat.

For more information on observer mode, visit RevenueCat's docs.

Using RevenueCat

1. Create a PurchaseController

2. Configure Superwall

3. Sync the subscription status

Using PurchasesAreCompletedBy

On this page