Apple Pay Ionic | Así se utiliza y se implementa

¿Quieres que tu usuario compre dentro de tu aplicación para iOS y has pensado en Apple Pay Ionic para hacerlo? O, tal vez ya sabes cómo se hace, pero te falta conocer algún detallito para terminar de hacerla funcionar ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a cobrar a tus usuarios por lo que tu vendas dentro de tu app con la api Apple Pay Ionic y a como gestionar las transacciones.

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 Apple Pay Ionic

Aunque entiendo que muchos lo conocerán, o intuirán, se trata de una api que nos va a permitir gestionar pagos desde nuestra aplicación iOS contra la propia Apple Store.

Una cosa más, para poder realizar este tutorial es necesario de que configures tu cuenta de merchant center siguiendo los siguiente pasos: https://help.apple.com/developer-account/#/devb2e62b839?sub=devf31990e3f para poder aceptar pagos y generar el certificado de pagos de Apple para tu app.

 

Instalando el componente

Cómo todo componente externo al core de Ionic, necesita realizarse una instalación. Para ello vamos a utilizar las dos siguiente líneas de consola:

$ ionic cordova plugin add cordova-plugin-applepay
$ npm install --save @ionic-native/apple-pay@4

 

La primera instalará el plugin de Cordova que nos permitirá la comunicación nativa con el sistema donde se esté ejecutando la app, en este caso iOS.

La segunda instalará la api en código TS para que desde nuestro código podamos comunicarnos con el plugin.

 

Configurando Apple Pay Ionic

El siguiente paso a realizar, y cómo pasa con el punto de la instalación al no estar integrado en el core, será incluirlo a los providers de nuestra app. Para ello nos dirigimos a "app.module.ts" y agregamos lo siguiente:

import { ApplePay } from '@ionic-native/apple-pay/ngx';

...

providers: [
...,
ApplePay,
...
]

...

 

¿Qué plataformas soporta?

Al igual que he comentado antes, esto se intuye perfectamente:

• iOS

¿Esperabas otra cosa? :)

 

Cómo utilizar Apple Pay Ionic

Ya llegamos al meollo del tutorial. Veamos el código y después comentamos debajo de él lo que hemos hecho ¡Vamos con ello!

import { ApplePay } from '@ionic-native/apple-pay/ngx';


constructor(private applePay: ApplePay) { }

...
async applePay() {
  // This block is optional -- only if you need to update order items/shipping
  // methods in response to shipping method selections
  this.applePay.startListeningForShippingContactSelection()
    .subscribe(async selection => {
      try {
        await this.applePay.updateItemsAndShippingMethods({
          items: getFromSelection(selection),
          shippingMethods: getFromSelection(selection),
        });
      }
      catch {
        // handle update items error
      }
    });

  try {
    const applePayTransaction = await this.applePay.makePaymentRequest({
      items,
      shippingMethods,
      merchantIdentifier,
      currencyCode,
      countryCode,
      billingAddressRequirement: ['name', 'email', 'phone'],
      shippingAddressRequirement: 'none',
      shippingType: 'shipping'
    });

    const transactionStatus = await completeTransactionWithMerchant(applePayTransaction);
    await this.applePay.completeLastTransaction(transactionStatus);
  } catch {
    // handle payment request error
    // Can also handle stop complete transaction but these should normally not occur
  }

  // only if you started listening before
  await this.applePay.stopListeningForShippingContactSelection();
}

 

1. Importamos la clase "ApplePay" del paquete "@ionic-native/apple-pay/ngx".
2. Inyectamos una instancia de la clase en cuestión a través del constructor de nuestra clase.
3. Creamos un bloque asíncrono que contendrá el código que queremos ejecutar.
4. "startListeningForShippingContactSelection()" -> Nos permitirá conocer si el  usuario ha cambiado la dirección de entrega para poder realizar las actualizaciones pertinentes dentro de nuestra app.
5. "makePaymentRequest -> Nos permite crear una instancia guiada de una solicitud de pago. Los campos que vemos en el ejmplo, son los que la hacen falta al sistema para poder realizar dicho pago.
6. "completeTransactionWithMerchant" -> Emite la orden de compra contra el sevidor de apple. Utilizamos "await" porque tenemos que esperar a que responda para poder continuar.
7. "completeLastTransaction" -> Valida la compra en el dispositivo y ciera la transacción. Cómo es necesario esperar a que termine, utilizaremos "await" para que no haya problemas.
8. Por último, cerramos la conexión con el listener para que no esté consumiendo recursos.

 

Nota: Queda a tu elección cómo tratar el tema de los errores. En el ejemplo lo podrás hacer dentro del catch del respectivo bloque.

Y con esto, y la configuración que te he pedido que hicieras a través del enlace, tendríamos todo listo para poder emitir pagos. ¿Sencillo, verdad? Incluso más que las compras de Google Play.

Ahora pasaremos a ver los campos de clase y las funciones de esta librería.

 

Funciones y campos de clase

Cómo comento en todos los tutoriales, únicamente vamos a comentar los campos y las funciones de clase. Dichas funciones o campos que pertenezcan a los padres no serán tratadas aquí.

 

canMakePayments()

Nos permite realizar una comprobación para saber si se puede realizar la solicitud de pago. Comprueba que el dispositivo tenga disponible Apple Pay y que tenga alguna tarjeta registrada en él.

Retorna una promesa que tenemos que controlar, con ella llega una instancia de la clase "IMakePayments" que nos permitirá conocer si podemos, o no, comenzar dicha transacción.

 

startListenerForShippingContactSelection()

Nos permite conocer que contacto de envío ha seleccionado nuestro usuario, o si ha cambiado de este posteriormente de seleccionarlo. Es importante controlar esta función dado que el usuario puede cambiar el contacto de envío y nosotros tenemos que cambiar la configuración del pedido para no cometer errores.

Retorna un observable al que tenemos que suscribirnos. Con cada una de sus actualizaciones nos llegará una instancia de la clase "ISelectedShippingContact" que tendrá la nueva información y que deberemos de pasar a la función "updateItemsAndShippingMethods" antes de continuar.

 

stopListeningForShippingContactSelection()

Nos permite cerrar el canal por el que recibimos este tipo de información que abrimos al llamar a la función anterior a esta en este artículo.

Retorna una promesa que tenemos que controlar. No devolverá nada, pero nos permitirá conocer cuando se ha terminado de realizar la acción.

 

updateItemsAndShippingMethods(list)

Nos permite actualizar, a conciencia, los datos necesarios que hace falta para realizar una transacción.

• list -> IOrderItemsAndShippingMethods -> Un objeto de la clase IOrderItemsAndShippingMethods que contendrá los campos de la transacción cómo veremos a continuación.

Retornará una promesa que tenemos que controlar. Con ella llegará un objeto de la clase "IUpdateItemsAndShippingStatus" que permitirá que revisemos cómo están seteados todos los datos de la petición.

 

makePaymentRequest(order)

Solicita la recepción de un pago por parte del usuario desde nuestra app contra los servidores de Apple.

• order -> IOrder -> El objeto, cómo hemos visto en el ejemplo, que contiene toda la información del pago que vamos a realizar.

Retorna una promesa que tenemos que controlar. Con ella llegará una instancia de la clase "IPaymentResponse" que llevará la información que nos devuelve Apple desde su servidor.

 

completeTransactionWithMerchant(paymentResponse)

Nos permite finalizar la primera parte de la solicitud de pago.

• paymentResponse -> IPaymentResponse -> Un objeto de la clase "IPaymentResponse" que podemos recuperar de la promesa que devuelve la función "makePaymentRequest". Completará la transacción contra el servidor.

Retorna una promesa que hay que controlar, con ella llegará una instancia de la clase "ITransactionStatus" que la usaremos para terminar de completar el pago en el siguiente punto.

 

completeLastTransaction(complete)

Es el último paso de la transacción. Esta se completará en el dispotivo con la información que ha llegado desde el servidor con la función "completeTransactionWithMerchant".

• complete -> ITransactionStatus -> El objeto que hemos recupera de la función "completeTransactionWithMerchant" que tiene la información para terminar dicha transacción.

Retorna una promesa que tenemos que controlar. Con ella llegará una instancia de la función "ICompleteTransaction" que nos permitirá conocer si todo ha salido correctamente.

 

 

 

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.