compras en la aplicación para capacitor

Este complemento se ha transferido a la repositorio oficial de RevenueCat. Consulte la documentación oficial para obtener más información.

Capacitor Purchases is a plugin for the Capacitor framework that allows in-app purchases on iOS and Android. It provides a simple and consistent API across multiple platforms, making it easy for developers to implement in-app subscriptions and purchases in their mobile apps.

Una de las características clave del plugin de compras Capacitor es que se integra con RevenueCat, una plataforma que proporciona herramientas para suscripciones y compras en aplicaciones móviles. RevenueCat simplifica el proceso de implementar suscripciones y compras en aplicaciones móviles proporcionando una interfaz simple y consistente API en múltiples plataformas, y automatizando tareas como la validación de recibos y la gestión de usuarios.

Con RevenueCat, los desarrolladores pueden gestionar fácilmente suscripciones, rastrear ingresos y realizar otras tareas relacionadas. Algunas características ofrecidas por RevenueCat incluyen:

Validación automática de recibos
Gestión de usuarios
Soporte para modelos de precios personalizados
Análisis detallado -Escalabilidad

Al utilizar el plugin de compras Capacitor con RevenueCat, los desarrolladores pueden ahorrar tiempo y esfuerzo al implementar suscripciones y compras en aplicaciones móviles, y proporcionar características adicionales que pueden ayudar a mejorar la experiencia del usuario y aumentar los ingresos.

Al utilizar el plugin de compras Capacitor y RevenueCat, los desarrolladores pueden gestionar y rastrear fácilmente suscripciones y compras en aplicaciones móviles, validar recibos y gestionar usuarios en múltiples plataformas. También permite crear modelos de precios personalizados y obtener análisis detallados para mejorar el rendimiento y los ingresos.

Instalación

Asegúrese de utilizar la versión más reciente de Capacitor y el plugin de compras Capacitor. Puede verificar la versión más reciente de Capacitor y el plugin de compras Capacitor en el sitio web de Capacitor.

Para instalar el plugin de compras Capacitor, ejecute el siguiente comando: npm i @capgo/capacitor-purchases agrega el plugin a tu aplicación nativa code npx cap sync

agrega la capacidad de compras en la aplicación en Xcode:

Paso 1 de Xcode luego paso 2 de Xcode

1. Crea una cuenta de RevenueCat

Esta guía te guiará a través de cómo obtener en marcha con suscripciones y RevenueCat’s SDK con solo unas pocas líneas de code.

Registra una nueva cuenta de RevenueCat aquí.

📘

💡 ¡Aquí tienes una pista!

RevenueCat recomienda crear una cuenta de RevenueCat separada para cada aplicación / proyecto que tengas, especialmente si alguna vez planeas vender la aplicación. Esto acelerará el proceso de transferencia, ya que puedes transferir la cuenta completa en lugar de esperar a que el soporte de RevenueCat transfiera proyectos individuales.

Organizaciones / Empresa

Recomendamos utilizar una cuenta de empresa al registrarse en RevenueCat y configurar la aplicación dentro de un proyecto. Podrá invitar al resto de su equipo como colaboradores de su proyecto, pero solo el propietario del proyecto puede gestionar la facturación. Los colaboradores del proyecto no pueden gestionar los detalles de facturación.

2. Configuración del Proyecto y Aplicación

▶️ Crear un Proyecto

Navegue hasta la consola de RevenueCat y agregue un nuevo proyecto desde el menú desplegable en la navegación superior llamado Proyectos.

Paso 1 de RevenueCat

El modal de popup para crear un nuevo Proyecto

▶️ Agregar una Aplicación / Plataforma

Desde Configuración de Proyecto > Aplicaciones en el menú izquierdo de la consola de proyecto, seleccione la plataforma para la aplicación que estará agregando.

Paso 2 de RevenueCat

Consola de proyecto para seleccionar la plataforma de la aplicación

El campo Nombre de la Aplicación es requerido para agregar su aplicación a RevenueCat. Los demás campos de configuración pueden agregarse más tarde. Para realizar compras de prueba y producción, deben configurarse el ID de Bundle (iOS) / Nombre de Paquete (Android) así como la Clave Compartida (iOS) / Credenciales de Servicio (Android).

Paso 3 de RevenueCat

Página de configuración de Aplicación para una aplicación de Apple App Store

📘

💡 ¡Ten en cuenta esto!

Después de registrar tu aplicación, RevenueCat recomienda configurar Notificaciones del Servidor de la Plataforma. Estas notificaciones no son obligatorias, pero acelerarán webhooks y reducirán el tiempo de entrega de la integración y el tiempo de espera al actualizar a tus suscriptores.

📘

Aplicaciones de pruebas y producción y usuarios

RevenueCat no tiene entornos separados para pruebas y producción. En su lugar, las transacciones subyacentes para los usuarios se diferencian por sandbox y producción.

Cualquier aplicación de RevenueCat puede realizar compras tanto en sandbox como en producción desde las tiendas. Si tienes aplicaciones separadas para pruebas y producción, puedes crear varios proyectos en RevenueCat para reflejar tu configuración.

Además, los usuarios no se separan por entorno, ya que el mismo usuario puede tener compras activas tanto en sandbox como en producción al mismo tiempo.

▶️ Credenciales de Servicio

Las credenciales de servicio deben configurarse para que RevenueCat pueda comunicarse con las tiendas de aplicaciones en tu nombre. Consulta las guías de RevenueCat App Store Connect Shared Secret, Credenciales de Servicio de Play, y Amazon Appstore Shared Secret para obtener más información.

Ten en cuenta que las credenciales de servicio de Play pueden tardar hasta 36 horas en propagarse a través de los servidores de Google.

3. Configuración del producto

▶️ Configuración de la tienda

Antes de que puedas empezar a utilizar RevenueCat para obtener productos, debes configurar tus productos en las tiendas respectivas. Consulta los siguientes guías para App Store Connect, Google Play Console, Amazon Appstore, y Stripe para obtener ayuda para navegar por este proceso.

Si estás vendiendo productos iOS, asegúrate de firmar tu ‘Acuerdo de Aplicaciones Pagadas’ y rellena tu información bancaria y fiscal en App Store Connect > Acuerdos, Impuestos y Bancos. Esto debe completarse antes de que puedas probar cualquier compra..

📘

¿Quieres saltarte la configuración de la tienda mientras pruebas?

En iOS, puedes posponer la configuración de productos en App Store Connect configurando archivos de configuración de StoreKit en su lugar. Estos archivos de configuración requieren un mínimo de configuración y son configurables directamente a través de Xcode.

Lee más sobre la configuración de archivos de configuración de StoreKit en RevenueCat Pruebas en Entorno de Pruebas guía.

▶️ Configura Productos y Entitlements en RevenueCat

Una vez que sus productos en la aplicación estén configurados en App Store Connect, Google Play Console, Amazon Appstoreo Stripenecesitará copiar esa configuración en el panel de control de RevenueCat. RevenueCat utiliza un sistema de Entitlements para controlar el acceso a características premium y Ofertas para gestionar el conjunto de productos que ofrece a los clientes.

Los Entitlements son el nivel de acceso que un cliente está "autorizado" a después de comprar un producto específico. Las Ofertas son una forma sencilla para organizar los productos en la aplicación que desea "ofrecer" en su paywall y configurarlos remotamente. RevenueCat utilizing these features to simplify your code and enable you to change products without releasing an app update.

utilizar estas características para simplificar su __CAPGO_KEEP_0__ y permitirle cambiar productos sin actualizar la aplicación. Consulte la sección "Configuración de productos" Configurar sus productos y luego organizarlos en Ofertas o Entregas.

Paso 4 de RevenueCat

4. Usando Purchases de RevenueCat SDK

RevenueCat SDK implementa de manera fluida compras y suscripciones en varias plataformas mientras sincroniza tokens con el servidor de RevenueCat.

Si se presentan problemas con el SDK, consulte Solución de problemas de los SDK para obtener orientación.

📘

Solo utilice su clave pública SDK para configurar Purchases

Puede obtener su clave pública SDK desde la pestaña de claves API bajo Configuración del proyecto en el panel de control.

Deberías configurar solo la instancia compartida de Compras solo una vez, generalmente al iniciar la aplicación. Posteriormente, la misma instancia se comparte a lo largo de tu aplicación accediendo a la .shared instancia en el SDK.

Consulte la guía de RevenueCat sobre Configuración de SDK para obtener más información y mejores prácticas.

Asegúrate de configurar Compras con tu clave pública SDK solo. Puedes leer más sobre los diferentes API claves disponibles en la guía de autenticación de RevenueCat Asegúrate de configurar con tu clave pública __CAPGO_KEEP_0__ solo..

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_******'})
}

Cuando estás en desarrollo, RevenueCat recomienda habilitar registros de depuración más verbales. Para obtener más información sobre estos registros, consulta su guía de depuración.

Si planeas utilizar RevenueCat junto con tu compra existente code, consulta su guía sobre modo de observación..

📘

Configuración de compras con IDs de usuario

Si tienes un sistema de autenticación de usuarios en tu aplicación, puedes proporcionar un identificador de usuario en el momento de la configuración o en un momento posterior con una llamada a .logIn(). Para obtener más información, consulta la guía de RevenueCat sobre identificación de usuarios..

El SDK recuperará automáticamente los ofertas configuradas y recuperará la información del producto de Apple, Google o Amazon. Por lo tanto, los productos disponibles ya estarán cargados cuando los clientes lancen tu pantalla de compra.

A continuación se muestra un ejemplo de recuperación de Ofertas. Puede utilizar Ofertas para organizar su pantalla de pago. Consulte la guía de RevenueCat sobre Mostrar Productos ▶️ Recuperar y mostrar productos disponibles

Configuración de compras con identificadores de usuario

📘

Si tiene un sistema de autenticación de usuarios en su aplicación, puede proporcionar un identificador de usuario en el momento de la configuración o en un momento posterior con una llamada a

Para obtener más información, consulte la guía de RevenueCat sobre .logIn()Identificación de usuarios El __CAPGO_KEEP_0__ recuperará automáticamente las.

The SDK will automatically fetch the y recuperará la información de producto de Apple, Google o Amazon. Por lo tanto, los productos disponibles ya estarán cargados cuando los clientes lancen su pantalla de compra. A continuación se muestra un ejemplo de recuperación de Ofertas. Puede utilizar Ofertas para organizar su pantalla de pago. Consulte la guía de RevenueCat sobre

▶️ Recuperar y mostrar productos disponibles Mostrando Productos para obtener más información y mejores prácticas.

const { offerings } = await CapacitorPurchases.getOfferings()
if (offerings.current !== null) {  
    // Display current offering with offerings.current
}

Si está obteniendo su Ofertas, productos, o disponibles paquetes están vacíos, se debe a algún problema de configuración en la tienda correspondiente.

Las razones más comunes para esto en App Store Connect son un 'Acuerdo de Aplicaciones Pagadas' desactualizado o productos que no están al menos en el estado 'Listo para Enviar'. En Google Play, esto suele ocurrir cuando la aplicación no está publicada en un track cerrado y se ha agregado un usuario de prueba válido.

Puede encontrar más información sobre cómo solucionar este problema en el Centro de Ayuda de RevenueCat ▶️ Realizar una Compra.

▶️

The SDK incluye un método simple para facilitar las compras. El purchase:package realiza un paquete desde la oferta recuperada y procesa la transacción con la tienda de aplicaciones correspondiente.

The code muestra a continuación el proceso de compra de un paquete y la confirmación de que desbloquea el contenido ‘your_entitlement_id’. Para obtener más detalles sobre el purchase:package método, consulte la guía de RevenueCat sobre Hacer 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
}

▶️ Verificar el estado de la suscripción

Puede utilizar este método cada vez que necesite obtener el estado más reciente, y es seguro llamar a este método repetidamente a lo largo de la vida útil de su aplicación. Las compras se almacenan automáticamente en caché el estado más reciente cada vez que se actualiza — por lo tanto, en la mayoría de los casos, este método recupera de la caché y ejecuta muy rápido. Es común llamar a este método cuando se decide qué interfaz mostrar al usuario, y cada vez que el usuario realiza una acción que requiere un nivel de permiso específico. CustomerInfo 💡 ¡Aquí tienes un consejo!

Automatic Purchases

📘

Check Subscription Status

Puedes acceder a mucha más información sobre una suscripción que simplemente si está activa o no. Consulta la guía de RevenueCat sobre Estado de Suscripción para saber si la suscripción está configurada para renovarse, si hay un problema detectado con la tarjeta de crédito del usuario y más.

RevenueCat permite a tus usuarios restaurar sus compras en la aplicación, reactivando cualquier contenido que hayan comprado anteriormente desde la misma cuenta de tienda (cuenta de Apple, Google o Amazon). Recomendamos que todas las aplicaciones tengan alguna forma para que los usuarios puedan desencadenar el método de restauración. Ten en cuenta que Apple requiere un mecanismo de restauración en caso de que un usuario pierda acceso a sus compras (por ejemplo: desinstalando/reinstalando la aplicación, perdiendo la información de 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 Aplicación restauran transacciones desde la misma cuenta de tienda subyacente (cuenta de Apple, Google o Amazon). RevenueCat puede intentar crear un alias entre los dos IDs de Usuario de Aplicación y contarlos como el mismo usuario a partir de ese momento. Consulta la guía de RevenueCat sobre Restaurar Compras

Since the SDK works seamlessly on any platform, changes to a user’s purchase info may come from a variety of sources. You can respond to any changes in a customer’s CustomerInfo conformando a un método de delegado opcional purchases:receivedUpdated:.

Este método disparará cada vez que el SDK reciba una actualización CustomerInfo de llamadas a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().

Los cambios en la información del cliente no se pushed a su aplicación desde el backend de RevenueCat, las actualizaciones solo pueden ocurrir desde una solicitud de red saliente a RevenueCat, como se mencionó anteriormente. Dependiendo de su aplicación, puede ser suficiente ignorar al delegado y manejar cambios en la información del cliente la próxima vez que su aplicación se inicie o en los bloques de finalización de los métodos del __CAPGO_KEEP_0__.

Depending on your app, it may be sufficient to ignore the delegate and simply handle changes to customer information the next time your app is launched or in the completion blocks of the SDK methods.

CapacitorPurchases.addListener('purchasesUpdate', (data) => {
  console.log('purchasesUpdate', data)
})

👍

¡Has implementado ahora un sistema de compras de suscripciones completo sin pasar un mes escribiendo servidor __CAPGO_KEEP_0__! ¡Felicidades!

You have now implemented a fully-featured subscription purchasing system without spending a month writing server code. Congrats!

Para descargar ejemplos más completos de la integración del __CAPGO_KEEP_0__, diríjase a los recursos de aplicaciones de muestra de RevenueCat.

object from calls to SDK

Ver Ejemplos

Publicaré pronto una aplicación de muestra utilizando Capacitor y Vue.js.

Si necesita mover una utilización profunda de la Capacitor SDK, consulte la documentación aquí.

Pasos Siguientes

Si aún no lo ha hecho, asegúrese de que sus productos estén configurados correctamente consultando la guía de RevenueCat sobre derechos de autor Si desea utilizar sus propios identificadores de usuario, lea sobre.
configuración de IDs de usuario de la aplicación Si está cambiando a RevenueCat desde otro sistema, consulte la guía de RevenueCat sobre .
migración de sus suscripciones existentes Una vez que esté listo para probar su integración, puede seguir las guías de RevenueCat sobre.
Verificación de configuración pruebas y depuración.
Si calificas para el Programa de Pequeñas Empresas de la Tienda de Aplicaciones, consulta la guía de RevenueCat sobre cómo solicitar y notificar a RevenueCat

Si necesitas actualizaciones en vivo en tu aplicación

Únete aquí 👇

Registra aquí para obtener tu cuenta

Capgo

Sigue adelante con las compras en la aplicación para capacitor

Si estás utilizando compras en la aplicación para capacitor para planificar pagos y compras, conecta con Capgo Precios para el flujo de trabajo del producto en Capgo Precios, sistema de pago para el detalle de implementación en sistema de pago, @capgo/compras nativas para el detalle de implementación en @capgo/compras nativas, Inicio rápido para el detalle de implementación en Inicio rápido, y Libro de estrategias de ingresos para el detalle de implementación en Libro de estrategias de ingresos.