Skip to content
README.md 3.96 KiB
Newer Older
Fabrice Salvaire's avatar
Fabrice Salvaire committed
# Proof of Concept Portal
Fabrice Salvaire's avatar
Fabrice Salvaire committed
**Backend Stack**

Fabrice Salvaire's avatar
Fabrice Salvaire committed
```
Backend : [ Nginx HTTP proxy <-> Gunicorn * [Uvicorn ASGI] @ Python 3.7 > FastAPI -> PostgreSQL ]
Fabrice Salvaire's avatar
Fabrice Salvaire committed

Fabrice Salvaire's avatar
Fabrice Salvaire committed
    <--- HTTP JSON XHR / REST API --->

Browser > Web Frontend
```

* [FastAPI](https://fastapi.tiangolo.com) Web Framework to build REST server

 **key features:**
Fabrice Salvaire's avatar
Fabrice Salvaire committed
 - fast and competitive
 - asynchronous I/O event loop using [libuv](https://github.com/libuv/libuv)
Fabrice Salvaire's avatar
Fabrice Salvaire committed
 - support [OpenAPI](https://github.com/OAI/OpenAPI-Specification) / [JSON Schema](http://json-schema.org)
Fabrice Salvaire's avatar
Fabrice Salvaire committed
 - generate automatic interactive documentation
 - load JSON to class object and verify schema
 - support [GraphQL](https://graphql.org)
Fabrice Salvaire's avatar
Fabrice Salvaire committed

* [Starlette](https://github.com/encode/starlette) ASGI framework/toolkit
* [Uvicorn](https://www.uvicorn.org) ASGI server as [Gunicorn](https://gunicorn.org) worker
Fabrice Salvaire's avatar
Fabrice Salvaire committed
* [SqlAlchemy](https://www.sqlalchemy.org) ORM -> [PostgreSQL](https://www.postgresql.org)
Fabrice Salvaire's avatar
Fabrice Salvaire committed
* [MJML](https://mjml.io) Responsive Email Framework

**Checkout Frontend Stack**
Fabrice Salvaire's avatar
Fabrice Salvaire committed

Fabrice Salvaire's avatar
Fabrice Salvaire committed
* [React](https://reactjs.org)
Fabrice Salvaire's avatar
Fabrice Salvaire committed
* [Create React App](https://create-react-app.dev) (using Webpack)
Fabrice Salvaire's avatar
Fabrice Salvaire committed
* Sass stylesheet
Fabrice Salvaire's avatar
Fabrice Salvaire committed
* Nginx HTTP proxy or as a Wordpress Plugin
Fabrice Salvaire's avatar
Fabrice Salvaire committed

Fabrice Salvaire's avatar
Fabrice Salvaire committed
**Checkout Frontend Stack**

* [React](https://reactjs.org) Web Framework
* [React Router](https://reactrouter.com)
* [Redux](https://redux.js.org)
* transpiled and bundled by [Webpack](https://webpack.js.org)
* Sass stylesheet
* Nginx HTTP proxy

Fabrice Salvaire's avatar
Fabrice Salvaire committed
# Screenshots

https://code.electrolab.fr/fabrice/poc-portal/-/tree/master/screenshots

Fabrice Salvaire's avatar
Fabrice Salvaire committed
## OpenAPI Swagger Documentation
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.49.37-fullpage.png "OpenAPI Swagger Documentation")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Create Donation
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.50.06-fullpage.png "Create donation")

Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Frontend Form
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Screenshot_20201026_175042.png "Frontend form")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Stripe Checkout
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.54.01-fullpage.png "Stripe Checkout")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Stripe Payments
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.55.18-fullpage.png "Stripe payments")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Stripe Payment
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.55.29-fullpage.png "Stripe payment")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
## Redirect to Frontend after Stripe Checkout Completed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Screenshot_20201026_175429.png "redirect to Frontend after Stripe checkout completed")
Fabrice Salvaire's avatar
Fabrice Salvaire committed

Fabrice Salvaire's avatar
Fabrice Salvaire committed
## OAuth2 Login in OpenAPI
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.56.52-fullpage.png "OAuth2 login")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
# OAuth2 logged
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.56.57-fullpage.png "OAuth2 bearer")
Fabrice Salvaire's avatar
Fabrice Salvaire committed
# Donations Query
Fabrice Salvaire's avatar
Fabrice Salvaire committed
![](https://code.electrolab.fr/fabrice/poc-portal/-/raw/master/screenshots/Capture%20d%E2%80%99%C3%A9cran%202020-10-26%20%C3%A0%2017.57.12-fullpage.png "Donations query")
Fabrice Salvaire's avatar
Fabrice Salvaire committed

Fabrice Salvaire's avatar
Fabrice Salvaire committed
# Urls

* Backend OpenAPI : http://localtest.me:8000/docs
* Frontend: http://localhost:3000/checkout

Fabrice Salvaire's avatar
Fabrice Salvaire committed
# Stripe Test Card
Fabrice Salvaire's avatar
Fabrice Salvaire committed

| Type               | Issuer    | Payment  | ID                  |
| ------------------ | --------- | -------- | --------------------|
| French Visa        | Stripe.uk | succeeds | 4000 0025 0000 0003 |
| International Visa | Stripe.us | succeeds | 4242 4242 4242 4242 |
| International Visa | Stripe.us | declined | 4000 0025 0000 3155 |

# Stripe Fee Computation

```
P = N + 0.25 + N*f
  = N*(1+f) + 0.25

N = (P - 0.25) / (1 + f)

10*(1+1.4/100) + 0.25 = + 0.39
100                   = + 1.65
500                   = + 7.25
```