compras en la aplicación para capacitor

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

Si prefieres una aplicación nativa API más sencilla sin RevenueCat, @capgo/compras nativas implementa compras en la aplicación y suscripciones directamente con StoreKit y Google Play Billing.

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.

One of the key features of the Capacitor Purchases plugin is that it integrates with RevenueCat, a platform that provides tools for in-app subscriptions and in-app purchases. RevenueCat simplifies the process of implementing in-app subscriptions and purchases by providing a simple and consistent API across multiple platforms, and automating tasks such as receipt validation and user management.

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
• Manejo de usuarios
• Soporte para modelos de precios personalizados
• Análisis detallado -Escalabilidad

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

Usando el plugin de compras Capacitor de Capgo y RevenueCat, los desarrolladores pueden gestionar y rastrear fácilmente las suscripciones y compras en la aplicación, validar los 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 la recaudación de ingresos.

Instalación

Asegúrese de utilizar la última versión de Capacitor y el plugin de compras Capacitor de Capgo. Puede verificar la última versión de Capacitor y el plugin de compras Capacitor en el sitio web de Capacitor.

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

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

luego

1. Cree una cuenta de RevenueCat

Esta guía le guiará a través de cómo configurar las suscripciones y RevenueCat’s SDK con solo unas pocas líneas de code.

Regístrese en una nueva cuenta de RevenueCat here.

📘

💡 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 equipo de soporte de RevenueCat transfiera proyectos individuales.

Organizaciones / Empresa

Recomendamos utilizar una cuenta de la empresa al registrarse en RevenueCat y configurar la aplicación dentro de un proyecto. Puedes invitar al resto de tu equipo como colaboradores a tu 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 de Proyecto y Aplicación

▶️ Crea un Proyecto

Navega a la consola de RevenueCat y agregar un nuevo proyecto desde el menú desplegable en la parte superior de la navegación llamado Proyectos.

El modal de diálogo 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.

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

El campo El nombre de la aplicación es requerido para agregar su aplicación a RevenueCat. El resto de los campos de configuración se pueden agregar más tarde. Para realizar compras de prueba y producción, el ID de paquete (iOS) / Nombre de paquete (Android) así como la clave compartida (iOS) / credenciales de servicio (Android) deben estar configurados. Paso 3 de RevenueCat

💡 ¡Aquí tienes un consejo!

📘

Después de registrar su aplicación, RevenueCat recomienda configurar

Notificaciones del servidor de plataforma . Estas notificaciones no son obligatorias, pero aceleraránwebhooks y el tiempo de entrega de la integración y reducirán el tiempo de espera al actualizar a sus suscriptores. Aplicaciones y usuarios de producción vs. de staging

📘

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

App name

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

Además, los usuarios no se separan por entorno. El mismo usuario puede tener compras activas tanto en el entorno de pruebas como en el de 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 Secreto compartido de App Store Connect, Credenciales de Servicio de Play, y Secreto compartido de Amazon Appstore 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 de producto

▶️ Configuración de tienda

Antes de poder empezar a utilizar RevenueCat para obtener productos, debes configurar tus productos en las tiendas correspondientes. 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 de 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. Se necesita completar esto antes de que puedas probar cualquier compra.

📘

¿Quieres saltarte la configuración de la tienda mientras estás probando?

En iOS, puedes posponer la configuración de productos en App Store Connect probando con archivos de configuración de StoreKit en lugar de eso. Estos archivos de configuración requieren una configuración mínima y son configurables directamente a través de Xcode.

Conozca más sobre la configuración de archivos de configuración de StoreKit en RevenueCat Pruebas de Entorno de Desarrollo guide.

▶️ Configure productos y permisos en RevenueCat

Una vez que sus productos en la aplicación hayan sido configurados en Conectar con App Store, Google Play Console, Amazon Appstore, o Stripe, necesitará copiar esa configuración en la consola de RevenueCat. RevenueCat utiliza un sistema de permisos para controlar el acceso a características premium y Ofertas para gestionar el conjunto de productos que ofrece a los clientes.

Los permisos son el nivel de acceso que un cliente está “entitulado” 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 recomienda utilizar estas características para simplificar tu __CAPGO_KEEP_0__ y permitirte cambiar productos sin actualizar la aplicación. utilizing these features to simplify your code and enable you to change products without releasing an app update.

Configuración de Productos para configurar tus productos y luego organizarlos en Ofertas o Entregas. Etapa 4 de RevenueCat

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

Si tienes problemas con el SDK, ve

If you run into issues with the SDK, see para obtener orientación. Sólo utiliza tu clave pública de __CAPGO_KEEP_0__ para configurar Compras

📘

recomienda utilizar estas características para simplificar tu SDK y permitirte cambiar productos sin actualizar la aplicación.

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

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

Consulte la guía de RevenueCat sobre Configurando 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 las diferentes claves API disponibles en RevenueCat Guía de autenticación.

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 verbosos. Para obtener más información sobre estos registros, consulta su Guía de depuración . Si planeas utilizar RevenueCat junto con tus compras existentes __CAPGO_KEEP_0__, consulta su guía sobre

If you’re planning to use RevenueCat alongside your existing purchase code, refer to their guide on 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

. Para obtener más información, consulta la guía de RevenueCat sobre .logIn()Compras con IDs de usuario Identificar a los Usuarios.

El SDK recuperará automáticamente los Configuraciones 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 su pantalla de compra.

A continuación, se muestra un ejemplo de recuperación de Configuraciones. Puede utilizar Configuraciones para organizar su pantalla de pago. Consulte la guía de RevenueCat sobre Mostrar Productos para obtener más información y mejores prácticas.

▶️ Recuperar y mostrar productos disponibles

📘

Configurando Compras con IDs de Usuarios

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 .logIn(). Para obtener más información, consulte la guía de RevenueCat sobre Identificar a los Usuarios.

The SDK realizará una solicitud automática para obtener 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 su pantalla de compra.

A continuación, se muestra un ejemplo de cómo obtener Ofertas. Puede utilizar Ofertas para organizar su pantalla de pago. Consulte la guía de RevenueCat sobre Mostrar 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 la solicitud de sus Ofertas, productoso paquetes disponibles están vacías, es debido a algún problema de configuración en la tienda correspondiente. Below is an example of fetching Offerings. You can utilize Offerings to organize your paywall screen. See RevenueCat guide on Displaying Products for more information and best practices.

Los motivos 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 Entregar'. 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 la solución de problemas de este problema en RevenueCat Centro de Ayuda.

▶️ Realizar una Compra

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

El code de muestra a continuación muestra el proceso de compra de un paquete y confirmar que desbloquea el contenido 'your_entitlement_id'. Más detalles sobre el purchase:package método se pueden encontrar en 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 siempre 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. Compras automáticamente almacena la última versión CustomerInfo cuando se actualiza — por lo tanto, en la mayoría de los casos, este método extrae de la caché y se ejecuta muy rápido.

Es típico 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 determinado.

📘

💡 Aquí tienes un consejo!

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 aprender 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 desencadenen 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 la aplicación restaurar transacciones desde la misma cuenta de almacenamiento subyacente (cuenta de Apple, Google o Amazon). RevenueCat puede intentar crear un alias entre los dos IDs de usuario de la aplicación y contarlos como el mismo usuario a partir de ese momento. Consulte la guía de RevenueCat sobre Restaurar compras para obtener más información sobre las diferentes configuraciones de comportamiento de restauración.

Puesto que el SDK funciona sin problemas en cualquier plataforma, los cambios en la información de compra de un usuario pueden provenir de varias fuentes. Puede responder a cualquier cambio en la información de un cliente CustomerInfo cumpliendo con un método de delegado opcional, purchases:receivedUpdated:.

Este método disparará cada vez que el SDK reciba un objeto actualizado CustomerInfo de llamadas a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().

Las actualizaciones de información del cliente no son enviadas desde el servidor 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 el delegado y simplemente manejar los cambios en la información del cliente la próxima vez que se lance su aplicación o en los bloques de finalización de los métodos del SDK.

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

👍

¡Lo has logrado!

Has implementado ahora un sistema de compra de suscripciones completo sin gastar un mes escribiendo servidor code. ¡Felicidades!

Aplicaciones de muestra

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

Ver muestras

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

Si necesitas mover una utilización profunda del Capacitor SDK revisa la documentación aquí.

Pasos siguientes

\

• Si no lo has hecho ya, asegúrate de que tus productos estén configurados correctamente revisando la guía de RevenueCat sobre derechos de acceso Si deseas utilizar tus propios identificadores de usuario, lee sobre.
• entitlements establecer IDs de usuario de la aplicación .
• Si está cambiando a RevenueCat desde otro sistema, consulte la guía de RevenueCat sobre migrar sus suscripciones existentes.
• Una vez que esté listo para probar su integración, puede seguir las guías de RevenueCat sobre pruebas y depuración.
• Si califica para el Programa de Pequeñas Empresas de la Tienda de Mac App, consulte la guía de RevenueCat sobre cómo solicitar y informar a RevenueCat

Si necesita actualizaciones en vivo en su aplicación

Únete aquí 👇

Regístrate aquí para obtener tu cuenta

Capgo

Siga adelante desde compras en la aplicación para capacitor

Si estás utilizando para 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 los detalles de implementación en Sistema de pago, @capgo/compras nativas para los detalles de implementación en @capgo/compras nativas, Inicio rápido para los detalles de implementación en Inicio rápido, y Libro de estrategias de ingresos para los detalles de implementación en el Libro de estrategia de ingresos.