Cómo implementar el Customer Center de RevenueCat

RevenueCat ha lanzado una nueva funcionalidad llamada Customer Center, diseñada para que los usuarios puedan gestionar sus suscripciones activas directamente en tu app. Esto ayuda a los desarrolladores a reducir el tiempo dedicado al soporte, permitiéndoles enfocarse en crear nuevas funcionalidades. Si aún no tienes configurado RevenueCat, éste artículo aprenderás a hacerlo.

Esta vista está en BETA, disponible solo para iOS 15 en adelante y la versión 5.5.0 o superior de RevenueCat. Al estar en BETA, podrían surgir errores o cambios en el futuro.

Funcionalidades del Customer Center

  • El usuario puede ver detalles de su suscripción actual, la próxima fecha de cobro, el precio y el tipo de suscripción (semanal, mensual, anual, etc.).
Vista Customer Center de RevenueCat
  • Si hubo un problema con la compra, el usuario podrá restaurarla.
Vista Customer Center de RevenueCat
  • Los usuarios pueden solicitar una devolución y seleccionar el motivo.
Vista Customer Center de RevenueCat
  • Es posible ver todos los planes de suscripción disponibles y cambiar entre ellos (por ejemplo, de semanal a mensual).
Vista Customer Center de RevenueCat
  • Los usuarios pueden cancelar su suscripción e indicar el motivo.
Vista Customer Center de RevenueCat

Con estas funcionalidades, se reduce el número de consultas sobre problemas de compra o solicitudes de cancelación y cambios de suscripción, permitiéndote ahorrar tiempo en soporte.

Implementación del Customer Center

A continuación, te mostramos cómo implementar esta vista en tu app con Swift:

import SwiftUI
// 1
import RevenueCatUI
public struct ContentView: View {
// 2
@State private var showCustomerCenter: Bool = false
public var body: some View {
Button {
showCustomerCenter = true
} label: {
Text("Show customer center")
}
.sheet(isPresented: $showCustomerCenter, content: {
// 3
CustomerCenterView()
})
}
}
  1. Lo primero que hacemos es importar RevenueCatUI.
  2. Creamos una variable de estado para controlar la presentación del .sheet.
  3. Utilizamos la vista CustomerCenterView.

También puedes presentar el CustomerCenterView mediante el modificador .presentCustomerCenter de la siguiente forma:

import SwiftUI
import RevenueCatUI
public struct ContentView: View {
@State private var showCustomerCenter: Bool = false
public var body: some View {
Button {
showCustomerCenter = true
} label: {
Text("Show customer center")
}
.presentCustomerCenter(isPresented: $showCustomerCenter) {
self.showCustomerCenter = false
}
}
}

Escuchar eventos del Customer Center

Puedes escuchar eventos basados en las acciones del usuario con el siguiente código:

CustomerCenterView { customerCenterAction in
switch customerCenterAction {
case .restoreStarted:
case .restoreFailed(_):
case .restoreCompleted(_):
case .showingManageSubscriptions:
case .refundRequestStarted(_):
case .refundRequestCompleted(_):
}
}

O también usando el siguiente modificador:

.presentCustomerCenter(
isPresented: $showCustomerCenter,
customerCenterActionHandler: { action in
switch action {
case .restoreCompleted(let customerInfo):
case .restoreStarted:
case .restoreFailed(let error):
case .showingManageSubscriptions:
case .refundRequestStarted(let productId):
case .refundRequestCompleted(let status):
case .feedbackSurveyCompleted(let surveyOptionID):
}
}
) {
self.showCustomerCenter = false
}

Estos eventos te permiten ejecutar acciones en tu app según lo que el usuario haga, por ejemplo, restaurar compras con éxito puede habilitar funciones premium.

Personalización del Customer Center

Puedes personalizar los colores del Customer Center desde el dashboard de RevenueCat. Para ello, ve a la sección Monetization Tools y selecciona Customer Center.

Dsahboard de RevenueCat, sección Monetization tools

En esta sección, podrás personalizar los colores tanto para el modo claro como para el modo oscuro.

Dsahboard de RevenueCat, sección Monetization tools

Además, tienes la opción de editar un JSON para controlar más aspectos de la vista. Por ejemplo, puedes:

  • Personalizar las localizaciones para que coincidan con los idiomas soportados por tu app.
{
"localization": {
"default": "en",
"localized_strings": {
"cancel_survey_title": {
"ar": "لماذا تلغي الاشتراك؟",
"ca": "Per què estàs cancel·lant?",
"cs": "Proč rušíte?",
"da": "Hvorfor annullerer du?",
"de": "Warum kündigen Sie?",
"el": "Γιατί ακυρώνετε;",
"en": "Why are you cancelling?",
"es": "¿Por qué estás cancelando?",
...
}
}
}
}
  • Editar las distintas vistas que se muestran, como la cancelación de suscripciones o las solicitudes de devolución en la sección screens. Por ejemplo, si no quieres mostrar la vista de cancelación de suscripciones, puedes eliminarla del JSON y no se mostrará.
{
"screens": {
"MANAGEMENT": {
"paths": [
{
"id": "management_path_missing_purchases_id",
"title_key": "path_missing_purchase",
"type": "MISSING_PURCHASE"
},
{
"id": "management_path_refund_id",
"title_key": "path_refund",
"type": "REFUND_REQUEST"
},
{
"id": "management_path_change_id",
"title_key": "path_change",
"type": "CHANGE_PLANS"
},
{
"id": "management_path_cancel_id",
"title_key": "path_cancel",
"type": "CANCEL"
}
],
"title_key": "screen_management_title",
"type": "MANAGEMENT"
},
"NO_ACTIVE": {
"paths": [
{
"id": "no_active_missing_purchases_id",
"title_key": "no_active_check_purchases",
"type": "MISSING_PURCHASE"
}
],
"subtitle_key": "screen_no_active_subtitle",
"title_key": "screen_no_active_title",
"type": "NO_ACTIVE"
}
}
}
  • Cambiar las claves title_key o subtitle_key por las que prefieras. Si la clave no existe en la sección de localizations, debes agregarla.

Con esta configuración, tus usuarios podrán gestionar fácilmente sus suscripciones sin necesidad de contactarte.

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn