compras en la aplicación para capacitor

Este plugin ahora 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 compra nativa más sencilla de API sin RevenueCat, @capgo/native-purchases 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.

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

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

Al utilizar el complemento 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 complemento de compras Capacitor y RevenueCat, los desarrolladores pueden gestionar y rastrear fácilmente las suscripciones y compras en aplicaciones móviles, validar recibos, gestionar usuarios en varias 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 última versión de Capacitor y el complemento de compras Capacitor. Puede verificar la última versión de Capacitor y el complemento de compras Capacitor en el sitio web de Capacitor.

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

agregue la capacidad de compras en aplicaciones 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.

Regístrate para 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 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 para a tu proyecto, pero solamente 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 de la Aplicación

▶️ Crea un Proyecto

Dirígete a la consola de RevenueCat y agrega un nuevo proyecto desde el menú desplegable en la parte superior de la navegación llamado Proyectos.

Paso 1 de RevenueCat

El modal de diálogo para crear un nuevo Proyecto

▶️ Agrega una Aplicación / Plataforma

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

RevenueCat paso 2

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

El campo Nombre de la aplicación es obligatorio 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 paquete (iOS) / Nombre de paquete (Android) así como la Clave compartida (iOS) / Credenciales de servicio (Android).

RevenueCat paso 3

Página de configuración de la aplicación para una aplicación de la Tienda de Mac App

📘

💡 ¡Aquí tienes un consejo!

Después de registrar su aplicación, RevenueCat recomienda configurar Servicios de Notificación de la PlataformaEstas notificaciones no son obligatorias, pero acelerarán webhooks y reducirán el tiempo de entrega de integraciones y la latencia al actualizar a sus suscriptores.

📘

Aplicaciones de pruebas vs. 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. 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 Secreta compartida de App Store Connect, Credenciales de servicio de Playy Secret de Amazon Appstore para obtener más información.

Tenga en cuenta que las credenciales del servicio de juego 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. Consulte los siguientes guías para App Store Connect, Google Play Console, Amazon Appstorey 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 Tienda de Aplicaciones > Acuerdos, Impuestos y Bancos. Se debe completar 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 Tienda de Aplicaciones configurando 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.

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

▶️ Configura productos y permisos en RevenueCat

Una vez que tus productos de aplicación en vivo estén configurados en Tienda de Aplicaciones > Acuerdos, Impuestos y Bancos, Google Play Console, Amazon Appstore, o Stripe, necesitarás 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 ofrecen 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 de organizar los productos en la pared de pago que deseas "ofrecer" 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 tu __CAPGO_KEEP_0__ y permitirte cambiar productos sin actualizar la aplicación. Ver Configuración de productos

para configurar tus productos y luego organizarlos en Ofertas o Entitlements. RevenueCat paso 4

4. Utilizando Purchases de RevenueCat SDK

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, consulta Pistas para resolver problemas con los SDK para obtener orientación.

📘

Solo utiliza tu clave pública de SDK para configurar Purchases

Puedes obtener tu clave pública de SDK desde la API keys pantalla bajo Configuración de proyecto en la consola.

Solo debes configurar la instancia compartida de Compras una vez, generalmente al lanzamiento de la aplicación. Posteriormente, la misma instancia se comparte a lo largo de tu aplicación al acceder 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 las diferentes claves API disponibles en la guía de autenticación de RevenueCat 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.

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

Depuración Guía de depuración guía.

Si planeas utilizar RevenueCat junto con tu compra 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. Puedes utilizar ofertas para organizar tu pantalla de pago. Consulta la guía de RevenueCat sobre Mostrar productos para obtener más información y mejores prácticas.

▶️ Obtener y mostrar productos disponibles

📘

Configurando compras con identificadores 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 Identificar usuarios.

El SDK obtendrá automáticamente los ofertas configuradas 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 tu pantalla de compra.

A continuación, se muestra un ejemplo de obtener ofertas. Puedes utilizar ofertas para organizar tu pantalla de pago. Consulta 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 se están realizando solicitudes de tu 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 Presentar'. 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.

Puedes encontrar más información sobre cómo solucionar este problema en RevenueCat Centro de Ayuda.

▶️ Hacer una Compra

El SDK incluye un método simple para facilitar las compras. El purchase:package procesa un paquete de 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 de la "your_entitlement_id". Más detalles sobre el método se pueden encontrar en la guía de RevenueCat sobre purchase:package method can be found in RevenueCat guide on Making Purchases.

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
}

▶️ Check Subscription Status

Verificar el estado de la suscripción Purchases Puedes utilizar este método cada vez que necesites obtener el estado más reciente, y es seguro llamar a este método repetidamente a lo largo de la vida de tu aplicación. CustomerInfo whenever it updates — so in most cases, this method pulls from the cache and runs very fast.

Compras

📘

💡 Here’s a tip!

Automáticamente almacena el estado más reciente cada vez que se actualiza — por lo tanto, en la mayoría de los casos, este método extrae de la caché y ejecuta muy rápidamente. Subscription Status Aprende 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 sus usuarios restaurar sus compras en la aplicación, reactivando cualquier contenido que compraron 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. Tenga 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.). Si dos diferentes IDs de usuario de la aplicación restauran transacciones de la misma cuenta de tienda subyacente (cuenta de Apple, Google o Amazon).

  const res = await CapacitorPurchases.restoreTransactions()
  const purchaserInfo = res.purchaserInfo
  const ids: string[] = [] // extract active subscriptions ids
  purchaserInfo.activeSubscriptions.forEach((id) => {
    ids.push(id)
  })

RevenueCat puede intentar crear un alias entre los dos IDs de usuario de la aplicación y contarlos como el mismo usuario en adelante. Consulte la guía de RevenueCat sobre "Restaurar compras" para obtener más información sobre los diferentes comportamientos de restauración configurables. Desde que la __CAPGO_KEEP_0__ funciona sin problemas en cualquier plataforma, los cambios en la información de compra de un usuario pueden provenir de una variedad de fuentes. Puede responder a cualquier cambio en la cuenta de un cliente conformándose a un método de delegado opcional, Este método disparará cada vez que la __CAPGO_KEEP_0__ reciba una actualización to learn if subscription is set to renew, if there’s an issue detected with the user’s credit card, and more.

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 same store account purchases:receivedUpdated:.

This method will fire whenever the SDK receives an updated CustomerInfo objeto desde llamadas a getCustomerInfo(), purchase(package:), purchase(product:), o restorePurchases().

Actualizaciones de información del cliente se no se envían a tu 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 tu aplicación, puede ser suficiente ignorar al delegado y manejar cambios a la información del cliente la próxima vez que tu aplicación se inicie o en los bloques de finalización de los métodos SDK.

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

👍

¡Lo hiciste!

¡Has implementado ahora un sistema de suscripciones completo para la compra de suscripciones sin pasar un mes escribiendo servidores code! ¡Felicidades!

Aplicaciones de muestra

Para descargar ejemplos más completos de la integración de 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.

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

Pasos siguientes

Si aún no lo has hecho, asegúrate de que tus productos estén configurados correctamente revisando la guía de RevenueCat sobre derechos de autor Si deseas utilizar tus propios identificadores de usuario, lee sobre.
configuración de IDs de usuario de la aplicación Si estás cambiando a RevenueCat desde otro sistema, consulta la guía de RevenueCat sobre .
migrar tus suscripciones existentes Una vez que estés listo para probar tu integración, puedes seguir las guías de RevenueCat sobre.
pruebas y depuración Si calificas para el Programa de Pequeñas Empresas de la Tienda de Mac, consulta la guía de RevenueCat sobre.
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ How aplicar e informar a RevenueCat

Si necesita actualizaciones en vivo en su aplicación

Únete aquí 👇

Registra aquí para obtener tu cuenta

Capgo

Sigue adelante con compras en la aplicación para capacitor

Si está utilizando compras en la aplicación para capacitor para planificar pagos y compras, conecte con Capgo Precios para el flujo de trabajo del producto en Capgo Precios Sistema de pago para el detalle de implementación en el 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 Guía de ingresos para el detalle de implementación en Guía de ingresos.