Cómo implementar el Customer Center de RevenueCat
Marcelo Laprea
16 octubre, 20244min de lectura
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.).
- Si hubo un problema con la compra, el usuario podrá restaurarla.
- Los usuarios pueden solicitar una devolución y seleccionar el motivo.
- Es posible ver todos los planes de suscripción disponibles y cambiar entre ellos (por ejemplo, de semanal a mensual).
- Los usuarios pueden cancelar su suscripción e indicar el motivo.
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// 1import RevenueCatUIpublic struct ContentView: View {// 2@State private var showCustomerCenter: Bool = falsepublic var body: some View {Button {showCustomerCenter = true} label: {Text("Show customer center")}.sheet(isPresented: $showCustomerCenter, content: {// 3CustomerCenterView()})}}
- Lo primero que hacemos es importar
RevenueCatUI
. - Creamos una variable de estado para controlar la presentación del
.sheet
. - Utilizamos la vista
CustomerCenterView
.
También puedes presentar el CustomerCenterView
mediante el modificador .presentCustomerCenter
de la siguiente forma:
import SwiftUIimport RevenueCatUIpublic struct ContentView: View {@State private var showCustomerCenter: Bool = falsepublic 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 inswitch 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 inswitch 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.
En esta sección, podrás personalizar los colores tanto para el modo claro como para el modo oscuro.
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
osubtitle_key
por las que prefieras. Si la clave no existe en la sección delocalizations
, debes agregarla.
Con esta configuración, tus usuarios podrán gestionar fácilmente sus suscripciones sin necesidad de contactarte.