DanteCervantes.com

Integrar pagos con Cordova & Android / iOS

Publicado por : Dante | 12 julio, 2015 | 7:49 pm

 

Los pagos dentro de las aplicaciones son cada vez más frecuentes cuando desarrollamos, puede sonar complejo integrar los pagos (In App Billing para Android / In App Purchase para iOS), si es la primera vez que lo hacemos, pero hoy veremos paso a paso como realizar la integración con Cordova.

Necesitamos instalar los siguientes plugins para Cordova, recomiendo altamente hacer una copia del proyecto antes de instalar los plugins, una vez hayas realizado la copia, crea una copia de la copia y cambia el nombre a una carpeta iOS y  a otra Android respectivamente, esto se hace porque son distintos plugins, dado que un solo plugin no funciona para ambas plataformas, así que se deben crear dos proyectos para está implementación, puede ser que si intentas utilizar un mismo plugin, cause conflictos.

In App Billing Android 

In App Purchase iOS

Configuración de la aplicación de Android

Para realizar la integración de compras, debes:

  1. Crear un build –release de la aplicación con cordova

Dentro de tu cuenta de desarrollador, haz clic en la aplicación que vayas a añadirle compras dentro de la aplicación

En el menú izquierdo, selecciona Services & APIs, y busca el apartado YOUR LICENSE KEY FOR THIS APPLICATION, esa es la llave que debes poner en la variable BILLING_KEY cuando vas a instalar el plugin vía Cordova para Android.

Captura de pantalla 2015-07-12 a las 11.05.09

En el menú izquierdo, selecciona In – App Products , selecciona Add new Product, escribe el identificador de tu producto.

IMPORTANTE, este ID de producto será el que la aplicación va a necesitar para saber que tipo de producto es y como manejarlo, debes seleccionar que tipo de producto es, Managed Product o Suscription.

  1. Managed Product : Producto consumible, se paga por él una sola vez
  2. Suscription : Suscripción a un servicio, se paga por el diaria, semanal, mensual, o anualmente

Captura de pantalla 2015-07-12 a las 11.13.08

Llena la información en el formulario de Google Play

  1. Nombre de tu Producto
  2. Descripción
  3. Precio

Captura de pantalla 2015-07-12 a las 11.13.26

Nota : Si elegiste que el tipo de producto sea Suscription, debes elegir si será diaria, semanal, mensual, o anualmente el cobro de la misma.

Ahora debes añadir a usuario de prueba para ( valga la redundancia ) probar la aplicación y que todo esté funcionando correctamente, para ello:

  • Selecciona Settings en el menú lateral izquierdo
  • Busca la sección License Testing
  • Añade las direcciones de correo electrónico que serán parte de tus testers

Acount details

IMPORTANTE, por ningún motivo las cuentas que sean añadidas como testers pueden ser iguales a la cuenta que está dada de alta como desarrollador de Google Play.

Código de Integración

Una vez que se ha instalado el plugin dentro de nuestra aplicación, la palabra reservada inappbilling se encuentra activa y podemos hacer uso de ella desde cualquier parte de nuestro código.

Inicializando pagos

Consumiendo un producto

Suscribirse a un producto

Cabe mencionar que, la ventana de adquisición del producto sale cuando ejecutamos cualquiera de las dos funciones anteriores, el plugin cuenta con muchas funciones más, pero por ahora estás son las que nos interesan.

Resultado Final

Screenshot_2015-07-12-14-38-34

Nota. Ver documentación del plugin

In App Purchase iOS

Me da mucho gusto poder compartir esto con ustedes ya que no hay mucha información en español sobre cómo integrar los pagos en iOS, así que comencemos.

  1. Crear una cuenta de desarrollador de Apple y Suscribirse al programa de Desarrollo de iOS (cómo suscribirse al programa)
  2. IMPORTANTE. Subir la aplicación al iTunes Connect con Xcode (cómo subir app iOS)
  3. En http://developer.apple.com, debes iniciar sesión con la cuenta que acabas de crear
  4. Haz clic en “Mis aplicaciones”

Captura de pantalla 2015-07-12 a las 14.08.36 1

Después selecciona la aplicación que hayas creado y entra al apartado de “Compras dentro de la aplicación”

Captura de pantalla 2015-07-12 a las 14.13.40

  1. Haz clic en el boton “Create new” de la parte superior derecha de la pantalla.

IMPORTANTE : Si es la primera vez que añades una compra dentro de la app, debes aceptar los términos y condiciones que apple maneja, para que aparezcan las opciones de Consumible, Suscripción y demás, en esa misma pantalla, aparece un párrafo que te indica dónde hacer clic para aceptar los términos y condiciones.

Después de seleccionar el tipo de compra que será y de haber aceptado los términos y condiciones, debes llenar la información que solicita el  formulario.

Captura de pantalla 2015-07-12 a las 14.17.29

  1. Nombre de referencia : Es el nombre que aparecerá al momento de comprar, Ej. “Obtener Premium”
  2. ID del producto : debe ser igual al que pondremos dentro de la app, Ej. mi.producto.consumible
  3. Precio y disponibilidad : Es el precio de la compra y a partir de cuando estará disponible
  4. Franja de precios : Es una lista con los precios convertidos a las distintas monedas dependiendo de la cantidad que hayas elegido.
  5. Por último debes añadir una imagen haciendo referencia a la compra dentro de la app (bastante tedioso porque aún no ponemos el código), así que puedes crear una imagen en photoshop como “dummy”

Y por último debes subir una nueva versión de la aplicación que incluya la compra dentro de la app, esto desde la pantalla principal de la aplicación.

Captura de pantalla 2015-07-12 a las 14.24.50

 

Codificando las compras dentro de la app

Con el plugin una vez instalado, tendremos como palabra reservada storekit, y con ella las funciones para incializar el plugin y poder realizar la compra.

Inicializando Storekit

Para realizar una compra de un producto y que salga la ventana nativa de iOS para ingresar a la cuenta de iTunes, se debe utilizar el siguiente código:

Resultado final

IMG_0475 IMG_0476

Nota. Ver documentación completa del plugin

Conclusión

El integrar compras dentro de nuestras aplicaciones, ayuda a darle al usuario final un extra, esto sirve muy bien en los juegos, como adquirir un paquete nuevo de vidas, desbloquear mundos nuevos, o desbloquear un nuevo personaje.

  • Excelente aporte Dante, muchas gracias.

    • Dante

      Que bueno que es de tu ayuda Villamil!

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales