Django How To Build A Subscription App Using Django, HTML,...

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

-

- Advertisment -

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.

Requirements

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

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

 base.html
 

home.html

login.html

register.html

settings.html

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

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

We also have checkout.html where we have integrated JavaScript script from Stripe.com 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 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

Conclusion

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

Erickson Odiaga
Am a full stack developer,indie hacker,educator and a content creator.Check my site ericksonodiaga.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Posts

How To Use Gmail as an Email Client for your Django Web App

Introduction The project looks into how you can use Gmail as an Email Client for your website, this can be...

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

What we are building We are going to build a subscription-based app where users have to create an account, pay...

One Time Password (O.T.P.) Implementation Using Africa’s Talking Short Code API in Django

Introduction This article explores the implementation of One Time Passwords (O.T.P.) when users log into a web app. A randomly...

Google Map API Setup & Geo-Coding with R

A step by step process from Google Map API creation, integration with R and visualization of spatial statistical data
- Advertisement -

Building Application using Node.js HTTPS Module and Africa’s Talking SMS API

Introduction For a long time, HTTP (Hypertext Transfer Protocol) was responsible for communication between a client application and a server...

Building an Exam Enrollment and Grade Notification System using Africa’s Talking SMS Shortcode API in Django

Introduction This article explores the application of SMS shortcodes to create transparency and improve the quality of education in learning...
- Advertisement -

You might also likeRELATED
Recommended to you