Skip to main content

Integrating Customer Center on React Native

Installation​

Release

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:

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.