How To Build A Subscription App Using Django,Stripe,Javascript,HTML and CSS

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:

  1. Basic knowledge of Python
  2. Setting up Django environment
  3. Knowledge of the terminal
  4. Installing packages using pip
  5. Basic web knowledge of HTML, CSS and JavaScript
  6. Stripe Account

Technologies To Be Used

  1. Text Editor-Visual Code/Pycharm/Sublime Text
  2. Django 3.6.2
  3. Python 3, pip, and venv installed on your machine
  4. Github account.
  5. Stripe
  6. Browser.

Project SetUp

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: startproject coursehero

So let’s create an app called ‘courses’ by typing the following on the terminal: python startapp courses

Then head over to the app under 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 runserver and head over to the browser to see if Django is installed, Head over to

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 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 migrate

Then lets create the admin of the app by creating a superuser using the following command:python createsuperuser and it will prompt you to enter other details like email, username and password. After entering the details head over to 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 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

So let’s create the authentication part head over to 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

After this step, we will be able to sign up, login and logout of the course app

The Sign Up Page

The login page

Handling Payments, Coupons, Subscriptions and Cancelling Subscriptions

Let’s now add code that allows users to checkout and make payments.

Head over to and add the code below. We have mapped join, checkout and update accounts into our 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

Let’s now update the database by performing Django migrations by typing python makemigrations, python 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

We use the join.html to make sure we have two buttons monthly and yearly. Create join.html under the templates folder.

We also have checkout.html where we have integrated JavaScript script from to handle requests. The JavaScript will be used to load the static files and pass the session id to the checkout. The JavaScript script handles the price of the subscription, the email of the user, the type of plan the user has subscribed to and the type of coupon/offer that has been applied to the price.

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 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 .

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 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

Quick Guide

If you want to run this project on your machine or your local environment do the following:

1. Clone the repo

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 makemigrations
    • python migrate

7.Run the server:

    • python runserver

8.Navigate to the site:

9.Follow the instructions and start using the site

You May Also Like
Read More

APIs: The Web’s Legos

Over the past two years interacting with developers and businesses, one question found its way whenever conversations begin;…