1. Casa
  2. Docs
  3. Cómo
  4. Crear la aplicación React Native Contactless Payment

Crear la aplicación React Native Contactless Payment

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. capacidades y programación en la aplicación.

Comenzando desde cero

Prerrequisitos:

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ídeo o 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 página de resumen del Proyecto de pago XcooBee. 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' }); Exportar función predeterminada Aplicación (  ) { const [chargeAmount, setText] = React.useState ( '1.00' ); const XcooBeePayQR = XcooBeePaySDK.createPayQR ( parseFloat (chargeAmount)); return ( < View style = {styles.container} > < Text > ¿Cuánto quieres cobrar ?:  Texto > < TextInput defaultValue = '1.00' style = {{textAlign: ' right '}} onChangeText = {text => setText (text)} value = {chargeAmount} /> < Text style = {{ marginBottom: 20 , marginTop: 20 }}> Por favor escanea y paga  Texto > {XcooBeePayQR} < Texto > desarrollado por XcooBee  Texto >  Ver >); }

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):

Example react native app running

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í.

¿Te ayudó este artículo? si No

¿Cómo podemos ayudar?