Integrating Stripe Payments into your React App with a FastAPI Backend - Part 2

Learn to get payments in your full-stack web application.

Photo by Gleb Makarov on Unsplash

In the previous instalment, we discussed setting up the first part — the frontend — of a simple shopping cart that enables Stripe based card payments. 

If you haven’t read it still, access it here: 

In this article, we are going to complete the payment process by building our FastAPI backend which will work in sync with our frontend when evaluating payment intents from Stripe. 

Let’s dive in 👇

Setup up the backend

Make a new directory in your project directory and setup a new python virtual environment. 

I typically utilize Poetry for all of this: 

$ mkdir server && cd server
$ poetry init
$ poetry add fastapi "uvicorn[standard]" stripe python-dotenv

We use fastapi for the server, stripe is the official Python library for constructing payment intents and returning client secrets, and finally, to handle secrets in our app as environment variables, we use python-dotenv. The asynchronous web server is provided by uvicorn. 

Next, we want to store our Stripe secret key in the .env file: