Hola comunidad Dev

Mi nombre es Leonardo Alonso y soy desarrollador web desde poco mas de 3 años, y este es mi primer post dentro de Dev.to, mismo que se convertirá en el inicio de una serie de post/tutoriales de como integrar el procesador de pagos de Stripe y al mismo tiempo de como aceptar meses sin intereses dentro de tu sitio web usando Flask (Python) y React.

Preparando nuestro entorno

Cuenta en stripe

Primero que nada necesitaremos crearnos una cuenta en stripe (es gratis 😄 ) una vez tenemos nuestra cuenta y la misma está configurada tendremos acceso a nuestras claves API las cuales vamos a ocupar para comunicarnos con la API de stripe para procesar los pagos.

Entorno virtual e instalación de librerías iniciales

Para la integración estaremos usando Python 3.8 🐍 por lo que usaremos un entorno virtual para no mezclar librerías con otros proyectos que tengamos usando Python.

Empezaremos creando un directorio propio para este proyecto

mkdir stripe
cd stripe

Ya dentro de este directorio crearemos uno más al que llamaremos API el cual será la API que crearemos con Flask y donde realizaremos toda la lógica del procesamiento del pago con stripe

mkdir api
cd api

Ahora si crearemos nuestro entorno virtual, cabe destacar que yo estoy utilizando ubuntu para este tutorial por lo que la instalación de virtualenv será distinta dependiendo del sistema operativo que estemos usando por lo que aquí dejo una (guía)[https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment] de como instalarlo, esta guía está enfocada en Django pero la instalación de virtualenv es la que nos interesa.

Dependiendo de si solo tenemos una versión de Python instalada o varias es como crearemos el entorno virtual.

• Una sola versión de Python

virtualenv env

• Multiples versiones de Python

virtualenv -p python_version env

En mi caso yo tengo múltiples versiones por lo que usare la segunda opción donde mi python 3.8 solo lo llamo como python3

virtualenv -p python3 env

Ahora solo nos queda instalar Flask y la Liberia de stripe utilizando el manejador de paquetes de Python pip

Primero activamos nuestro entorno virtual, nuevamente depende del sistema operativo es como activaremos el entorno virtual aun que realmente solo cambia si estamos usando Windows.

source env/bin/activate

Ya con el entorno virtual activo instalaremos Flask haciendo

pip install Flask

esto nos instalara todas las demás dependencias que necesita Flask para funcionar.

Ya por último instalaremos la Librería de Stripe haciendo

pip install stripe

React

React es uno de los múltiples Frameworks/Librerias de JS para el Frontend y también es uno de los más populares por lo que lo utilizaremos en esta serie para hacer nuestro formulario de pago.

Para instalar React solo necesitamos tener instalado NodeJS y NPM ya con esto instalado, necesitaremos instalar de forma global create-react-app el cual es el paquete recomendado por React para iniciar una aplicación

npm install -g create-react-app

Ya con create-react-app solo tenemos que iniciar nuestra aplicación con

npx create-react-app flask-stripe

Conclusión

Ya con todos estos pasos listos deberíamos tener una estructura de directorios parecida a esta

Ahora si estamos listos para iniciar a desarrollar nuestra aplicación.

Espero esto sea de su utilidad, como lo mencione es la primera vez que escribo en un blog por lo que cualquier comentario para mejorar será bienvenido.

Happy Coding