Crea una web app con React y PayPal paso a paso

Name: Crea una web app con React y PayPal paso a paso
Rating: 5.0 (1 reviews)

Aprende a procesar pagos con PayPal

Created byAmazing Tutorials

Last updated 5/2023

Spanish

What you'll learn

Aprende al crear una web app con React desde cero
Aprende a usar la API de PayPal
Aprende a realizar transacciones de prueba con PayPal
Aprende a configurar React paso a paso
Crear un servidor con Nodejs

Course content

2 sections • 100 lectures • 11h 15m total length

Introduccíón (contiene el código fuente de la aplicación)1:17
Instalación de Webpack12:28
Aprende a instalar y configurar Webpack. Se crea el primer bundle desde cero; se usa la configuración más básica.
Añadir soporte para CSS5:25
Activa el soporte para CSS en Webpack; una vez que el soporte ha sido configurado entonces la aplicación creada con React puede incluir hojas de estilo.
Añadir soporte para imágenes con Webpack3:10
Aprende a añadir soporte para imágenes en una aplicación creada con React; se necesita modificar el archivo de configuración de Webpack.
Añadir soporte para archivos de fuente con Webpack2:28
Aprende a añadir soporte para archivos de fuente usando Webpack; después de modificar la configuración la aplicación creada con React podra contener diferentes estilos de fuente.
Genera archivos HTML con Webpack10:16
Aprende a generar archivos HTML de forma automática con Webpack lo que facilita la creación de la aplicación y evita que haya errores al anexar archivos Javascript.
Configurar React con Webpack8:53
Aprende a configurar React usando Webpack.
Crea un servidor con Express8:38
Añade un framework CSS al proyecto3:26
Añade un framework CSS al proyecto para poder crear un diseño responsivo de forma simple.

Creando el primer componente con React9:08
Crea un componente con React; un componente es una porción de la interfaz de usuario.
Crea una variable de estado con React6:53
Las variables de estado de React nos permiten guardar información y actualizar la interfaz de usuario cuando la variable es modificada.
Crea una cuadrícula responsiva (responsive grid) con CSS4:51
Una cuadrícula responsiva permite que el diseño sea flexible y se adapte a cualquier tamaño de pantalla.
Crea código de React de forma automática con un for-loop14:08
Crea código React usando un búcle ; los búcles como un for-loop pueden automatizar la creación de código.
Crea un formulario para los detalles del producto (parte 1)5:44
Añade un campo de texto para introducir el nombre del producto.
Crea un formulario para los detalles del producto (parte 2)2:52
Añade un campo de texto para introducir la descripción del producto.
Crea un formulario para los detalles del producto (parte 3)2:50
Añade un campo de texto para introducir la clave única del producto.
Crea un formulario para los detalles del producto (parte 4)3:56
Añade un campo de texto para introducir el precio del producto.
Crea un formulario para los detalles del producto (parte 5)2:56
Añade un campo de texto para introducir los impuestos del producto.
Crea un formuluario para los detalles del producto (parte 6)4:30
Añade un campo de texto para introducir la cantidad de unidades de un producto.
Crea un formulario para los detalles del producto (parte 7)4:33
Añade una lista desplegable para determinar la categoría del producto.
Crea un formulario para los detalles del producto (parte 8)8:47
El evento onChange se añade a los campos de texto; éste evento se usará para guardar los detalles del producto en una order de PayPal.
Crea un formulario para los detalles del producto (parte 9)11:39
Guarda los detalles del producto en una orden de PayPal cada vez que el usuario introduce texto en el campo de texto.
Crea un formulario para los detalles del producto (parte 10)5:17
Guarda los detalles del producto en una orden de PayPal cada vez que el usuario introduce texto en el campo de texto.
Crear un botón con CSS y React5:40
Aprende a crear un botón con CSS y React.
Guarda la orden de PayPal en el navagador web9:11
Aprende a guardar información en el navegador web; posteriormente la información puede ser usada en otras páginas web.
Configura una nueva página web y su bundle usando Webpack8:02
Añade una nueva página web al proyecto; usa Webpack para añadir el archivo HTML de forma automática.
Crea un nuevo componente de React9:40
Añade el componente de React que mostrará un formulario para introducir la dirección a dónde se enviará la mercancía.
Configura la order de PayPal para contener la dirección de destino6:06
Añade las propiedades necesarias a la orden de PayPal para poder incluir la dirección de destino.
Crea un formulario para la dirección de destino (parte 1)6:08
Añade un campo de texto para introducir el nombre de la persona que recibirá la mercancía.
Crea un formulario para la dirección de destino (parte 2)9:41
Añade una lista desplegable para seleccionar el país a donde se enviará la mercancía.
Crea un formulario para la dirección de destino (parte 3)3:50
Añade un campo de texto para introducir la ciudad a donde se enviará la mercancía.
Crea un formulario para la dirección de destino (parte 4)5:20
Añade los campos de texto para introducir la calle y el número; en algunos casos se puede introducir el piso y el número de departamento en caso de ser necesario.
Crea un formulario para la dirección de destino (parte 5)7:15
Aprende a manejar campos de texto con React.
Crea un formulario para la dirección de destino (parte 6)8:42
Aprende a configurar campos de texto usando React.
Creando un botón con React y CSS6:22
Se crea un botón con React y CSS.
Añadiendo un campo de texto para el código postal3:19
Añade un campo de texto para introducir el código postal.
Configurando el campo de texto para el código postal3:15
Configurando el campo de texto para el código postal.
Guardando la dirección de destino dentro de la orden de PayPal14:49
Añade la dirección de destino a una orden de PayPal y después guarda el objeto en en navegador web para que pueda ser usado por otras páginas.
Añade una nueva página HTML al proyecto usando Webpack8:13
Configura una nueva página HTML y su respectivo archivo Javascript usando Webpack.
Crea la estructura de la página web Amount Breakdown8:49
Utiliza un framework CSS para crear la estructura de una página web.
Configura la orden de PayPal para contener los detalles del monto a pagar8:09
Configura la orden de PayPal para que pueda contener todos los detalles del monto a pagar por el cliente como por ejemplo el costo de envío, impuestos, descuentos y más.
Crea una tabla usando un framework CSS11:25
Crea la tabla donde se mostrarán todos los detalles del montó que pagará el cliente.
Calculando el monto total automáticamente25:47
Calculando el monto total de los artículos que se van a comprar.
Añade un campo de texto para el costo del envío8:25
Añade un campo de texto para introducir el costo del envío.
Añade un campo de texto para el costo del manejo de la mercancía4:47
Añade un campo de texto para el costo del manejo de la mercancía.
Añade un campo de texto para el descuento que se aplica al envío4:35
Al comprar mercancías tal vez haya algún descuento que se pueda aplicar al envío; para especificar ése descuento se va a añadir un nuevo campo de texto.
Añade un campo de texto para un descuento a las mercancías4:09
Añade un nuevo campo de texto para el descuento aplicado a las mercancías.
Calcular el monto total de los impuestos15:43
Calcula el monto total de los impuestos.
Configurando el campo de texto para el costo del envío7:29
Configura el campo de texto para el costo de envío usando React.
Configurando el campo de texto para el costo por el manejo de la mercancía5:15
Configurando el campo de texto para el costo del manejo de la mercancía.
Configurando el campo de texto para el descuento al envío5:33
Configurando el campo de texto para el descuento al envío.
Configurando el campo de texto para añadir otro descuento4:26
Configurando otro campo de texto para añadir otro descuento en caso de ser necesario.
Calcula el monto final16:34
Se calcula y se muestra el monto final; el monto final se actualiza cada vez que el usuario modifica el contenido de los campos de texto.
Configura un botón con React y CSS8:09
Configura un botón con React y CSS.
Realizando un pequeño ajuste a la aplicación3:38
Simplemente se modifica un poco el código Javascript para que funcione correctamente.
Modifica la orden de PayPal y añade los detalles del monto a pagar11:20
Se añaden nuevas propiedades a la orden de PayPal; dichas propiedades describen a detalle el monto a pagar por el cliente.
Añade una nueva página web al proyecto usando Webpack8:32
Añade una nueva página web al proyecto usando Webpack.
Añade un nuevo componente React4:22
Añade un nuevo componente React al proyecto; dicho componente mostrará los detalles del monto a pagar en una tabla y además el botón para redireccionar al usuario a PayPal
Crea una cuadrícula responsive con un framework CSS5:47
Crea una cuadrícula responsiva con un framework CSS para hacer que el contenido se adapte a cualquier tamaño de pantalla.
Crea una tabla usando un framework CSS10:27
Crea una tabla en la cual se mostrarán todos los detalles del monto que pagará el cliente.
Terminando la tabla que muestra los detalles del monto a pagar9:30
Terminando la tabla la cual muestra todos los detalles sobre el monto a pagar.
Crea una cuenta de vendedor de PayPal en modo sandbox7:44
Crea una cuenta de PayPal para vendedor pero en modo sandbox; ésta cuenta se usará para recibir pagos de forma ficticia.
Crea una cuenta de cliente de PayPal en modo sandbox4:11
Crea una cuenta de cliente de PayPal pero en modo sandbox; con ésta cuenta se pueden hacer pagos de forma ficticia y así probar la web app.
Configura una app de PayPal6:01
Configura una app de PayPal; éste paso es necesario para integrar PayPal a una web app.
Solicitar un Token the PayPal10:05
Para comunicarse con la API de PayPal el primer paso es solicitar un access token que es como una llave de acceso.
Obtener la orden de PayPal del navegador web4:39
Antes de realizar una solicitud HTTP para transferir la orden de PayPal, ésta última debe ser leída del navegador web.
Configura el método fetch para comunicarse con PayPal3:11
Configura el método fetch para así poder comunicar la web app con la API de PayPal.
Configura la orden de PayPal11:51
Añade todas las propiedades necesarias a la orden de PayPal para poder configurar un pago.
Añade la cabeceras HTTP necesarias6:39
PayPal requiere ciertas cabeceras HTTP para poder procesar una solicitud; dichas cabeceras son añadidas en ésta lección.
Recibiendo la respuesta de PayPal3:19
Crea el código javascript que describe que pasa cuando se recibe la respuesta de PayPal.
Añadiendo una función asíncrona4:24
Se añade todo el código anterior dentro de una función asíncrona; las funciones asíncronas se usan cuando se realizan solicitudes HTTP.
Analizando la respuesta de la API de PayPal8:32
Analizando el la respuesta que PayPal genera después de enviar una orden de PayPal.
Guardando el vínculo a la ṕagina de pago de PayPal4:46
Se obtiene la dirección URL de la página de pago de PayPal y se guarda en una variable para usarla más tarde.
Añadiendo un botón con React y CSS6:37
Se añade un botón el cual se utiliza para redireccionar al usuario a la página de pago de PayPal.
Redireccionando al usuario a PayPal3:06
Se configura el botón para poder redireccionar al usuario a la página de PayPal.
Configurando una nueva página HTML para el proyecto usando Webpack8:28
Configura Webpack para añadir una nueva página HTML de forma automática.
Crea el componente de React que procesará el pago con PayPal4:14
Se configura el componente de React que contendrá todo el código necesario para envíar el dinero a la cuenta del vendedor.
Añadiendo una imagen al proyecto2:49
Se descarga una imagen de internet para usarla en el proyecto.
Añadiendo archivos de fuente al proyecto2:12
Se añaden archivos de fuente al proyecto para poder modificar la apariencia del texto.
Creando la página web de confirmación del pago7:47
Se crea el código React necesario para notificar que el pago en PayPal fue exitoso.
Añadiendo una imagen a la página de confirmación de pago4:20
Añadiendo una imagen a la página de confirmación de pago.
Mejorando la página de confirmación de pago5:40
La página de confirmación de pago mostrará la palabra "Waiting" mientras se envían los fondos a la cuenta del vendedor.
Adquiriendo el parametro token de la URL9:12
La URL contiene un parámetro llamado "token" el cual se necesita para envíar los fondos a la cuenta del vendedor.
Adquiriendo el access token de PayPal4:57
El access token de PayPal se usa para acceder a la API de PayPal.
Usando la API de PayPal para realizar la transacción8:16
Se usa la API de PayPal para enviar el dinero a la cuenta del vendedor.
Finalizando la página de confirmación de pago2:57
Últimos ajustes a la página de confirmación de pago.
Corrigiendo el código4:51
Se corrige un pequeño error en el código.
Añadiendo una nueva página al proyecto7:19
Se añade una nueva página web al proyecto usando Webpack.
Creando un nuevo componente de React3:33
Se crea un nuevo componente de React el cual se usará para mostrar un mensaje cuando la transacción sea cancelada.
Añadiendo una imagen al proyecto1:37
Añadiendo una nueva imagen al proyecto; dicha imagen se usará en la página de cancelación del pago.
Creando la página de cancelación del pago10:06
Se crea la página web que se muestra cuando un pago es cancelado.
Modificar el estilo del texto en la homepage4:52
Se añaden archivos de fuente para modificar la apariencia del texto en la homepage.
Modificar el estilo del texto en la página Shipping Address4:57
Se modifica el estilo del texto en la página web donde se introduce la dirección de destino.
Modificar el estilo del texto en la página Amount Breakdown4:08
Se modifica el estilo del texto en la página Amount Breakdown usando archivos de fuente.
Modificar el estilo del texto en la página Checkout Section3:58
Se modifica el estilo del texto en la página Checkout Section usando archivos de fuente.
Modificando el comportamiento del botón Save and Continue ( parte 1)5:44
Se añade una nueva funcionalidad al botón Save and Continue que se encuentra en la homepage.
Modificando el comportamiento del botón Save and Continue (parte 2)4:14
Se añade una nueva funcionalidad al botón Save and Continue localizado en la página Shipping Address.
Modificando el comportamiento del botón Save and Continue (parte 3)3:09
Se añade una nueva funcionalidad al botón Save and Continue localizado en la página Amount Breakdown.
Creando la versión final de la aplicación web3:08
Se crea la versión de producción de la aplicación web usando Webpack.
Probando la aplicación15:02
Se muestra el resultado final; se realiza un pago con PayPal usando la cuenta de cliente en modo sandbox y se verifica la transacción en la cuenta del vendedor.

Requirements

Conocimientos básicos de HTML, CSS y Javascript
Conocimientos básicos sobre APIs

Description

En éste curso se mostrará como configurar y crear una web app con React la cual procesa pagos con PayPal. Es importante conocer como funciona PayPal ya que es una herramienta ideal para añadir procesamiento de pagos a cualquier web app; para procesar pagos con PayPal debemos conocer como manejar su API.

A simple vista la API de PayPal parece muy complicada y creo que la mejor manera de entenderla es creando una web app desde cero; a medida que avanza éste tutorial se explicará cada una de las propiedades del objeto JSON necesario para comunicarnos con PayPal.

El objeto JSON necesario para comunicarnos con la API de PayPal de conoce con el nombre de orden de PayPal; éste objeto tiene muchas propiedades y una estructura compleja; la idea de éste tutorial es entender dichas propiedades mediante la creación de varios formularios el los cuales se introducirán los valores de dichas propiedades y eso ayuda mucho para entender el tema.

Adémas de lo anterior también se muestra como crear una web app con React paso a paso; se cubre como configurar React con Webpack y en general como usar React.

El resultado final será una aplicación web dónde el usuario debe ingresar los detalles de tres productos que se van a comprar; después se debe ingresar la dirección de envío y la persona que recibirá la mercancía; posteriormente el usuario debe detallar todo lo relacionado con el monto final como el costo de envío, monto total, impuestos y otros detalles; finalmente el usuario verá una tabla con detalles sobre la transacción y finalmente se redireccionará al usuario a PayPal para realizar el pago; si la transacción es exitosa entonces se mostrará una página web con un mensaje de confirmación.

Who this course is for:

Desarrolladores con conocimientos básicos de Javascript, HTML y CSS
Desarrolladores con conocimientos básicos de Nodejs

Crea una web app con React y PayPal paso a paso

What you'll learn

Explore related topics

Course content

Configurando React desde cero9 lectures • 56min

Creando la web app con React y PayPal91 lectures • 10hr 19min

Requirements

Description

Who this course is for: