Aitor Sánchez - Blog - Nov. 2, 2023, 1:43 p.m.
¿Interesad@ en introducir pagos mediante el componente Alipay Ionic en tu app? O, quizás ya lo has hecho, pero te falta alguna cosita que saber para hacerlo funcionar ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo te enseñaré cómo puedes implementar Alipay Ionic, su configuración y un ejemplo de uso completo.
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!
El primer paso, cómo todos los componentes externos al core del sistema, es realizar la instalación. Para hacerlo vamos a utilizar las dos siguientes líneas de consola:
$ ionic cordova plugin add cordova-plugin-gubnoi-alipay --variable APP_ID=your_app_id
$ npm install --save @ionic-native/alipay@4
La primera línea instalará el plugin que comunicará la parte nativa del dispositivo con nuestro código TS.
La segunda instalará el código TS que hará de puente entre nuestro codito TS y el plugin.
Pues con esto ya está instalado, ahora vamos a pasar a configurarlo.
Bien, y cómo la mayoría de los componentes externos, al igual que hay que hacer la instalación tenemos que configurarlo.
Se trata de una configuración sencilla en la que lo único que habrá que hacer es incluir el módulo en nuestros providers.
Dentro del archivo app.module.ts:
...
providers: [
...,
Alipay,
...
]
...
Recordemos que al incluirlo en nuestro app.module.ts, el componente Alipay estará disponible en toda la app con el respectivo coste de rendimiento. Si solo va a utilizarlo en una página de dicha app, será mejor que lo cargue en el "module" de dicho componente.
Y con esto terminamos la configuración, veamos un ejemplo de uso:
Primero vamos a ver un ejemplo y después comentamos sobre el código:
import { Alipay } from '@ionic-native/alipay';
constructor(private alipay: Alipay) {
//alipayOrder es una cadena codificada que contiene los parámetros, ahora veremos un ejemplo y los parámetros por separado.
this.alipay.pay(alipayOrder)
.then(result => {
console.log(result); // Success
})
.catch(error => {
console.log(error); // Failed
});
}
Una vez situados dentro de nuestra clase donde vayamos a utilizar Alipay importamos la clase "Alipay" desde el paquete "@ionic-native/alipay"
Posteriormente, inyectamos una instancia a través del constructor de la clase que será la que nos permitirá realizar los pagos.
Esta clase únicamente contiene el método "pay" que nos permitirá realizar el pago. Recibe una cadena de texto que contiene la información del pago. Ahora veremos, en la parte de campos y funciones, que contiene dicha cadena.
Y, para terminar, controlamos la promesa que nos devuelve que se resolverá cuando el usuario haya finalizado y nos entregará la información del pago.
Aunque esta parte quedará un poco escueta, dado que la clase únicamente contiene una función, he visto oportuno ponerla de todas formas.
Nos permite enviar un pago a Alipay. Recibe por parámetros los datos del pago que será una cadena similar a esta:
"app_id=2015052600090779&biz_content={"timeout_express":"30m","product_code":"QUICK_MSECURITY_PAY","total_amount":"0.01","subject":"1","body":"我是测试数据","out_trade_no":"IQJZSRC1YMQB5HU"}&charset=utf-8&format=json&method=alipay.trade.app.pay¬ify_url=http://domain.merchant.com/payment_notify&sign_type=RSA2×tamp=2016-08-25 20:26:31&version=1.0&sign=cYmuUnKi5QdBsoZEAbMXVMmRWjsuUj+y48A2DvWAVVBuYkiBj13CFDHu2vZQvmOfkjE0YqCUQE04kqm9Xg3tIX8tPeIGIFtsIyp/M45w1ZsDOiduBbduGfRo1XRsvAyVAv2hCrBLLrDI5Vi7uZZ77Lo5J0PpUUWwyQGt0M4cj8g="
Ahora vamos a separar los parámetros para que se vean de manera más cómoda:
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.