Este plugin se ha transferido al repositorio oficial de RevenueCat. Por favor, consulta documentación oficial para más información.
Si prefieres un API nativo más sencillo sin RevenueCat, @capgo/native-purchases implementa compras integradas y suscripciones directamente con StoreKit y Google Play Billing.
Capacitor Purchases es un plugin para el framework Capacitor que permite realizar compras integradas en iOS y Android. Ofrece una API simple y consistente en múltiples plataformas, facilitando a los desarrolladores la implementación de suscripciones y compras en sus apps móviles.
Una de las características clave del plugin Capacitor Purchases es su integración con RevenueCat, una plataforma que ofrece herramientas para suscripciones y compras integradas. RevenueCat simplifica el proceso de implementación al proporcionar una API sencilla y consistente en varias plataformas, automatizando tareas como la validación de recibos y la gestión de usuarios.
Con RevenueCat, los desarrolladores pueden gestionar suscripciones, trackear ingresos y realizar otras tareas relacionadas fácilmente. Algunas funciones de RevenueCat incluyen:
- Validación automática de recibos
- Gestión de usuarios
- Soporte para modelos de precios personalizados
- Analytics detallados -Escalabilidad
Al usar el plugin Capacitor Purchases con RevenueCat, los desarrolladores ahorran tiempo y esfuerzo al implementar suscripciones y compras en sus apps, aportando funciones extra que mejoran la experiencia de usuario y aumentan los ingresos.
Con el plugin de Capacitor Purchases y RevenueCat, los desarrolladores pueden gestionar y rastrear suscripciones y compras in-app, validar recibos y administrar usuarios en múltiples plataformas. También permite crear modelos de precios personalizados y obtener analíticas detalladas para mejorar el rendimiento y los ingresos.
Instalación
Asegúrate de usar la última versión de Capacitor y el plugin Capacitor Purchases. Puedes consultar la versión más reciente de Capacitor y del plugin Capacitor Purchases en el sitio web de Capacitor.
Para instalar el plugin Capacitor Purchases, ejecuta el siguiente comando:
npm i @capgo/capacitor-purchases
añade el plugin al native code de tu app
npx cap sync
añade la capacidad de in-app purchases en Xcode:
luego
1. Crea una cuenta de RevenueCat
Esta guía te enseñará cómo implementar suscripciones y el SDK de RevenueCat con solo unas pocas líneas de code.
Regístrate para una nueva cuenta de RevenueCat aquí.
📘
💡 ¡Un consejo!
RevenueCat recomienda crear una cuenta de RevenueCat independiente para cada app o proyecto, especialmente si planeas vender la app. Esto agilizará el proceso de transferencia, ya que podrás transferir la cuenta completa en lugar de esperar a que el soporte de RevenueCat transfiera proyectos individuales.
Organizaciones / Enterprise
Recomendamos usar una cuenta corporativa al registrarte en RevenueCat y configurar tu app dentro de un proyecto. Podrás invitar al resto de tu equipo como colaboradores a tu proyecto, pero solo el dueño del proyecto puede gestionar la facturaciónLos colaboradores del proyecto no pueden gestionar los detalles de facturación.
2. Configuración de la App y el Proyecto
▶️ Crear un Proyecto
Ve al dashboard de RevenueCat y añadir un nuevo proyecto en el menú desplegable de la navegación superior llamado Proyectos.
El modal para crear un nuevo Proyecto
▶️ Añadir una App / Plataforma
Desde Configuración del proyecto > Apps en el menú lateral del dashboard del proyecto, selecciona la plataforma de la app que vas a añadir.
Dashboard del proyecto para seleccionar la plataforma
El campo Nombre de la app es necesario para añadir tu app a RevenueCat. El resto de los campos de configuración se pueden añadir después. Para hacer compras de prueba y producción, debes configurar el Bundle ID (iOS) / Package Name (Android), así como el Shared Secret (iOS) / Service Credentials (Android).
Página de configuración de una app de Apple App Store
📘
💡 ¡Un consejo!
Tras registrar tu app, RevenueCat recomienda configurar Notificaciones del servidor de la plataforma. Estas notificaciones no son obligatorias, pero agilizarán los webhooks y los tiempos de entrega de la integración, reduciendo el retraso al actualizar a tus suscriptores.
📘
Apps y usuarios de staging vs. production
RevenueCat en sí no tiene entornos separados para staging y production. En su lugar, las transacciones subyacentes de los usuarios se distinguen entre sandbox y production.
Cualquier app con RevenueCat puede realizar compras tanto en sandbox como en producción. Si usas apps separadas para staging y producción, puedes crear varios proyectos en RevenueCat para replicar tu configuración.
Además, los usuarios tampoco se separan por entorno. Un mismo usuario puede tener compras de sandbox y de producción activas al mismo tiempo.
▶️ Credenciales de servicio
Debes configurar las credenciales de servicio para que RevenueCat se comunique con las tiendas en tu nombre. Consulta las guías de RevenueCat Clave compartida de App Store Connect, Credenciales de servicio de Play, y Secreto compartido de Amazon Appstore para más información.
Ten en cuenta que las credenciales de Play pueden tardar hasta 36 horas en propagarse por los servidores de Google.
3. Configuración de productos
▶️ Configuración de la tienda
Antes de empezar a usar RevenueCat para obtener productos, debes configurar tus productos en las tiendas correspondientes. Consulta las siguientes guías para App Store Connect, Google Play Console, Amazon Appstore, y Stripe y recibir ayuda durante este proceso.
Si vendes productos en iOS, asegúrate de firmar el ‘Paid Applications Agreement’ y completar tus datos bancarios y fiscales en App Store Connect > Acuerdos, impuestos y banca. Esto debe completarse antes de poder probar cualquier compra.
📘
¿Quieres saltarte la configuración de la tienda al testear?
En iOS, puedes posponer la configuración en App Store Connect usando archivos de StoreKit Configuration. Estos archivos requieren un setup mínimo y se configuran directamente en Xcode.
Lee más sobre la configuración de archivos de StoreKit en la guía de Pruebas en sandbox RevenueCat.
▶️ Configura productos y Entitlements en RevenueCat
Una vez que tus productos in-app estén configurados en App Store Connect, Google Play Console, Amazon Appstore, o Stripe, tendrás que copiar esa configuración en el dashboard de RevenueCat. RevenueCat usa un sistema de Entitlements para controlar el acceso a funciones premium, y Offerings para gestionar el conjunto de productos que ofreces a tus clientes.
Los Entitlements son el nivel de acceso al que un cliente tiene derecho tras comprar un producto específico. Los Offerings son una forma sencilla de organizar los productos in-app que quieres ofrecer en tu paywall y configurarlos de forma remota. RevenueCat recomienda usar estas funciones para simplificar tu code y permitirte cambiar productos sin lanzar una nueva actualización de la app.
Ver Configuración de productos para configurar tus productos y luego organizarlos en Offerings o Entitlements.
4. Uso del SDK de Purchases de RevenueCat
RevenueCat SDK implementa compras y suscripciones de forma fluida en todas las plataformas, sincronizando los tokens con el servidor de RevenueCat.
Si tienes problemas con el SDK, consulta Solución de problemas de los SDKs para obtener ayuda.
📘
Usa solo tu clave pública SDK para configurar Purchases
Puedes obtener tu clave pública de SDK desde la las keys de API pestaña en Configuración del proyecto del dashboard.
Solo deberías configurar la instancia compartida de Compras una vez, normalmente al iniciar la app. Después, la misma instancia se comparte en toda tu app accediendo a la .shared instancia en SDK.
Consulta la guía de RevenueCat sobre Configuración de SDK para más información y mejores prácticas.
Asegúrate de configurar Compras solo con tu clave pública SDK. Puedes leer más sobre las distintas claves API disponibles en la guía de autenticación de RevenueCat.
import { CapacitorPurchases } from '@capgo/capacitor-purchases'
import { isPlatform } from '@ionic/vue' // use the right one for your framework
CapacitorPurchases.setDebugLogsEnabled({ enabled: import.meta.env.DEV }) // Enable to get debug logs in dev mode
if (isPlatform('ios')) {
CapacitorPurchases.setup({ apiKey:'appl_******'})
} else if (isPlatform('android')) {
CapacitorPurchases.setup({ apiKey:'goog_******'})
}Durante el desarrollo, RevenueCat recomienda habilitar logs de debug más detallados. Para más información sobre estos logs, consulta su Depuración RevenueCat.
Si planeas usar RevenueCat junto con tu code de compras actual, consulta su guía sobre Modo Observer.
📘
Configurar compras con IDs de usuario
Si tienes un sistema de autenticación de usuarios en tu app, puedes proporcionar un identificador de usuario al configurar o más tarde mediante una llamada a
.logIn(). Para más detalles, revisa la guía de RevenueCat sobre Identificación de usuarios.
El SDK obtendrá automáticamente los Offerings configurados y recuperará la información de productos de Apple, Google o Amazon. Así, los productos disponibles ya estarán cargados cuando los clientes abran la pantalla de compra.
A continuación, un ejemplo de cómo obtener Offerings. Puedes usar Offerings para organizar tu paywall. Consulta la guía de RevenueCat sobre Mostrar productos para más información y mejores prácticas.
▶️ Obtener y mostrar productos disponibles
📘
Configurar compras con IDs de usuario
Si tienes un sistema de autenticación de usuarios en tu app, puedes proporcionar un identificador de usuario al configurar o más tarde mediante una llamada a
.logIn(). Para más detalles, revisa la guía de RevenueCat sobre Identificación de usuarios.
SDK obtendrá automáticamente los Offerings configurados y recuperará la información de productos de Apple, Google o Amazon. Así, los productos estarán listos cuando los clientes abran la pantalla de compra.
Aquí tienes un ejemplo de cómo obtener Offerings. Puedes usar Offerings para organizar tu paywall. Consulta la guía de RevenueCat sobre Mostrando productos para más información y mejores prácticas.
const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {
// Display current offering with offerings.current
}Si al obtener tus Offerings, productos, o disponible packages disponibles están vacíos, se debe a un error de configuración en la tienda correspondiente.
Las razones más comunes en App Store Connect son un ‘Paid Applications Agreement’ desactualizado o productos que no están al menos en estado ‘Ready To Submit’. En Google Play, esto suele ocurrir cuando la app no está publicada en un track cerrado con un usuario de prueba válido.
Puedes encontrar más información para solucionar este problema en el Help Center de RevenueCat Centro de ayuda.
▶️ Realizar una compra
El SDK incluye un método sencillo para facilitar las compras. El purchase:package toma un paquete del Offering obtenido y procesa la transacción con la app store correspondiente.
El ejemplo de code de abajo muestra el proceso para comprar un paquete y confirmar que desbloquea el contenido “your_entitlement_id”. Más detalles sobre el purchase:package método se encuentran en la guía de RevenueCat sobre Realizar compras.
const purchase = async (p: Package): Promise<PurchaserInfo | null> => {
try {
// console.log('purchase', p)
const data = await CapacitorPurchases.purchasePackage({
identifier: p.identifier,
offeringIdentifier: p.offeringIdentifier,
})
const purchaserInfo = data.purchaserInfo
// console.log('listenBuy', purchaserInfo)
if (purchaserInfo.activeSubscriptions.includes(p.identifier)) {
// set the user as paid
}
return purchaserInfo
}
catch (e) {
console.error('listenBuy error', e)
}
return null
}▶️ Consultar estado de suscripción
Puedes usar este método siempre que necesites obtener el estado más reciente; es seguro llamarlo repetidamente durante el ciclo de vida de tu app. Compras cachea automáticamente la última CustomerInfo cada vez que se actualiza, así que en la mayoría de los casos este método lee de la caché y se ejecuta muy rápido.
Es habitual llamar a este método al decidir qué UI mostrar al usuario y cuando este realiza una acción que requiere cierto nivel de entitlement.
📘
💡 ¡Un consejo!
Puedes acceder a mucha más información sobre una suscripción que simplemente saber si está activa o no. Consulta la guía de RevenueCat sobre Estado de la suscripción para saber si la suscripción está configurada para renovarse, si se detectó un problema con la tarjeta del usuario y más.
RevenueCat permite a tus usuarios restaurar sus compras in-app, reactivando cualquier contenido que hayan comprado previamente en la misma cuenta de la tienda (cuenta de Apple, Google o Amazon). Recomendamos que todas las apps tengan alguna forma de que los usuarios ejecuten el método de restauración. Ten en cuenta que Apple sí exige un mecanismo de restauración en caso de que el usuario pierda el acceso a sus compras (p. ej.: desinstalar/reinstalar la app, perder la información de la cuenta, etc.).
const res = await CapacitorPurchases.restoreTransactions()
const purchaserInfo = res.purchaserInfo
const ids: string[] = [] // extract active subscriptions ids
purchaserInfo.activeSubscriptions.forEach((id) => {
ids.push(id)
})Si dos diferentes IDs de usuario de la app restaurar transacciones de la misma cuenta de la tienda subyacente (cuenta de Apple, Google o Amazon). RevenueCat puede intentar crear un alias entre los dos App User IDs y contarlos como el mismo usuario de ahora en adelante. Consulta la guía de RevenueCat sobre Restauración de compras para más información sobre los diferentes comportamientos de restauración configurables.
Como SDK funciona sin problemas en cualquier plataforma, los cambios en la información de compra de un usuario pueden provenir de diversas fuentes. Puedes responder a cualquier cambio en la CustomerInfo mediante un método delegate opcional, purchases:receivedUpdated:.
Este método se ejecutará cada vez que SDK reciba un objeto CustomerInfo actualizado tras las llamadas a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().
Las actualizaciones de CustomerInfo se necesitas envían a tu app desde el backend de RevenueCat; las actualizaciones solo pueden ocurrir mediante una solicitud de red saliente hacia RevenueCat, como se mencionó anteriormente.
Dependiendo de tu app, puede ser suficiente ignorar el delegate y simplemente gestionar los cambios en la información del cliente la próxima vez que se inicie la app o en los completion blocks de los métodos de SDK.
CapacitorPurchases.addListener('purchasesUpdate', (data) => {
console.log('purchasesUpdate', data)
})👍
¡Lo lograste!
Ya has implementado un sistema completo de compra de suscripciones sin pasar un mes escribiendo code en el servidor. ¡Felicidades!
Apps de ejemplo
Para descargar ejemplos más completos sobre cómo integrar SDK, visita los recursos de la app de muestra de RevenueCat.
Pronto publicaré una app de ejemplo usando Capacitor y Vue.js.
Si necesitas profundizar en el uso del Capacitor SDK, consulta la documentación. aquí.
Próximos pasos
\
- Si aún no lo has hecho, asegúrate de que tus productos estén configurados correctamente revisando RevenueCat sobre entitlements.
- Si quieres usar tus propios identificadores de usuario, lee sobre Configurar IDs de usuario de la app .
- Si te pasas a RevenueCat desde otro sistema, consulta la guía de RevenueCat sobre la migración de tus suscripciones actuales.
- Cuando estés listo para probar la integración, puedes seguir las guías de RevenueCat sobre pruebas y debugging.
- Si calificas para el App Store Small Business Program, mira la guía de RevenueCat sobre cómo solicitarlo y avisar a RevenueCat
Si necesitas Live update en tu app
Únete aquí 👇
Regístrate aquí para obtener tu cuenta
Sigue avanzando con las compras in-app para capacitor
Si estás usando compras in-app para capacitor para planificar pagos y compras, conéctalo con Precios de Capgo para el flujo de trabajo de productos en Capgo Pricing, Sistema de pagos para el detalle de implementación en Sistema de pagos, @capgo/native-purchases para los detalles de implementación en @capgo/native-purchases, Primeros pasos por los detalles de implementación en Getting Started, y Estrategia de ingresos para el detalle de implementación en Revenue Playbook.
