Hoja De Pago De Pintualización De La Francia De Masterante Sin Reacción Nativo Com Expo

Hoy en día, durante una pandemia, la mayoría de las personas prefieren pagos en línea no solo por las precauciones de seguridad sin contacto, sino también porque es rápido, fácil y confiable. Muchas aplicaciones móviles incorporan pagos en línea, como Amazon, Uber y muchos más.

Hablando en pagos en línea, muchos desarrolladores de aplicaciones están utilizando la raya en sus proyectos nativos de Android e iOS de reacción porque la raya proporciona una manera de integrar un sistema de pago a esta tabla. Tenemos dos opciones para integrar la raya en reaccionar nativo: Hoja de pago o elementos.

La hoja de pago es un panel de pago previo a la derivación por la raya en la que el usuario puede insertar los detalles de la tarjeta y proceder con el pago. Los elementos son un poco más complicados; Tiene más control del proceso, luego posiciona los elementos de la tarjeta y es responsable de continuar con el pago.

En este artículo, discutiré mi preferencia por la hoja de pago antes de bucear en un tutorial para obtener una aplicación de donación de ejemplo desarrollada con reaccionar nativa, expo y hoja de pago.

Hoja de pago versus el método tradicional de elementos

Aquí hay algunas razones por las que creo que la hoja de pago es mejor que los elementos.

Primero, los elementos requieren mucha configuración. Como usted es responsable del pago, debe administrar la forma de pago. Esto puede ser complejo porque los diferentes países tienen diferentes configuraciones de tarjetas; Por ejemplo, las tarjetas en la India no requieren un código postal mientras está en los Estados Unidos. Debe considerar todas estas condiciones y administrarlas en los elementos en consecuencia.

En la hoja de pago, sin embargo, la raya ya ha configurado la mayoría de estas cosas para usted. Por lo tanto, si un número de tarjeta requiere un código postal, se le solicitará automáticamente al usuario que agregue un código postal. Además, si está habilitado, la hoja de pago es compatible con Apple Pay y Google Pay.

En segundo lugar, es necesario lidiar con muchos errores con elementos. La hoja de pago, por otro lado, se encarga del tratamiento de los errores para usted y alerta a los usuarios sobre lo que está mal con sus métodos de pago, lo que significa que le importa menos la colección de fondos.

Por ejemplo, si la tarjeta no tiene fondos suficientes, los elementos lo requieren que lea el error y lo muestre para los usuarios. Pero cuando está utilizando la hoja de pago, el usuario será advertido automáticamente por la raya. Solo necesitas lidiar con los procesos de post pago.

Finalmente, hay algunos requisitos legales o de privacidad con el procesamiento de pagos que puede perderse al usar elementos. Por ejemplo, puede estar almacenando inadvertidamente los datos que no deben, como detalles de pago de los usuarios.

Los diferentes países tienen diferentes leyes sobre la privacidad de los datos y pueden ser frustrantes de conocer y seguir a cada uno de ellos. La hoja de pago garantiza que no tenga que guardar ningún dato en sus servidores porque toda la comunicación requerida para el pago se realiza directamente con la raya. Esto le protege de violar accidentalmente las leyes de privacidad de los datos.

Construyendo una solicitud de donación

Hoy en día, construiremos una aplicación de donación utilizando la Expo y reaccionaremos nativo con la hoja de pago para el procesamiento de pagos. También requeriremos un servidor NODE.JS para manejar las operaciones de la raya, como comenzar un pago y detectar cualquier pago en el servidor.

Aquí es lo que debe tener para realizar un seguimiento del proyecto que estamos haciendo para hacerlo hoy:

nodo instalado en su máquina Un editor de código: prefiero la cuenta de código de código Visual Studio Stripe la CLI Stripe instalado en su máquina La extensión de la raya para el código de estudio visual Conocimiento práctico del nodo y reacciona nativo

Aquí está el enlace al repositorio de GitHUB si se atasca y desea consultar el código.

¡Vamos a empezar a divertirnos! Cree una carpeta de su elección (en mi caso, lo llamé Expo-Stripe) para usar como nuestra carpeta de proyectos.

El primer paso es crear un servidor de nodos, lo que nos ayudará a iniciar los pagos.

Creación de un servidor NODE.JS

En la carpeta Expo-Stripe que acabamos de crear, cree una nueva carpeta llamada Backend. Aquí es donde residirá nuestro proyecto de back-end nodo.

Arrancar un proyecto de nodo usando el siguiente comando y tendrá un archivo Package.json Listo:

npm init-y

realice el siguiente comando en el Terminal En la carpeta Backend para instalar algunas dependencias que nos ayudarán con el servidor:

NPM Instalar Express Cors Stripe Dotenv

Express se usa para hacer una API de descanso fácilmente con un nodo. Admite el uso de middleware y tiene muchas características diferentes; Además, es fácil de usar.

El paquete Se usa con Express para facilitar la comunicación con nuestro servidor y asegúrese de que no se generen errores al enviar solicitudes a nuestro servidor.

El paquete de rayas nos ayuda a comunicarse con los servicios de rayas, como nuestra cuenta de rayas, para inicializar el pago o verificar el estado de pago.

Finalmente, el paquete Dotenv establece las variables de entorno en nuestro proyecto para que no tengan que almacenar datos confidenciales, como la banda de clave secreta en nuestro código. Podemos conservarlo en un archivo separado.env.

Ahora puede iniciar el servidor usando el siguiente comando en el terminal:

índice NODEMON

Si no tiene instalado Nodemon, instale usando el siguiente comando :

NPM Install-G Nodemon

Obtención de nuestra clave secreta de rayas

Antes de que realmente tratemos con las operaciones de la raya, obtendremos nuestra clave secreta de la raya..

Abra el panel de la raya y asegúrese de que la visualización de datos de prueba esté marcada en la barra lateral. Luego haga clic en los desarrolladores y las teclas API para ver sus teclas API.

Recuerde mantener el secreto clave en secreto y no la comparta con nadie, ya que esto le dará acceso a su cuenta de rayas. No necesitamos el público clave por ahora, pero lo usemos más adelante en nuestra aplicación nativa de reacción.

Copie la clave secreta y regrese a la carpeta Back-End para crear un nuevo archivo llamado.env. Mencione su clave secreta en el formato que se muestra a continuación:

stripe_secret_key = (clave secreta aquí)

Arrancando un servidor expreso y tráfico con las operaciones de la raya

Crear un nuevo Archivo en la carpeta Backend llamada Índice. Js. Este será el archivo donde se almacenará la lógica del servidor principal.

Primero, creemos un estándar de servidor básico:

Requerir («Dotenv»). Config (); const express = requiere («expreso»); Const App = Express (); Const Stripe = Requerir («Stripe»); const stripe = raya (proceso.env.tripe_secret_key); Const Cors = Requerir («Cors»); Const port = process.env.port || 5000; App.use (express.json ()); App.use (cors ()); App.Listen (Puerto, () = Console.log (servidor que se ejecuta en el puerto $ {PORT }`));

En el código anterior, inicializamos Denot, que inicializa las variables de entorno para nosotros. En nuestro caso, es la clave secreta de la raya.

Luego, inicializamos una aplicación expresa para que podamos crear una API de reposo e inicializar la raya para pasar la clave secreta de las variables de entorno. También importamos los corsos para que lo usemos con Express.

A continuación, creamos una variable llamada Puerto. Esto verifica si se proporciona un puerto en las variables de entorno y, si no, se ejecuta en el puerto 5000. Esto se usa generalmente con Heroku porque Heroku usa sus propios puertos.

También implementamos la aplicación. Uso (express.json ()); Para que nuestro servidor acepte los datos de JSON como una carga útil en las solicitudes.

Creación de un PensiónIntentista

Vamos a crear una ruta POST (/ DONEATE) porque necesitaremos algunos datos de usuario y estamos creando una aplicación de Pensión:

. POST («/ DONANTE», ASYNC (REQ, RES) = {intento {// Obtener datos del cliente Sea {cantidad, nombre} = req.body; // validación simple si el nombre) devuelve res.status (400).json ( {MENSAJE: «Todos los campos son obligatorios»}); Cantidad = parseint (cantidad); // Iniciar Pago de Pago PAGOINTENTENTENTE = WAY BAND.PAYMENTINTTS.CREATE ({CANTIDAD: Math.round (cantidad * 100), moneda: «INR», PAGPETHOD_TYTYPES: [«TARJETA»], Metadatos: {Nombre},}); // Extraer el secreto del cliente Const Clientsecret = PeinkInt.Client_Secret; // Enviar el secreto del cliente como Respuesta Res. JSON ({MENSAJE: «Pago iniciado «, Clientsecret});} catch (err) {// captura cualquier error y envíe el error 500 a CLIE NT Console.Error (ERR); res.status (500).json ({mensaje:» Error interno del servidor «} );}});

En el código anterior, estamos obteniendo el valor y el nombre de nuestra aplicación y validándonos. Si no se envían los datos, devolveremos un error 400.

Por lo tanto, estamos convirtiendo el valor entero si se envía un número en forma de cadena al servidor. Esto se debe a que solo podemos pasar valores enteros para la raya.

Siguiente, creamos un PensiónIntentista y pasamos el valor a pagar (en la denominación más baja), la moneda (vivo en la India, para mí es INR; use la moneda que establece en su cuenta de rayas ), la forma de pago y los metadatos con el nombre del usuario.

Cuando verificamos la transacción en el panel Raya, puede ver el nombre de usuario en la sección Metadatos. Esto es realmente útil si desea incluir información con el pago para que pueda encontrarlo más tarde.

Luego estamos extrayendo el secreto del Pensión Pensión, lo que ayuda a la instancia de la raya en nuestra aplicación nativa de reacción, reconoce el pago y procede a la confirmación.

Finalmente, estamos enviando este secreto del cliente a nuestra solicitud, que ahora puede confirmar el pago.

Creación de un WebHOOK

Para probar la banda de WebHOOKS localmente, debemos usar la extensión de la raya en el código de estudio visual para facilitar las cosas. ¡Recuerde, debe tener instalada la raya de CLI antes de continuar con esta sección!

Abra la extensión de la raya en la barra lateral y debe ver las siguientes opciones en la parte superior:

Haga clic en el lugar delantero para la máquina local. Ingrese la URL de WebHOOK como http: // localhost: 5000 / rayas; Vamos a tratar con la ruta pronto. Si se le solicita que inicie sesión en la raya y autorice la CLI, hágalo y repita el proceso.

Si echa un vistazo a la terminal, recibirá una clave secreta de la prueba de WebHook. Copie y péguelo en el siguiente formato en el archivo.env:

stripe_webhook_secret = (Stripe WebHook Secret)

Ahora vamos a crear una ruta para manejar las solicitudes de WebHook de la raya. Primero, agregue la siguiente línea antes de que el analizador JSON creamos anteriormente (la raya debe usar el cuerpo crudo):

app.use («/ stripe», express.raw ({tipo: «* / * «}));

Ahora podemos proceder a manejar la ruta:

app.post («/ stripe», async (req, res) = {// obtener la firma de los encabezados CONST SIG = Req.Headers [«Stripe-Signature»]; Deja el evento; intente {// verifique que el evento se envíe desde la raya o terceros // y analice el evento de evento = AwAit Stripe.Webhooks.ConstructCent (Req.body, Sig, Process.env. Stripe_Webhook_Secret);} Catch (ERR) {// lidiar con lo que sucede si el evento no es de Stripe Console.log (ERR); devuelve res.status (400).json ({mensaje: err.message} ;} // evento cuando se inicia un pago IF (Event.Type === «PAGHIN_INTENT.CREATED») {Console.log (`{Event.Data.bject.metadata.name} ¿Pago iniciado? ‘);} / / evento cuando un pago fue exitoso si (Event.Type === «PAGIN_INTENT.SUCEDED») {console.log (`{event.data.object.metadata.name} TUCHE EN PAGO!`); // Service} RES.json ({ok: true});});

Aquí, estamos obteniendo la firma de la franja de los encabezados porque necesitamos compruebe primero si la solicitud está hecha por la raya o un tercero que pretende ser la raya.

Usaremos construcciones para verificar la firma en relación con el secreto de WebHook que almacenamos en las variables de entorno. Si la solicitud es de terceros, se generará un error con el código de estado 400.

ahora, si la solicitud es de la raya en sí, el evento se almacenará en el evento. Y ahora podemos revisar event.type y el estado de pago de un usuario utilizando los metadatos de Pensaje que hicimos antes. Si tiene alguna acción posterior al pago, puede ejecutarlo aquí.

Finalmente, agregamos una respuesta a Stripe Sepa que recibimos su solicitud.

Ahora que nuestro servidor está configurado, finalmente podemos pasar a nuestra APOYA EXPO y reaccionar.

Creación de una aplicación de exposición y reaccionar a la solicitud nativa

Volver a la carpeta de su proyecto (para mí es Expo-Stripe) Si aún no tiene instalado la EXPO CLI, Instalelo usando el siguiente comando:

npm install-g Expo-cli

Ahora puede crear aplicaciones nativas de reaccionar con Expo. Escriba el siguiente comando en el terminal:

expo init rn-app

Cuando se le solicite con las opciones, seleccione la primera, que es una exposición en blanco adjunta con flujo de trabajo administrado. Esto creará una nueva carpeta llamada RN-Aplicación que contenga nuestros archivos nativos de reacción.

Vaya a la carpeta de la aplicación RN y escriba el siguiente comando para iniciar las herramientas del desarrollador en su navegador web:

npm Inicio

Esto debe iniciar automáticamente su navegador Y debe ver una pantalla como esta:

Ejecute la aplicación usando cualquiera de las opciones en la barra lateral izquierda. En mi caso, usaré un simulador de iPhone. Si está en una máquina de Windows, es posible que deba usar un emulador Android o un dispositivo físico real.

Después de ejecutar, el simulador debe comenzar y debe ver la aplicación:

Ahora, instalaremos el paquete de rayas para la Expo. Expo facilitó la integración de la raya en reaccionar nativo sin tocar los archivos de proyectos nativos.

Escriba el siguiente comando en el terminal para instalar el paquete nativo de reaccionar Stripe:

EXPO Instale @ Remate / Raya-reacción-Nativo

Recuerde que estamos usando Instalación de la Expo y no la instalación de NPM, porque Expo se ocupa de la instalación para nosotros.

Configuración de la franja en reaccionar nativo

Antes de configurar la raya, recomiendo encarecidamente la instalación de la extensión de fragmentos ES7 al código de estudio visual porque genera componentes en blanco.

Crear una nueva carpeta llamada Componentes y un nuevo archivo llamado Checkout.js. Comience a escribir RNFE, elija SNIPPET y tendrá un componente listo. Guarda el archivo; Vamos a usarlo pronto.

Ir a app.js e importar el componente de pago y stripreprovider:

Importar {stripeprovider} de «@ rayas / raya-reacción-nativo»; Importar «./ componentes / pago»

Ahora, su JSX debe parecer similar a:

Recuerde poner su clave de banda clave encontrada en el panel de la raya. Estamos involucrando el componente de pago dentro del stripreprovider para que podamos acceder a los servicios de rayas.

Vaya a Checkout.js y cree el estado para nombre y cantidad. También utilizaremos el gancho de rayas para comunicarse con la raya:

const [nombre, setname] = USESTATE («); Const [Cantidad, Setamount] = USESTATE («1»); const stripe = ustripe ();

El nombre predeterminado estará vacío y el valor predeterminado será INR.

Ahora, creemos un diseño básico y mapee los estados con los cuadros de texto. Su JSX debe cuidar:

setname (e)} / setamount (e)} /

Crear una función llamada Donar (), en la que trabajaremos pronto:

const donate = async () = {};

Diseño generado Debe ser similar a la siguiente:

Luego, nos ocuparemos de la función de donación:

const donate = async () = {intente {const finalamunt = parseint (cantidad); si ( FinalMount 1) Devuelva alerta.alert («No se puede donar por debajo de 1 INR»); Const Response = Await Fetch («http: // localhost: 5000 / donate», {método: «poste», encabezados: {«contenido- Tipo «:» Aplicación / JSON «, Cuerpo: JSON.Stringify ({CANTIDAD: FinalMount, Name}), Const = Espere para responder.json (); if (! Responder.ok) alerta.alert (Data.message); } Const initSheet = Await Stripe.initPaymentShee T ({PeinkIntentClientsecret: Data.Clientsecret,}); If (initSheet.Error) {Console.Error (initSheet.Error); Devolver alerta.alert (initSheet.Error.Message); } Const Presentsheet = Await Stripe.PresentPaymentSheet Hoja (CLIENTSECRET: DATA.CLIENTESCRETT,}); If (presentsheet.error) {console.error (presentsheet.Error); Devolver alerta.alert (pressheet.Error.Message); } Alerta.alert («Donado gracias por la donación»); } catch (error) {console.error (error); Alerta.Alert («Pago fallido!»); }};

Primero, estamos convirtiendo los valores de las cuerdas en enteros. Luego verificamos si el valor es inferior al 1% INR. En este caso, la aplicación emite una alerta y la transacción se interrumpe.

Luego, realizamos una solicitud de POST HTTP para nuestro goteante del nodo para obtener el secreto del cliente. Si hay errores, los tratamos de revisar la respuesta.OK.

Luego, inicializamos la hoja de pago utilizando la función INITPAYMENTSHEET () y pase la clave secreta del cliente que obtuvimos en la parte posterior. Presentamos la hoja de pago usando PresentPaymentSheet () nuevamente al proporcionarle el secreto del cliente y verificar si hay algún error. Si encontramos algunos, se envía una alerta al usuario.

Si no hay errores, debe recibir una alerta de «donación exitosa». Al hacer clic en el botón Donar, verá lo siguiente:

Esta es la hoja de pago, hecha por raya. Desde aquí, todo se trata por la raya y no tiene que preocuparse por el tratamiento de los errores.

Tan pronto como el pago es exitoso, puede verlo claramente con el nombre de usuario en la consola que ejecuta el servidor de nodos. En entornos de producción, debe crear manualmente un WebHOOK en el panel Raya y usar las teclas activas en lugar de las teclas de prueba.

¿Qué sigue?

¡Felicidades! Usted integró la hoja de pago con éxito en su solicitud de exposición. Quiero que juegues con eso tanto como puedas. Tal vez intente usar Apple Pay y Google Pague junto con la hoja de pago, ¡creo que sería un buen ejercicio!

Si enfrenta algún desafío, siempre puede consultar al repositorio de GitHUB unido previamente en este artículo.

Compartir