Bueno, esto debío ser un video ._. …
¡Bienvenida! Este es un curso especial de React Hooks
¿Qué aprenderás en el Curso Profesional de React Hooks?
¿Qué son los React Hooks y cómo cambian el desarrollo con React?
Introducción a React Hooks
useState: estado en componentes creados como funciones
useEffect: olvida el ciclo de vida, ahora piensa en efectos
useContext: la fusión de React Hooks y React Context
useReducer: como useState, pero más escalable
¿Qué es memoization? Programación funcional en JavaScript
useMemo: evita cálculos innecesarios en componentes
useRef: manejo profesional de inputs y formularios
useCallback: evita cálculos innecesarios en funciones
Optimización de componentes en React con React.memo
Custom hooks: abstracción en la lógica de tus componentes
Third Party Custom Hooks de Redux y React Router
Configura un entorno de desarrollo profesional
Proyecto: análisis y retos de Platzi Conf Store
Instalación de Webpack y Babel: presets, plugins y loaders
Configuración de Webpack 5 y webpack-dev-server
Configuración de Webpack 5 con loaders y estilos
Loaders de Webpack para Preprocesadores CSS
Flujo de desarrollo seguro y consistente con ESLint y Prettier
Git Hooks con Husky
Estructura y creación de componentes para Platzi Conf Store
Arquitectura de vistas y componentes con React Router DOM
Maquetación y estilos del home
Maquetación y estilos de la lista de productos
Maquetación y estilos del formulario de checkout
Maquetación y estilos de la información del usuario
Maquetación y estilos del flujo de pago
Integración de íconos y conexión con React Router
Integración de React Hooks en Platzi Conf Merch
Creando nuestro primer custom hook
Implementando useContext en Platzi Conf Merch
useContext en la página de checkout
useRef en la página de checkout
Integrando third party custom hooks en Platzi Conf Merch
Configura mapas y pagos con PayPal y Google Maps
Paso a paso para conectar tu aplicación con la API de PayPal
Integración de pagos con la API de PayPal
Completando la integración de pagos con la API de PayPal
Paso a paso para conectar tu aplicación con la API de Google Maps
Integración de Google Maps en el mapa de checkout
Creando un Custom Hook para Google Maps
Estrategias de deployment profesional
Continuous integration y continuous delivery con GitHub Actions
Compra del dominio y despliega con Cloudflare
Optimización de aplicaciones web con React
Integración de React Helmet para mejorar el SEO con meta etiquetas
Análisis de performance con Google Lighthouse
Convierte tu aplicación de React en PWA
Bonus: trabaja con Strapi CMS para crear tu propia API
Crea una API con Strapi CMS y consúmela con React.js
¿Qué sigue en tu carrera profesional?
Próximos pasos para especializarte en frontend
Paso a paso para conectar tu aplicación con la API de PayPal
33/45Lectura
Para utilizar la API de PayPal para integrar pagos es necesario darse de alta en PayPal Developer. En este sitio podrás encontrar todos los recursos necesarios para empezar a integrar pagos en tus páginas web y en nuestro proyecto Platzi Conf Merch.
Una vez que te has registrado es necesario seguir los siguientes pasos para crear tu token de desarrollo y poderlo integrar en este proyecto.
Crear “Sandbox Access Token”:
Dentro de tu cuenta como desarrollador debes dirigirte al apartado “My Apps & Credentials” y en la parte inferior encontrarás el apartado “Express Checkout via Braintree SDK - Sandbox Accounts” donde crearemos nuestro token para la aplicación.
Elegimos el tipo de cuenta que vamos a utilizar (Personal/Business).
Ahora que tenemos nuestro token generado debemos de revisar a detalle la expiración, así como el manejo de divisas que vamos a utilizar.
Si no encuentras tu divisa, selecciona “United States Dollar” que sería la divisa por defecto.
Si queremos revisar, actualizar el token o hacer algún cambio podemos regresar a la sección “My Apps & Credentials” para ver los detalles de tu cuenta.
IMPORTANTE: para efectos de pruebas es necesario tener tu token válido en modo “Sandbox”. Si quieres habilitar tu token para tu proyecto en producción solo debes de seguir los mismos pasos pero eligiendo la opción de “Live” y creando una nueva App.
Crear una app en PayPal para recibir pagos:
Para habilitar PayPal como un método de pago válido y recibir transacciones en tu proyecto en producción debemos crear una aplicación a la cual estará ligado nuestro token.
Una vez creado este token ligado a tu cuenta principal podrás elegir las características a las cuales podemos acceder, seleccionamos todas y le damos “save”.
Es necesario especificar una URL de retorno cuando la transacción ha sido exitosa, es parte de los requerimientos para este proyecto. Ahora que tienes todos los requisitos tienes tu API token listo para producción.
Ver mis traslaciones:
En el apartado de “Sandbox” podrás ver las cuentas creadas, notificaciones, los llamados a la API, el simulador entre otras herramientas que te ayudarán a darle seguimiento a tus pruebas de integración con PayPal.
Para revisar tus llamados y eventos en tu API de producción solo debes de dirigirte al apartado “Live” donde encontrarás la información que estás solicitando para ver qué está pasando con cada evento ocurrido.
Recomendación
No olvides pasarte por la documentación para que puedas entender cada particularidad que te ofrece PayPal. Solo estamos utilizando uno de los recursos que nos provee, pero te invito a explorar a detalle la documentación y encontrar nuevas herramientas que se puedan incluir en este proyecto.
Cuéntame en la sección de comentarios si tienes ideas y qué mejoras podrían suponer en Platzi Conf Merch.
Aportes 28
Preguntas 2
Ordenar por:
Recuerden que hay un curso de pagos con paypal https://platzi.com/clases/pagos-online/
Estaría cool agregar tres tipos de subscripciones:
- Conf: Una subscripción para recibir un kit cada que haya una Platzi conf
- Christmas: Una subscripción para recibir un kit en navidad
- Birthday: Una subscripción para recibir un kit en tu cumpleaños
PD: Esta muy soñador pero ojala Platzi lo implemente de verdad 💚
Logré todos los pasos, pero hubiera sido mejor un video mostrando los pasos a seguir.
un paso tan importante y lo va a poner por escrito? 😒
Acá entran con sus cuentas de Paypal o crean una y hacen el paso a paso: https://developer.paypal.com/ 😄
Para quienes no les permite crear las credenciales de Braintree SDK Credentials, no se desanimen, más arriba de Braintree, en REST API apps pueden crear una app la cual les entregará un client id que pueden usar para el curso.
Para crearla deben haber generado previamente una cuenta de sandbox, en el menú Sandbox -> Account.
Si alguno no sabe como poner la URL de retorno, esta me funciono a mi: localhost:3005/checkout/success pero en vez de usar localhost como tal, usa 127.0.0.1
Buenas!
Comparto un video donde explican con bastante claridad y simplicidad lo que para mí ésta clase no lo logra:
https://www.youtube.com/watch?v=tJgBeaG5Z1s
Saludos!!!
No entendí ni medio
Si siguen este tutorial van a encontrar el clientId que les solicita el componente PayPalButton: https://developer.paypal.com/docs/get-started/
no tengo la opcion de crear el token de sanbox, creo que es porque estoy en bolivia
Quise integrar Mercado Pago en lugar de PayPal porque hay más personas que lo usan donde estoy, pero resulta que, por ahora, sí o sí necesito un back node Express 😦😦😦 … así que curso de Express ahí voyyyy
Si, no me importa lo que digan, esto debió ser un video explicativo, o mejor no usarlo. Ver el curso, 2 a 3 h, configurar paypal, 1 semana. Literal, si a alguien le fue mejor solo con esas dos imágenes pues felicidades, a mi no.
Creo que esta clase debio de ser un video explicativo ciertamente, con la documentacion que nos da esta clase y con la documentacion que nos da el mismo paypal pude completar lo que dice esta clase pero aun no se si funciona ni como funciona. En la parte que me pide un linmk de retorno para terminar de configurar mi cuenta puse mi github pero entiendo que deberia ser el link del negocio que estemos haciendo. Aqui esta el link de paypal developer con los pasos a seguir: https://developer.paypal.com/developer/applications
Empezó lo bueno
Un video donde lo explican mejor https://www.youtube.com/watch?v=tJgBeaG5Z1s
para obtener el clienId:
https://www.youtube.com/watch?v=-ySbW9Ozm70
Recuerden que hay un curso de pagos con paypal https://platzi.com/clases/pagos-online/
Confirmo, debio ser un video para un paso a paso más rapido.
Lo logre con la documentación
https://developer.paypal.com/docs/get-started/#1-create-a-paypal-account
no es que si diga que bruto que bien que le entendí pero ahí se va.
no en todos los paises de latino america esta habilitado paypal, seria interesante si tienen algun curso para integrar una mas global
Para entender mejor esta clase, recomiendo hacer el Curso de Pagos Online con Paypal es muy corto y es práctico.
Ojalá saquen un curso intengrando pagos con Visa o Mastercar que es lo más común…
Aqui encuentran Express Checkout via Braintree SDK - Sandbox Accounts
Cúal es la URL de retorno que debo registrar ?
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.