Intentar salir y crear una solución de pago sin contacto desde cero no es algo para lo que todos tengan el tiempo y el deseo de hacerlo. En cuanto al enfoque, existen principalmente dos enfoques exitosos para el contacto sin contacto. 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. A diferencia de otros proveedores, XcooBee también agrega a esto un sistema de infraestructura abierta que no requiere una aplicación o registro de cuenta. Esto reduce la fricción y mejora la adopción.
Comenzando desde cero
Prerrequisitos:
- Nodo 12
- Gratis Raya cuenta
- Gratis XcooBee Professional cuenta
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
Puede usar create react native (CRA) o Expo project como línea de base para nuestro ejemplo. Utilizaremos la versión basada en Expo.
Si nunca ha instalado expo, primero instale las herramientas de línea de comando:
npm install expo-cli --global
Crea tu proyecto de Expo
Crear su proyecto de exposición también es sencillo.
expo init myPayProject => seleccione en blanco (con mecanografiado)
cd myPayProject expo start
El último comando debe iniciar una sesión de exposición con su aplicación de exposición.
Instalar bibliotecas
Ahora que tenemos una aplicación base, agreguemos las bibliotecas necesarias
hilo agregar react-native-svg => agrega soporte SVG necesario para gráficos vectoriales
hilo agregar @ xcoobee / react-native-xcoobee-payment-sdk => agrega las bibliotecas XcooBee
App.tsx
Solo hay un archivo que necesitamos cambiar. Es decir App.tsx.
Agregue una declaración de importación a su sección de importación. importar XcooBeePaySDK desde '@ xcoobee / react-native-xcoobee-payment-sdk';
Siga esto con la configuración inicial del SDK de pago. Aquí es donde puede configurar Expo Install Id, etc., si necesita comunicarse con su dispositivo sobre el éxito y el fracaso. Para nuestros propósitos, los únicos elementos de configuración necesarios son ID de campaña y formId. Puede encontrar estos valores en su Asistente de proyecto XcooBee - Página de resumen del proyecto de pago. Reemplace sus valores en lugar de usar los valores de ejemplo.
XcooBeePaySDK.setSystemConfig ({campaignId: 'e98.eg0000000', formId: 't000'});
El resto del código es solo unos pocos para mostrar etiquetas, una para que el usuario ingrese la cantidad que desea cobrar. El valor predeterminado es $1.
Tu App.tsx debería verse así:
importar Reaccionar desde 'reaccionar'; importar {StyleSheet, Text, TextInput, View} desde 'react-native'; importar XcooBeePaySDK desde '@ xcoobee / react-native-xcoobee-payment-sdk'; // TODO: reemplazar con valores reales de XcooBee Payment Project // Abra su proyecto de pago en modo de edición y revise la pantalla de resumen XcooBeePaySDK.setSystemConfig ({campaignId: 'e98.eg0000000', formId: 't000'}); función predeterminada de exportación App () {const [chargeAmount, setText] = React.useState ('1.00'); const XcooBeePayQR = XcooBeePaySDK.createPayQR (parseFloat (chargeAmount)); regreso ( ¿Cuánto quieres cobrar? setText (texto)} valor = {chargeAmount} /> Por favor escanee y pague {XcooBeePayQR} desarrollado por XcooBee ); }
La mayor parte de esto es repetitivo generado por Expo durante la creación del proyecto. Con esta línea definimos el objeto QR y la cantidad que queremos representar: const XcooBeePayQR = XcooBeePaySDK.createPayQR (parseFloat (chargeAmount) donde el createPayQR es la función principal del Payment SDK y precio a cobrar es la cantidad que deseamos cobrar al comprador-usuario. Consulte la documentación del SDK de pago para ver opciones adicionales de tipos de QR que se pueden generar y opciones de llamada.
Cuando deseamos renderizar, usamos el objeto QR como este {XcooBeePayQR}.
Esto agregará el QR en su contenedor de renderizado actual.
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 App.tsx
Ejemplo de código de Expo GitHub
También puede clonar esto en su máquina local de la siguiente manera:
git clone https://github.com/XcooBee/example-payment-sdk-react-native.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.
