Gratis y de código abierto, Iónico ofrece una biblioteca de componentes, gestos y herramientas de interfaz de usuario optimizados para dispositivos móviles para crear aplicaciones rápidas y altamente interactivas. Puedes usar tu nativo JavaScript y habilidades de desarrollo web
Con XcooBee, puede agregar fácilmente una solución de pago sin contacto a su proyecto con unas pocas líneas de codificación. La implementación es segura y se gestiona fácilmente en muchos dispositivos y puede incluir notificaciones push y flujos de trabajo complejos de procesamiento empresarial sin servidor. Esto le permite llegar al mercado con una solución completa rápidamente en lugar de gastar ciclos de desarrollo en esto.
En cuanto al enfoque, existen principalmente dos enfoques exitosos para los pagos sin contacto que uno puede seguir. La RFC y la metodología QR.
La metodología de RFC
Este es el proceso actual en la mayor parte de Europa y América del Norte. Los compradores utilizan una tarjeta de crédito o débito basada en chip RFC o un dispositivo móvil. Los compradores deslizan el dispositivo sobre un lector de tarjetas especializado y el vendedor, luego, se conecta a la tarjeta o al procesador de pagos.
Las implementaciones populares de esto en los EE. UU. Para dispositivos móviles están representadas por Apple Pay y Google Pay. El problema para nosotros es que este método tenía algunos inconvenientes:
- Necesitábamos tener hardware especial. Algunos de los cuales han sido alquilados mensualmente por el vendedor (comerciante).
- Realmente no estaba completamente libre de contacto. Las tarjetas de débito aún requieren tocar las terminales del vendedor. Otras terminales requirieron confirmaciones en ocasiones.
- Ponerse en marcha en una tienda del mundo real no era cuestión de horas, sino semanas y meses.
Las ventajas fueron que los usuarios en su mayoría están familiarizados con los procesos de pago en los Estados Unidos.
La Metodología QR
Este es el modelo asiático y muy popular en China. Tanto AliPay como WeChat pagan y algunos otros usan esto como su estándar para comenzar el ciclo de procesamiento de pagos.
Los inconvenientes aquí son que los usuarios en EE. UU. Y Europa están menos familiarizados con esta metodología que con otros, aunque esto está cambiando rápidamente. Vemos que más usuarios se están familiarizando con los QR para otros fines además de la publicidad. Los usuarios ahora los ven en los restaurantes para buscar menús y en alquileres cuando alquilan scooters o bicicletas.
Así los inconvenientes:
una) Familiaridad del usuario con el proceso
si) Dado que el procesamiento se realiza en un dispositivo diferente al inicio del pago, cerrar el ciclo de pago requiere un esfuerzo por parte de los programadores.
Las ventajas son que esto, cuando se hace bien, es:
una) Muy rápido de implementar ya que no se necesita ningún otro hardware
si) Muy económico para el vendedor (comerciantes)
C) Puede ser realmente sin contacto incluso con tarjetas de débito
re) Puede cerrar el ciclo de pago incluso cuando el proceso se distribuye entre dispositivos.
Por lo tanto, en este tutorial nos centraremos en pagos sin contacto basados en QR y le mostraremos cómo con rapidez comience a usarlos en sus aplicaciones móviles basadas en react-native.
Usamos los pagos sin contacto de XcooBee, ya que requiere muy poco esfuerzo y ofrece muchas opciones, así como la capacidad de cerrar el ciclo de notificación de pagos.
XcooBee tampoco es un sistema de circuito cerrado como los otros proveedores. Los consumidores no necesitan una aplicación o una cuenta para participar, lo que lo hace mucho más aceptable en sus soluciones.
Comenzando desde cero
Prerrequisitos:
- Nodo 12
- Gratis Raya cuenta
- Gratis XcooBee Professional cuenta
- CLI iónico
Instale Ionic Client si no lo tiene:
npm install -g @ ionic / cli
Configuración del backend de procesamiento de pagos
En nuestro ejemplo, necesitará un XcooBee Professional cuenta y un Raya cuenta. Ambos son libres de configurar. Utilizar el tutoriales en vídeoo tutorial web configurar su primer proyecto de pago XcooBee. Esto configura su infraestructura base para procesar pagos para su aplicación. Esto es lo que necesitará para realizar todo el procesamiento de fondo.
La aplicación
Comenzaremos con una plantilla de Ionic React para comenzar. Lo haremos desde su línea de comandos o consola.
Si nunca ha instalado Ionic, primero instale las herramientas de línea de comandos escribiendo lo siguiente en su consola:
inicio iónico myPaymentApp en blanco --tipo = reaccionar
Esto instalará la plantilla Ionic en blanco usando React JS como sintaxis.
una vez completado, navegue al directorio de la aplicación recién creada.
cd myPaymentApp
Instalar bibliotecas
Ahora que tenemos una aplicación base, agreguemos las bibliotecas necesarias
npm install @ xcoobee / payment-sdk --save
Eso es todo lo que se necesita.
Inicie la aplicación escribiendo:
servicio iónico
Si su navegador no se abre automáticamente después de que vea Archivos emitidos con éxito. mensaje en la consola intente ir manualmente a la página de inicio: http://localhost:8100/home
Debe tener un aspecto como este:
Home.tsx
Solo hay un archivo que necesitamos cambiar. Es decir Home.tsx. Debería estar ubicado en {app} /src/Pages/Home.tsx
Importaciones
Elimine todas las declaraciones de importación existentes y lo construiremos. Estos son los componentes que utilizaremos en nuestra página de muestra de Ionic Framework:
import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} de '@ ionic / react';
Cambie la importación JS de reacción para incluir useEffect lo que nos permite usar ganchos. Los ganchos te permiten usar el estado y otras características de React sin escribir una clase:
import React, {useEffect, useState} de 'react';
Ahora, agregue soporte XcooBee a la página:
importar XcooBeePaySDK desde '@ xcoobee / react-native-xcoobee-payment-sdk';
En general, así es como debería verse su sección de importación cuando haya terminado:
import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonRow, IonCol, IonItem, IonInput, IonImg} de '@ ionic / react'; import React, {useEffect, useState} de 'react'; importar {BrowserXcooBeePaymentSDK} desde '@ xcoobee / payment-sdk'; import './Home.css';
Inicializar XcooBee
Ahora necesitamos inicializar la clase XcooBee. Aquí es donde puede configurar un dispositivo de notificación de inserción o instalar Id, etc. Esto sería necesario si necesita comunicarse con su dispositivo sobre el éxito y el fracaso del pago. Para nuestros propósitos, los únicos elementos de configuración necesarios son ID de campaña y formId. Puede encontrar estos valores en la página de resumen del Asistente de proyecto de pago XcooBee. Reemplace sus valores en lugar de usar los valores de ejemplo.
const sdk = nuevo BrowserXcooBeePaymentSDK ({campaignId: "test", formId: "test"});
La lógica
Queremos tener algunos marcadores de posición y controladores para que el usuario especifique la cantidad que desea cobrar y el código QR que se representará.
Usamos la llamada SDK dentro useEffect e inicializarlo con 123.00de precio a cobrar y usa la palabra Orden para describir el motivo del pago. La moneda final para esto estaría determinada por la configuración de su proyecto XcooBee. Puede realizar cambios en su XcooBee GUI / consola.
También volveremos a renderizar cuando el usuario toque Generar botón.
const [chargeAmount, setNumber] = useState (123,00); const [qr, setQr] = useState (); useEffect (() => {sdk.createPayQr ({cantidad: chargeAmount, referencia: "Order"}, 300) .then (base64 => setQr (base64));}, []);
El renderizado
Para esto, elimine todas las etiquetas entre regreso ( ) y reemplácelo con este diseño para su página de Ionic.
<ionpage>
<ionheader>
<iontoolbar>
<iontitle>Pago sin contacto</iontitle>
</iontoolbar>
</ionheader>
<ioncontent classname="myphoto">
<ionheader collapse="condense">
<iontoolbar>
<iontitle size="large">Pago sin contacto</iontitle>
</iontoolbar>
</ionheader>
<ionrow >
<ioncol classname="ion-text-center">
¿Cuánto le gustaría cobrar?
<ionitem>
<ioninput type="number" value={chargeAmount} placeholder="Enter Amount" onionchange={e > setNumber (parseInt (e.detail.value !, 10))}></ioninput>
</ionitem>
<ionbutton color="primary" onclick={e > {sdk.createPayQr ({amount: chargeAmount, reference: "Order"}, 300) .then (base64 => setQr (base64)); }}> Generar</ionbutton>
</ioncol>
</ionrow>
{/ * espacio de imagen qr * /}
<div classname="vertical-center">
<div classname="center">
<ionimg src={qr} classname="ion-align-self-end" />
</div>
</div>
</ioncontent>
<ionfooter>
<b>https://www.xcoobee.com</b>
</ionfooter>
</ionpage>
La mayor parte de esto es repetitivo generado. Agregar un encabezado y pie de página y un botón. Con esta línea representamos el QR:
Puede usar un XcooBee QR en cualquier lugar donde usaría una imagen. Es así de simple.
También agregamos un al hacer clic evento para el para volver a representar la base en la información actualizada que el usuario ha ingresado.
Formato final
Notará que el código QR ocupa toda la parte inferior de la pantalla. Se amplía para adaptarse al contenedor. Agreguemos un poco de magia de formato CSS cambiando el Home.css archivo en la misma carpeta. Esto evitará la escala y centrará la imagen. Agrega esto
Home.css:
.vertical-center {display: flex; alinear elementos: centro; justify-content: centro; altura: 100%; }
Aquí está la aplicación cuando se ejecuta (este ejemplo usa códigos de proyecto no válidos para que el ciclo de pago no pueda iniciarse):
Usando nuestro ejemplo Pre-Build
Por supuesto, ya tenemos una aplicación precompilada con la que puede experimentar si no desea seguir todos los pasos. Aún necesitará una configuración del Proyecto de pago XcooBee completada si desea procesar pagos (prueba o en vivo).
Por favor reemplace el ID de campaña y id de formulario en Home.tsx
Ejemplo de código iónico GitHub
También puede clonar esto en su máquina local de la siguiente manera:
git clone https://github.com/XcooBee/example-payment-sdk-ionic.git
ejemplo-pago-sdk-ionic.git
Felicidades
Esto es todo lo que se necesita para tener una aplicación que pueda aceptar pagos sin contacto.
Por supuesto, hay muchas más opciones para las generaciones de URL de pago directo y QR que esta muestra puede mostrar. Siéntase libre de experimentar con el SDK de pago de XcooBee, la cuenta profesional de XcooBee y el procesamiento de pagos de Stripe o Paypal.
Consejo profesional: si usa cuentas de prueba de Stripe o cuentas de Paypal Sandbox, tampoco incurrirá en ningún cargo de XcooBee.
Puedes experimentar y refinar desde aquí.
Más asistencia
Por favor contactar XcooBee si necesita explorar la posibilidad de agregar pagos sin contacto y la activación del comercio electrónico de archivos PDF para su entorno.
