Using the Superwall Delegate

Use Superwall's delegate to extend our SDK's functionality across several surface areas by assigning to the delegate property:

import { useSuperwallEvents } from "expo-superwall";

// Use the useSuperwallEvents hook to subscribe to Superwall events
function MyApp() {
  useSuperwallEvents({
    onSuperwallEvent: (eventInfo) => {
      console.log('Superwall Event:', eventInfo.event.event, eventInfo.params);
    },
    onSubscriptionStatusChange: (status) => {
      console.log('Subscription Status Changed:', status.status);
    },
    onPaywallPresent: (info) => {
      console.log('Paywall Presented:', info.name);
    },
    onPaywallDismiss: (info, result) => {
      console.log('Paywall Dismissed:', info.name, 'Result:', result);
    },
    onCustomPaywallAction: (name) => {
      console.log('Custom Action:', name);
      // Handle custom actions here
    },
  });

  return (
    // Your app content
  );
}

The new hooks-based SDK uses useSuperwallEvents() instead of the delegate pattern. For delegate functionality with the compat SDK, use expo-superwall/compat.

Some common use cases for using the Superwall delegate include:

Custom actions: Respond to custom tap actions from a paywall.
Respond to purchases: See which product was purchased from the presented paywall.
Analytics: Forward events from Superwall to your own analytics.

Below are some commonly used implementations when using the delegate.

Superwall Events

Most of what occurs in Superwall can be viewed using the delegate method to respond to events:

export class MySuperwallDelegate extends SuperwallDelegate {
  handleSuperwallPlacement(placementInfo: SuperwallPlacementInfo) {
    console.log("Handling Superwall placement:", placementInfo)

    switch (placementInfo.placement.type) {
      case PlacementType.transactionComplete:
        const product = placementInfo.params?.["product"]
        if (product) {
          console.log(`Product: ${product}`)
        } else {
          console.log("Product not found in params.")
        }
        break
      default:
        // Handle any other placement types as needed...
        break
    }
  }
}

Paywall Custom Actions

Using the custom tap action, you can respond to any arbitrary event from a paywall:

import { useSuperwallEvents } from "expo-superwall";

function MyApp() {
  useSuperwallEvents({
    onCustomPaywallAction: (name) => {
      console.log("Handling custom paywall action:", name);
      // Handle your custom actions here
    },
  });

  return (
    // Your app content
  );
}

You can be informed of subscription status changes using the delegate. If you need to set or handle the status on your own, use a purchase controller — this function is only for informational, tracking or similar purposes:

import { useSuperwallEvents } from "expo-superwall";

function MyApp() {
  useSuperwallEvents({
    onSubscriptionStatusChange: (status) => {
      console.log("Subscription status changed to:", status.status);
      if (status.status === "ACTIVE") {
        console.log("Active entitlements:", status.entitlements);
      }
    },
  });

  return (
    // Your app content
  );
}

Paywall events

The delegate also has callbacks for several paywall events, such dismissing, presenting, and more. Here's an example:

export class MySuperwallDelegate extends SuperwallDelegate {
  didPresentPaywall(paywallInfo: PaywallInfo): void {
    console.log("Paywall did present:", paywallInfo)
  }
}

Using the Superwall Delegate

Superwall Events

Paywall Custom Actions

Subscription status changes

Paywall events

On this page