Integrating Customer Center on Android

Installation

Before integrating the Customer Center in Android, you need to add the com.revenuecat.purchases:purchases-ui SDK 8.12.2 or higher to your app.

implementation 'com.revenuecat.purchases:purchases:<latest version>'
implementation 'com.revenuecat.purchases:purchases-ui:<latest version>'

Integration

There's a CustomerCenter composable that can be used to display the Customer Center. It's intended to be used as a full screen composable so make sure to use it with a fillMaxSize modifier:

Kotlin

import com.revenuecat.purchases.ui.revenuecatui.customercenter.CustomerCenter

...

@Composable
fun YourAppScreen() {
    var isCustomerCenterVisible by remember { mutableStateOf(false) }

    if (isCustomerCenterVisible) {
        CustomerCenter(modifier = Modifier.fillMaxSize(), onDismiss = { isCustomerCenterVisible = false })
        return
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Button(onClick = {
            isCustomerCenterVisible = true
        }) {
            Text(text = "Show customer center")
        }
    }
}

Alternatively, you can instantiate the Customer Center as an Activity:

Kotlin

import com.revenuecat.purchases.ui.revenuecatui.customercenter.ShowCustomerCenter

class MyActivity : ComponentActivity() {
    private val customerCenter = registerForActivityResult(ShowCustomerCenter()) {
        // Handle the dismissal
    }
    
    fun showCustomerCenter() {
        customerCenter.launch()
    }
}

Ensuring Proper Theming for Customer Center

To ensure that Customer Center displays correctly with the right colors, contrast, and theme consistency, it needs to be wrapped in Material 3's MaterialTheme. This allows it to dynamically adapt to dark and light mode while applying the correct Material Design colors to all UI elements. If your app already uses Material 3's MaterialTheme with appropriate color schemes for dark and light mode, no additional changes are needed. However, if CustomerCenter is the only composable in your hierarchy, if you're using Material 2, or if you're using another theming system, you may need to explicitly wrap it in Material 3's MaterialTheme to ensure proper theming.

Kotlin

import androidx.compose.material3.MaterialTheme

val isDarkTheme = isSystemInDarkTheme()
val colorScheme = if (isDarkTheme) darkColorScheme() else lightColorScheme()

MaterialTheme(
    colorScheme = colorScheme,
) {
    CustomerCenter(
        modifier = Modifier.fillMaxSize(),
        onDismiss = { isCustomerCenterVisible = false }
    )
} 

Listening to Customer Center Events

You can listen to Customer Center events in two ways: using a global listener, or using a local listener through the CustomerCenter composable options.

First, create a CustomerCenterListener implementation:

Kotlin

private fun createCustomerCenterListener(): CustomerCenterListener {
    return object : CustomerCenterListener {
        override fun onManagementOptionSelected(action: CustomerCenterManagementOption) {
            when (action) {
                CustomerCenterManagementOption.MissingPurchase -> {
                    // User selected missing purchase option
                }
                CustomerCenterManagementOption.Cancel -> {
                    // User selected cancel option
                }
                is CustomerCenterManagementOption.CustomUrl -> {
                    val uri: Uri = action.uri
                    // User selected a custom URL option
                }
            }
        }

        override fun onRestoreStarted() {
            // Restore purchases process started
        }

        override fun onRestoreCompleted(customerInfo: CustomerInfo) {
            // Restore purchases completed successfully
        }

        override fun onRestoreFailed(error: PurchasesError) {
            // Restore purchases failed
        }

        override fun onShowingManageSubscriptions() {
            // Manage subscriptions screen is displayed
        }

        override fun onFeedbackSurveyCompleted(feedbackSurveyOptionId: String) {
            // User completed a feedback survey
        }
    }
} 

Then, you can use it in one of two ways:

1. As a global listener that will be called for all Customer Center instances:

Kotlin

// Create and set the global listener
val customerInfoListener = createCustomerCenterListener()
Purchases.sharedInstance.customerCenterListener = customerInfoListener 

2. As a local listener through the CustomerCenter composable options:

Kotlin

val customerCenterListener = remember { createCustomerCenterListener() }

if (isCustomerCenterVisible) {
    CustomerCenter(
        modifier = Modifier.fillMaxSize(),
        options = CustomerCenterOptions.Builder()
            .setListener(customerCenterListener)
            .build(),
    ) {
        isCustomerCenterVisible = false
    }
    return
} 

The following events are available:

• onManagementOptionSelected: Called when a user selects a management option (missing purchase, cancel, or custom URL)
• onRestoreStarted: Called when the restore process begins
• onRestoreCompleted: Called when the restore process completes successfully
• onRestoreFailed: Called when the restore process fails
• onShowingManageSubscriptions: Called when the manage subscriptions screen is shown
• onFeedbackSurveyCompleted: Called when a user completes a feedback survey

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 Google Play Console.

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. Refer to configuring Google Play Store promotional offers for detailed instructions.

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