AI agents: the complete RevenueCat documentation index is available at llms.txt. A Markdown version of this page is available at this URL.

Integrating Customer Center on React Native

Ask Rico

Copied as markdown!

Installation

Before integrating the Customer Center in React Native, update your package.json to include react-native-purchases-ui 8.7.0 or higher to your app.

{
  "dependencies": {
    "react-native-purchases": "<latest version>",
    "react-native-purchases-ui": "<latest version>"
  }
}

Integration

Opening the customer center is as simple as:

await RevenueCatUI.presentCustomerCenter();

Listening to events

We've added a way to listen to events that occur within the Customer Center. For now, we are not posting any event to our backend (like feedback survey selections). We are going to be adding way more events in the future, but these are what are available for now:

React Native

import { RevenueCatUI } from 'react-native-purchases-ui';
import { CustomerInfo, PurchasesError, REFUND_REQUEST_STATUS, CustomerCenterManagementOptionEvent } from 'react-native-purchases';

await RevenueCatUI.presentCustomerCenter({
  callbacks: {
    onFeedbackSurveyCompleted: ({ feedbackSurveyOptionId }: { feedbackSurveyOptionId: string }) => {
      // User completed a feedback survey
    },
    onShowingManageSubscriptions: () => {
      // Manage subscriptions screen is displayed
    },
    onRestoreStarted: () => {
      // Restore purchases process started
    },
    onRestoreCompleted: ({ customerInfo }: { customerInfo: CustomerInfo }) => {
      // Restore purchases completed successfully
    },
    onRestoreFailed: ({ error }: { error: PurchasesError }) => {
      // Restore purchases failed
    },
    onRefundRequestStarted: ({ productIdentifier }: { productIdentifier: string }) => {
      // iOS only
      // Refund request initiated
    },
    onRefundRequestCompleted: ({
      productIdentifier,
      refundRequestStatus
    }: {
      productIdentifier: string;
      refundRequestStatus: REFUND_REQUEST_STATUS
    }) => {
      // iOS only
      // Refund request completed
    },
    onManagementOptionSelected: ({ option, url }: CustomerCenterManagementOptionEvent) => {
      // User selected a management option
      // url is only present for custom_url options
    },
  }
});

Setup promotional offers

Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in App Store Connect and Google Play Store.

The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. For React Native you are going to have to configure these promotional offers in both Google Play Console and App Store Connect. Refer to configuring Google Play Store promotional offers and configuring App Store Connect promotional offers for detailed instructions.

Learn more about configuring the Customer Center in the configuration guide.

Was this page helpful?