What we are building
We are going to build a subscription-based app where users have to create an account, pay for services, cancel the subscription. You will learn how to integrate Stripe into your app for payments and how to turn your content into a SAAS platform.
For this tutorial you will need:
- Basic knowledge of Python
- Setting up Django environment
- Knowledge of the terminal
- Installing packages using pip
- Stripe Account
- Heroku Account
1.Create a virtual environment by typing the following on your terminal: pip install virtualenv
2.Activate the virtual environment: In windows, type “
venv\Scripts\activate” in the terminal and in Mac/Linux, type ”
source venv/bin/activate” in the terminal.
3.Lets now create a new directory of our project and name it ‘coursehero’:in windows cd coursehero and in Linux $ mkdir coursehero
4.Let us now install Django: pip install django
5.Let us start the project by typing: django-admin.py startproject coursehero
So let’s create an app called ‘courses’ by typing the following on the terminal: python manage.py startapp courses
Then head over to the app under settings.py and add the app in the INSTALLED APPS :
6. Let’s install the stripe package which will be used to handle payments in the app by typing pip install stripe on the terminal.
7.On the terminal type python manage.py runserver and head over to the browser to see if Django is installed, Head over to http://127.0.0.1:8000/
8.While in the terminal type Ctrl+C to stop the server. The whole project now from now on will be performed inside this python activated environment
Setting Up of Stripe Account.
If you don’t have an account head over to stripe.com and create and if you have one just log in. After creating your account and login and turn the test data on so that you don’t use your real credit card but instead use the 4242424242424242 as provided by Stripe for testing.
Now let’s create products we will be selling on the platform. Head over to products, then click on add product, you will get the following dialog box
After creating the product remember to set it to monthly and on recurring basis. This is the billing method we are going to use in this app but you can also set yours according to the need of your product. After creating the first product save it and add another product and set it to yearly. You will end up with two products like this:
After creating our products our app will consists of offers especially during holidays or to new students who are registering. So we shall to Products>Coupons then click on add new and choose how you prefer to offer discounts either as a percentage of the total price or at a certain price of the total price. In my project, I created two coupons, one Christmas which is 31% of the total cost and welcome which is 10% of the total cost.
After setting up let us dive int the coding part of the project
Adding Authentication To The Project
Django authentication is the where we handle the signing up,login and the logout of the app.
Lets prepare and set up our database by typing the following command on terminal: python manage.py migrate
Then lets create the admin of the app by creating a superuser using the following command:python manage.py createsuperuser and it will prompt you to enter other details like email, username and password. After entering the details head over to http://127.0.0.1:8000/admin and log in you will get a result like this:
Let’s create a signup form by creating a new file under the course app named forms.py and paste the following code:
Now let’s code that tells how the pages will be loading. This will be achieved by adding the following code to views.py
So let’s create the authentication part head over to urls.py and add the following code
Now lets now incorporate the HTML files that will serve the forms.Let’s create them under the app templates folder:
register. html-This displays the register part
login.html -This displays the login part
settings.html-It displays the settings of our app.
base.html-This is the page that contains HTML code that will be common or will be used on all templates
home.html-This is the home page to displayed
To make sure the signup and login works with other pages efficiently add the following code to settings.py
After this step, we will be able to sign up, login and logout of the course app
Handling Payments, Coupons, Subscriptions and Cancelling Subscriptions
Let’s now add code that allows users to checkout and make payments.
Head over to url.py and add the code below. We have mapped join, checkout and update accounts into our url.py to handle payments with stripe.
Let’s now create a model where we can store customers details like subscriptions, stripe id’s e.t.c.Add the following code to models.py
Let’s now update the database by performing Django migrations by typing python manage.py makemigrations, python manage.py migrate to apply changes in the database.
Now let’s look at the checkout. During the checkout, the user is prompted with two options either monthly or yearly. At this part of the app we will have to import stripe and also copy the publishable key and secret key into our project so as to make API calls with stripe.From stripe we will copy the publishable key and secret key,and also copy the API ID of our two products.
We shall also include two coupons the welcome and the Christmas offer which is expressed as an int out of 100%.
Copy the following code into views.py
We use the join.html to make sure we have two buttons monthly and yearly. Create join.html under the templates folder.
The setting class will be for customers who want to cancel their subscription due to one or two reasons and this works with the class. This page is only accessible to those with subscription and for logged users only. It uses POST request to cancel the subscription and GET request for collecting the information.
The settings.html is responsible for this. When a user cancels the membership the template displays the message to the user that his/her subscription is active until the end of the billing cycle.
We also have pricing.css under the static file to design the pricing part of the checkout. It displays the UI of the credit card on the pricing part.
The update class in views.py will be mainly for superusers we created earlier in the project. The main role of this class will be to enable the admin to cancel subscription from his/her end. This is done by a decorator(users_passes_test) that checks if the logged-in user is the admin. If it is True the admin goes ahead and access the page.
This is where the admin checks the databases and checks the subscription status, credit cards expiry, a place to activate and deactivate the accounts of the customers.
Now let’s head over to our browser and check http://127.0.0.1:8000/ .
Now let’s create an account and purchase one of the plans using the default 4242424242424242 credit card and future dates.
First let’s choose a plan
Choose one of the plans
Apply one of the promocodes
Pay with test cards
Head over to Stripe.com to check subscribed users in the customers’ panel
To cancel the subscription, head over to the settings of the app and cancel it
The app gives the users the ability to sell any product on a subscription per pay and this can enable anyone create a SASS platform from the products or services they are offering. You can improve the app further by providing email verification during registration, the ability of the admin to add and delete courses, ability to reset password and so on.
You can clone the repo here: Github
If you want to run this project on your machine or your local environment do the following:
1. Clone the repo https://github.com/Ericksonodiaga/subscriptionapp
2.Create a directory called Coursehero:
- cd coursehero on windows
- $ mkdir coursehero
3.Create a venv: python3 -m venv venv
4.Activate the virtual enviroment:
- Mac/Linux: source venv/bin/activate
- Windows: venv\Scripts\activate
5.Install the requirements:
- pip django -to install django
- pip stripe -to install stripe
6.Create Database and apply changes
- python manage.py makemigrations
- python manage.py migrate
7.Run the server:
- python manage.py runserver
8.Navigate to the site: http://127.0.0.1:8000
9.Follow the instructions and start using the site