Meses sin Intereses en Stripe con Python y React parte 1
Tags: python, stripe, flask, react
Published: 2020-11-09 17:46:15

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](http://stripe.com/) (es gratis :smile: ) 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cvaa5jscrf2bidgwld0y.png)

## Entorno virtual e instalación de librerías iniciales

Para la integración estaremos usando Python 3.8 :snake: 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
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a3axkogoeczc3g4gbk62.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ayhj0qhwvcnad6ln2a8t.png)

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