Using Stripe to set up payment handling yourself can seem like a daunting task. While Stripes documentation is incredibly useful, it can be confusing at times. In this demonstration I'll show you how I set it up in one of my projects. From getting the payments to go through to stripe, and receiving the information from the payment to update your database.
First you'll want to go to Stripe's website and setup an account. Then install Stripe with pip install stripe. In this example I'm using Flask for the backend and React for the frontend. The website is an e-commerce page for buying and selling skateboards. Now create some models for the product to sell and the receipts then run flask db init, flask db migrate, and flask db upgrade to create the database. My models look like so:
Now that we have a database go back to your Stripe dashboard and click on developers. A tab for API keys will show click that and get your test key.
Since this project was being tracked by github I have my test key stored as an environment variable in a separate .env file. You can either do the same or replace environ.get('STRIPE_API_TEST_KEY') with your key in quotes. Now there isn't a lot of stuff we have to do on the front end so figure out what button you want to use to redirect the user to the stripe checkout page. Then create a post request to whatever route you're using to create the checkout session like so:
Mine is the one on line 23. Now that you have a way to redirect the user on the frontend, you can either create the products manually in the Stripe dashboard or use the following function to create them on Stripe and in your database.
You can disregard the get method (lines 147-149). What's happening here is whenever the user creates a new deck to sell lines 160-170 is actually creating the products in your Stripe dashboard as well as adding the product id's and price id's to our database because we will need them later.
Here we defined a route for the session, and got the product from our database. Now that we have said product we can use the price id stripe provides to determined the amount the user will be charged. We also specified the client_reference_id so when we get the information back we'll know which user made the purchase. You can add a lot here from custom fields to shipping addresses, but for the purposes of this example we won't be needing all the extra fields. Now you'll need to setup a webhook to retrieve the data from stripe after the transaction. I used Ngrok, you can use any service you like. Stripe even offers its own CLI you can use, but I prefer ngrok. If you go with ngrok you'll need to create an account and download ngrok. Once you've done that unzip the file. Sometimes you'll run into issues if it isn't set as a windows environment variable. To set it as such copy the path for the ngrok application. Then in the windows search bar search edit environment variables. You should see something like this:
From here click environment variables and then under system variables click on Path. Then click edit. Now click on New and paste in the path do the ngrok application. You can now close the window and open up your terminal. If you actually set the path to a variable enter that variable name otherwise paste the path back in and type http 5000. Or whatever port you plan on running your server on. You should have something like this:
Copy the link after Forwarding and head back over to your Stripe dashboard. From the developers tab you should find a tab for webhooks. Once there click on add endpoint. Then paste the link from the terminal into endpoint URL and add /webhook to the end. Now click on select events then checkout. Now toggle the event called checkout.session.completed, and select add endpoint. Now click on the endpoint you just created; under signing secret click reveal and copy the key.
Same as before my key is stored as an environment variable, but you can just paste it in here as a string. Now we'll write the method to use the webhook.
The only really important thing here is lines 67-75. This is where we retrieve the event object and add the relevant information to the receipts table. You can get a lot of information back from this depending on what you specify when you initially create the checkout session. Now you can test it out and see how it all works! Stripe provides you with a test card number you can use for the transactions so you don't unload your bank account trying to test an app. Feel free to leave any questions in the comments I'll be sure to get back to you, and checkout the repo used in the examples here!
Top comments (0)