Braintree Ionic | Qué es y cómo se usa

¿Pensando en introducir algún sistema de cobro en tu app y no quieres pasar por las tasas de los stores? O, quizás ya sabes cómo se utiliza el componente Braintree Ionic, pero te falta algún detalle más para dejarlo cómo tú quieres ¿verdad?

Mi nombre es Aitor Sánchez, hago aplicaciones desde 2014, y en este artículo aprenderás a implementar Braintree Ionic y a cómo realizar cobros mediante tu app de una manera sencilla y segura.

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!

Instalación de Braintree en Ionic

En primer lugar, y cómo con todos los componentes desacoplados del core de Ionic, tenemos que realizar la instalación del componente para poder usarlo dentro de nuestra aplicación.

Para ello vamos a utilizar las dos siguientes líneas de código:

ionic cordova plugin add https://github.com/taracque/cordova-plugin-braintree
npm install --save @ionic-native/braintree@4

La primera instalará el plugin que nos permitirá la comunicación nativa con la plataforma. Y la segunda instalará el código necesario para poder comunicarnos con el plugin. 

Configuración de Braintree para Ionic

Para que podamos usar el módulo en nuestros componentes es necesario que metamos la clase en los providers del module en cuestión. Recuerda que, si estamos utilizando Ionic 4 o superior, y el módulo NGX, no será necesario que realices este paso.

El código es el siguiente:

...

import { Braintree } from '@ionic-native/braintree';

...

providers: [
...,
Braintree,
...
]

...

Nota: Recuerda que es recomendable NO incluir los componentes que NO vayamos a utilizar en toda la App en el AppModule.ts. Es mejor incluirlo en los module de cada componente que vaya a hacer uso de él.

Plataformas soportadas por Branintree de Ionic

Al hace uso de la parte nativa del sistema, lo más lógico es que solo esté disponible para las plataformas móviles actuales.

• Android
• iOS

Quizás también podrían incluir Windows nativo, pero no se… no veo necesario tener que hacerlo para PC.

Cómo se usa Braintree

Bien, cómo acostumbramos, vamos a ver un ejemplo de código antes de continuar. Y así comentamos sobre él.

import { Braintree, ApplePayOptions, PaymentUIOptions } from '@ionic-native/braintree';


constructor(private braintree: Braintree) { }


...


// Digamos que es cómo la ‘key’ para la API.
const BRAINTREE_TOKEN = '<YOUR_BRAINTREE_TOKEN>';


// NOTA: Los datos facilitados en el siguiente campo tienen que ser reales. De lo contrario el sistema, al realizar el pago, fallará.
const appleOptions: ApplePayOptions = {
  merchantId: '<YOUR MERCHANT ID>',
  currency: 'EU',
  country: 'ES'
};


const paymentOptions: PaymentUIOptions = {
  amount: '14.99',
  primaryDescription: 'Tu producto o servicio (por “Monedas”, “Día” – “Mes” – “Año”)',
};


this.braintree.initialize(BRAINTREE_TOKEN)
  .then(() => this.braintree.setupApplePay(appleOptions))
  .then(() => this.braintree.presentDropInPaymentUI(paymentOptions))
  .then((result: PaymentUIResult) => {
//Esta promesa se resolverá cuando el proceso de cobro haya terminado.
    if (result.userCancelled) {
      console.log("El usuario ha cancelado la solicitud de pago.");
    } else {
      console.log("El usuario ha finalizado el pago correctamente.");
      console.log("Nonce: " + result.nonce);
      console.log("Resultado:" + result);
    }
  })
  .catch((error: string) => console.error(error));

La verdad que lo visto hasta ahora no tiene demasiada dificultad de uso. Verás…

1. Vamos a hacer un import de 3 clases que nos harán falta para el ejemplo:
   1. Brantree -> Se encargará de procesar todo el trabajo duro.
   2. ApplePayOptions -> Serán los datos de pago de para iOS.
   3. PaymentUIOptions -> Serán parámetros adicionales para poder realizar el pago.
2. Al tratarse de un servicio, inyectamos una instancia de este mediante el constructor de nuestra clase.
3. Será el token que generamos nosotros en el panel de Braintree para poder procesar los pagos.
4. Posteriormente construimos el objeto que contiene las opciones para ApplePay.
5. Después rellenamos los datos del cobro. El precio y la descripción.
6. Y ahora ya solo nos queda inicializar el proceso de Braintree. Llamamos el método “initialize” y le pasamos el token del que hemos hablado antes.
7. El resto del proceso lo podemos ver en el ejemplo. No es necesario que lo comentemos aquí. Si no lo has entendido del todo, revísalo bien que seguro que lo entiendes.

El ejemplo nos facilita un modo de realizar una solicitud de cobro totalmente funcional. Solo tenemos que cambiar el Api key, o BRAINTREE_TOKEN, por el que nos facilita la plataforma y el “merchantId” de Apple.

Funciones y métodos de Braintree en Ionic

Llegados a este punto, ya hemos visto todo lo necesario para poder continuar. Ahora vamos a ver los métodos y funciones que el sistema pone a nuestra disposición para trabajar con ello.

initialize(token)

• Esta función inicializa el componente para que podamos hacer uso de la plataforma. Es muy recomendable llamarla siempre que vayamos a usar algunos de sus métodos.
• Nota: La función es asíncrona. Así que deberás de llamar a las funciones que quieras en la resolución de la promesa de este.
• Parámetros:
  • token -> string -> Será el “api key” que se genera en el panel de Braintree y que nos permitirá realizar las transacciones.
• Retorna una promesa que se resolverá en caso de que todo haya ido correctamente. Si no es así saldrá por el catch con un mensaje de error sobre lo que ha pasado.

setupApplePay(options)

• Esta función se utiliza para configurar los pagos para dispositivos iOS y Apple Pay. En iOS, si esto no se utiliza antes de emitir le pago, el sistema fallará. Y, si no tiene los permisos para utilizar cobros in app, también fallará.
• Parámetros:
  • options -> ApplePayOptions -> Las opciones con las que se inicializará el sistema. Ahora veremos la interface más abajo.
• Retorna una promesa que se resolverá si todo ha ido bien. De lo contrario saldrá por el catch y recibirá una cadena con el error.

presentDropInPaymentUI(options)

• Esta función muestra el dialogo de pagos de Braintree. En caso de que lo usemos en Apple, solo la mostrará si ya ha llamado al método “setupApplePay” y ha concedido los permisos necesarios.
• Parámetros:
  • options -> PaymentUIOptions -> Es un argumento opcional que nos vale para configurar la interface de pagos.
• Retorna una promesa que se resuelve cuando el usuario haya terminado de procesarse el pago. En caso de que algo haya ido mal, saldrá por el catch. Con ella llega una instancia de PaymentUIResult que veremos ahora los campos que tiene.

Interfaces y clases relacionadas

Y ya, para terminar, vamos a comentar las interfaces y clases que hemos visto hasta ahora en el tutorial.

ApplePayOptions

• Esta es la interfaz utilizada en el método “setupApplePay” y nos permite editar los siguientes campos:
• Campos de la interface:
  • merchatId -> string -> Será la ID de vendedor que se obtiene en portal de desarrolladores de Apple.
  • currency -> string -> La moneda que vamos a utilizar en la transacción formateada en ISO-4217
  • country -> string -> La localización desde la que se acepta el pago. Estará formateada en ISO-3166-1 > “ES”, “GB”, “MX”

PaymentUIOptions

• Serán la interface que contenga las opciones de visualización de la ventana de diálogo.
• Campos de la interface:
  • amount -> Será la cantidad que se le solicita al usuario. También será mostrado en el botón de llamada a la acción (cta). Si no se ha especificado se mostrará “0,00”.
  • primaryDescription -> Será la descripción que se muestre en la ventana de diálogo de la transacción. Por defecto, será una cadena vacia.

PaymentUIResult

• Será la interface que llega desde “presentDropInPaymentUI” para notificar de lo que el usuario ha realizado finalmente.
• Parámetros:
  • userCancelled -> booleano -> Para saber si el usuario ha cancelado la operación.
  • nonce -> string -> Será una cadena que identifica el pago.
  • type -> string -> El tipo de transacción realizada.
  • localizedDescription -> string -> La descripción que hemos propuesto en la transacción.
  • card -> string -> * Puede ser uno de los siguientes valores: * * BTCardNetworkUnknown * BTCardNetworkAMEX * BTCardNetworkDinersClub * BTCardNetworkDiscover * BTCardNetworkMasterCard * BTCardNetworkVisa * BTCardNetworkJCB * BTCardNetwork.
  • payPalAccount -> object -> { email: string; firstName: string; lastName: string; phone: string; billingAddress: string; shippingAddress: string; clientMetadataId: string; payerId: string; }
  • applePaycard -> object -> {}
  • threeDSecureCard -> object -> { liabilityShifted: boolean; liabilityShiftPossible: boolean; }
  • venmoAccount -> object -> { username: string; }

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.

Sin nada más que agregar me despido ya. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!