In App Purchases Ionic - Recibe pagos en tu app

¿Necesitas incluir compras dentro de la aplicación y has pensado en el componente In App Pucharses Ionic? O, quizás ya sabes cómo se hace, pero te falta algún detallito más para terminar de implementarlo correctamente ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo, de una manera clara y accionable, aprenderás a cobrar a tu usuario desde tu aplicación para así comenzar a vender productos digitales en ella.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Pero, qué es In App Purchases Ionic

Pues, básicamente, se trata de una api que nos proporciona un sistema robusto para poder ofrecer al usuario compras y suscripciones dentro de nuestra aplicación programada en Ionic.

Instalación de In App Purchases en Ionic

Cómo con todos los componentes desacoplados del core, y este no iba a ser menos, necesitamos instalarlo en nuestra app. Para tal fin, vamos a utilizar las dos siguiente líneas de código:

$ ionic cordova plugin add cordova-plugin-inapppurchase
$ npm install @ionic-native/in-app-purchase

La primera instalará el plugin que nos permitirá la comunicación nativa con el sistema donde se ejecute la app.

La segunda será el puente de código TS necesario para que nos podamos comunicar desde nuestro código con el plugin que hemos instalado en el paso anterior.

Configuración de módulo

A diferencia de la mayoría de componentes, en los que no son necesarias configuraciones, en este sí.

Para que todo funcione guay tendremos que crear los productos, o las suscripciones, que se van a vender en la app en cada una de las consolas de desarrollo.

Para aligerar el artículo, por que se podría hacer otro tuto solo para eso, aquí te dejo el enlace de Google donde explica cómo se puede hacer.

Y en caso de iOS, aunque un poco más enrevesado en este enlace, se puede utilizar perfectamente. Tendremos que seguir el punto “Implementación Paso a Paso” del ejemplo.

Una vez terminado esto, hay un paso más. En caso de que estés usando Ionic 4, y el módulo NGX, no será necesario que hagas esto. De lo contrario, tendrás que agregar el módulo a los providers de la app de la siguiente manera:

providers: [
…,
InAppPurchase,
…
]

Recuerdo que no será necesario que incluyas el módulo en el global de la app, solo donde vayas a hacer uso de él. Así estarás incurriendo en buenas prácticas de desarrollo y en la mejora de rendimiento de la app.

Plataformas Soportadas por el componente

Actualmente, el componente soporta las siguientes:

• Android
• iOS

Cómo usar las In App Purchases en Ionic con ejemplo incluido

Pues bien, cómo en todos los artículos, vamos a situarnos primero ante un trozo funcional de código para así después pasar a comentarlo más adelante y entenderlo mejor.

import { InAppPurchase } from '@ionic-native/in-app-purchase/ngx';

constructor(private iap: InAppPurchase) { }

...

this.iap
 .getProducts(['prod1', 'prod2', ...])
 .then((products) => {
   console.log(products);
    //  [{ productId: 'com.yourapp.prod1', 'title': '...', description: '...', price: '...' }, ...]
 })
 .catch((err) => {
   console.log(err);
 });


this.iap
  .buy('prod1')
  .then((data)=> {
    console.log(data);
    // {
    //   transactionId: ...
    //   receipt: ...
    //   signature: ...
    // }
  })
  .catch((err)=> {
    console.log(err);
  });

• Primer importaremos la clase "InAppPurchase" que pertenece al paquete que hemos instalado en pasos anteriores.
• Posteriormente, inyectamos una instancia de la clase a través de nuestro constructor. Esto es posible porque está programado cómo un servicio y tiene el decorador @inyectable. Más adelante en el curso, hablaré de esto.
• NOTA: Cómo digo siempre, el código es funcional pero propenso a fallos al no haber muchas comprobaciones, esas te las dejo a ti.
• El siguiente paso, es recuperar los productos, para ello vamos a llamar a la función “getProducts” y le pasaremos un array con el “id” de los productos que hemos creado en pasos previos dentro de las respectivas consolas de desarrollo.
• Controlamos la promesa y listo, ya tenemos la info de estos productos.
• Después de realizar todo lo anterior, usaremos, para realizar una compra, la función “buy” y le pasaremos el “id” del producto que hemos creado en la consola.
• Y listo, ahora habrá saltado el diálogo de compra del producto. Dentro de la promesa que tendremos que controlar, estará toda la información de la transacción o el error en caso de que falle.

Bien, cómo hemos visto aquí, hemos realizado una compra a través del servicio de compras in app. Ahora bien, vamos a ver el resto de cosas que podemos hacer, porque, por ejemplo, si queremos saber si un usuario ha comprado algo, o no, tendremos que ver cómo se hace. Venga, vamos al lio.

Campos de clase y funciones del módulo In App Purchases

Cómo he mencionado en el párrafo anterior, solo con el ejemplo no vale. Para poder hacer uso completo de dicho módulo, tenemos que conocer los siguientes métodos más a fondo.

Recuerdo que estos métodos y campos que vamos a ver ahora corresponden directamente a esta clase. Los de los “parents” no serán mostrados aquí.

getProducts(productsIds)

• Parámetros:
  • productsIds: array<string> -> Será un array que contenga en cadenas de texto los ids de los productos que hemos registrado en las consolas de desarrollo.
• Retorna una promesa que tenemos que controlar. En ella llegan todos los datos de los productos que hemos solicitado.

Con esta función podremos acceder a la información de los productos que tenemos registrados en los stores. Estos productos sirven para poder realizar la compra posteriormente o para mostrarlos a los usuarios.

buy(productId)

• Parámetros:
  • productId: string -> Será el ID del producto que queremos comprar.
• Retorna una promesa que tendremos que controlar. Con ella llegan los siguientes datos:
  • transactionId: string -> Cómo su nombre indica, será el ID de la transacción que se acaba de realizar. Merece la pena guardarla en una base de datos para después, en caso de que sea necesario, operar con ella.
  • receipt: string -> Será el recibo de compra, o factura, en formato de URL para que la podamos mostrar o descargar. Cómo nosotros queramos.
  • signature: string -> Es la firma de la transacción por si queremos hacer algo con ella. Nos hará falta para cuando queramos consumir el producto.
  • productType: string -> Será el producto en si que hemos comprado por si queremos comprarlo con lo que se ha enviado, por ejemplo.

Esta función lanza un diálogo para que el usuario pueda comprar el producto que hemos solicitado mediante el parámetro.

suscribe(productId)

• Parámetros:
  • productId: string -> Será el ID del producto al que nos queremos suscribir.
• Retorna una promesa que tendremos que controlar. Con ella llegan los siguientes datos:
  • transactionId: string -> Cómo su nombre indica, será el ID de la transacción que se acaba de realizar. Merece la pena guardarla en una base de datos para después, en caso de que sea necesario, operar con ella.
  • receipt: string -> Será el recibo de la transacción en formato de URL para que la podamos mostrar o descargar. Cómo nosotros queramos.
  • signature: string -> Es la firma de la transacción por si queremos hacer algo con ella. Nos hará falta para cuando queramos consumir el producto.
  • productType: string -> Será el producto en sí mismo que hemos comprado por si queremos comprarlo con lo que se ha enviado, por ejemplo.

Esta función lanza un diálogo para que el usuario pueda suscribirse al producto que hemos solicitado mediante el parámetro.

consume(productType, receipt, signature)

• Parámetros:
  • productType: string -> El producto en si que queremos consumir. Lo recuperamos cuando usamos los métodos “buy” o “suscribe”.
  • recepit: string -> La cadena que hemos recuperado cuando hemos utilizado los métodos “buy” o “suscribe”.
  • signature: string -> La firma que hemos recuperado cuando hemos usado los métodos “buy” o “suscribe”.
• Retorna una promesa que hay que controlar, en ella llegarán los detalles de si se ha realizado bien el proceso o no.

Esta función nos servirá para que podamos consumir los productos que el usuario ha comprado.

Hay que tener cuidado con esto, porque es posible que estemos dándole al usuario las ventajas de haber comprado algo y la posibilidad de rembolsarlo cuando quiera en caso de que no lo consuma. Ojo con esto, lo digo po experiencia :)

restorePurchases()

• No requiere parámetros.
• Retorna una promesa que hay que controlar. En ella llegarán los datos de las compras que ha hecho el usuario.

Esta función nos permitirá acceder a las comprar que ha realizado el usuario que está usando la aplicación filtrado por la cuenta de Google Play, o la de App Store, asociada a la tienda.

En la promesa llegarán todas las compras realizadas y con toda su información para que podamos evaluar lo que necesitemos.

getReceipt()

• No requiere parámetros.
• Retorna una promesa que tenemos que controlar. En caso de que se haya resuelto, todo habrá ido bien y con ella llegará la información del comprobante.

En primer lugar, esta función solo está disponible para iOS, en Android no es necesaria. Y lo que hace, cómo he comentado en el retorno, podemos obtener los datos del comprobante de compra.

Se suele utilizar cuando vamos a consumir un producto con el método “consume”, cómo hemos visto antes. Por eso he dicho que sería bueno guardarlo, y si no es lo que quiere, puedes recuperarlo de esta manera.

Tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.