rcmisk

How to Create a Dynamic Pricing Table for Your SaaS Application in Django

How to Create a Dynamic Pricing Table for Your SaaS Application in Django

Discover the step-by-step process to create a dynamic pricing table for your Django-based SaaS application.

rcmisk's photo
rcmisk
·

8 min read

I’m building Ideaverify! Ideaverify will help automate idea validation for #indiehackers! Each user will be able to create a landing page tied to their own subdomain, with all the popular sections of your typical SaaS landing page. One section I thought I’d share in public so others can learn along the way, is how to create a dynamic pricing table for their SaaS, and how to store and retrieve the data in Django.

  1. You can use an existing django project and add the code below to it. Or start from scratch.

  2. If starting from scratch: cd Desktop

  3. Make sure Django is installed. If not pip install Django

  4. Next django-admin startproject landingpage

  5. cd landingpage and the below

  6. pip install virtualenv

  7. python3.8 -m venv env

  8. source env/bin/activate

  9. pip install Django

  10. First let’s add the models in our models.pyfile.

from django.db import models

class PricingDescription(models.Model):
    description = models.CharField(max_length=256)
    order = models.PositiveIntegerField()

    def __str__(self):
        return self.description

    class Meta:
        ordering = ["order", "pk"]


class Pricing(models.Model):
    # payment interval enum
    class Interval(models.IntegerChoices):
        MONTHLY = 1, "MONTHLY"
        YEARLY = 2, "YEARLY"

    # usage type enum
    class Type(models.IntegerChoices):
        RECURRING_PAYMENT = 1, "RecurringPayment"
        ONE_TIME_PAYMENT = 2, "OneTimePayment"

    name = models.CharField(max_length=256)
    descriptions = models.ManyToManyField(
        to=PricingDescription, related_name="pricing_description"
    )
    price = models.PositiveIntegerField()
    interval = models.PositiveSmallIntegerField(
        choices=Interval.choices, null=True, blank=True
    )
    type = models.PositiveSmallIntegerField(
        choices=Type.choices, default=Type.RECURRING_PAYMENT
    )
    order = models.PositiveIntegerField()

    def __str__(self):
        return self.name

    class Meta:
        ordering = ["order", "pk"]

class LandingPage(models.Model):
    primary_hero_title = models.CharField(max_length=256)
    pricing = models.ManyToManyField(to=Pricing, related_name="landingpage_pricing")

    def __str__(self):
        return self.primary_hero_title

These 3 models will allow us to define the pricing data and associate it to a landing page.

Make sure to add folder static_files inside root directory.

Inside static_files add a css folder.

Inside your root directory add a templates directory.

Project structure should look like the below.

Now run python manange.py makemigrations (should see No changes detected if this is a brand new project).

Now run python manage.py migrate .

Now run python manage.py makemigrations landingpage and then python manage.py migrate landingpage

2. Next let’s add some admin tables in our admin.pyso we can add data through the UI.

from django.contrib import admin
from .models import (
    LandingPage,
    Pricing,
    PricingDescription,
)

class LandingPageAdmin(admin.ModelAdmin):
    model = LandingPage
    list_display = (
        "primary_hero_title",
    )


admin.site.register(LandingPage, LandingPageAdmin)

class PricingAdmin(admin.ModelAdmin):
    model = Pricing
    list_display = ("id", "name")

admin.site.register(Pricing, PricingAdmin)

class PricingDescriptionAdmin(admin.ModelAdmin):
    model = PricingDescription
    list_display = ("id", "description")

admin.site.register(PricingDescription, PricingDescriptionAdmin)

3. Now let’s add to our views.py.

from django.shortcuts import render
from .models import LandingPage

def index(request):
    landing_page = LandingPage.objects.all()[0] # assuming you have 1 landing page.
    context = {"landing_page": landing_page}

    return render(request, "index.html", context)

4. Now add an index.html inside your templates folder if not already created with some html code like so.

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>landingpage</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="{% static 'css/landingpage.css' %}" rel="stylesheet"
        type="text/css" />
</head>

<body>
    <section class="rl_section_pricing18">
        <div class="rl-padding-global-2">
            <div class="rl-container-large-2">
                <div class="rl-padding-section-large-2">
                    <div class="rl_pricing18_component">
                        <div class="rl_pricing18_heading-wrapper">
                            <h2 class="rl-heading-style-h2">Pricing plan</h2>
                        </div>
                        <div class="rl_pricing18_spacing-block-3"></div>
                        <div class="rl_pricing18_plans_{{landing_page.pricing.all|length}}">
                            {% for price in landing_page.pricing.all %}
                            <div class="rl_pricing18_plan">
                                <div class="rl_pricing18_plan-content">
                                    <div class="rl_pricing18_plan-content-top">
                                        <div class="rl_pricing18_price-wrapper">
                                            <div class="rl-heading-style-h6">{{price.name}}</div>
                                            <div class="rl_pricing18_spacing-block-4"></div>
                                            <div class="rl-heading-style-h1-2">${{price.price}}<span
                                                    class="rl-heading-style-h4">/{% if price.interval == 1 %}mo
                                                    {% else%}yr{% endif %}</span></div>
                                            <div class="rl_pricing18_spacing-block-4"></div>
                                        </div>
                                        <div class="rl_pricing18_spacing-block-5"></div>
                                        <div class="rl_pricing18_feature-list">
                                            {% for description in price.descriptions.all %}
                                            <div class="rl_pricing18_feature">
                                                <div class="rl_pricing18_icon-wrapper">
                                                    <div class="rl_pricing18_icon w-embed"><svg fill="none"
                                                            height=" 100%" viewbox="0 0 24 24" width=" 100%"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M19.8501 7.25012L9.2501 17.8501C9.15621 17.9448 9.02842 17.998 8.8951 17.998C8.76178 17.998 8.63398 17.9448 8.5401 17.8501L3.1501 12.4601C3.05544 12.3662 3.0022 12.2384 3.0022 12.1051C3.0022 11.9718 3.05544 11.844 3.1501 11.7501L3.8501 11.0501C3.94398 10.9555 4.07178 10.9022 4.2051 10.9022C4.33842 10.9022 4.46621 10.9555 4.5601 11.0501L8.8901 15.3801L18.4401 5.83012C18.6379 5.63833 18.9523 5.63833 19.1501 5.83012L19.8501 6.54012C19.9448 6.634 19.998 6.7618 19.998 6.89512C19.998 7.02844 19.9448 7.15623 19.8501 7.25012Z"
                                                                fill="currentColor"></path>
                                                        </svg></div>
                                                </div>
                                                <div class="rl-text-style-regular-2">{{ description.description }}</div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        <div class="rl_pricing18_spacing-block-6"></div>
                                    </div>
                                    <a class="rl-button-2 w-button" href="#">Get started</a>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

5. Now let’s add some css to landingpage.css inside your static_files/css

.rl-button-2 {
    border: 1px solid black;
    background-color: black;
    color: white;
    text-align: center;
    padding: 0.75rem 1.5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1rem;
}
.rl-text-style-regular-2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.rl-heading-style-h4 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
}

.rl-heading-style-h1-2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.rl-heading-style-h6 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
}
.rl-heading-style-h2 {
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
      Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Fira Sans, Droid Sans,
      sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.rl-padding-section-large-2 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.rl-container-large-2 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.rl-padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

.rl_pricing18_spacing-block-6 {
  width: 100%;
  padding-bottom: 2rem;
}

.rl_pricing18_icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.rl_pricing18_icon-wrapper {
  color: black;
  flex: none;
  align-self: flex-start;
}

.rl_pricing18_feature {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}

.rl_pricing18_feature-list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: grid;
}

.rl_pricing18_spacing-block-5 {
  width: 100%;
  padding-bottom: 2rem;
}

.rl_pricing18_spacing-block-4 {
  width: 100%;
  padding-bottom: 0.5rem;
}

.rl_pricing18_price-wrapper {
  text-align: center;
}

.rl_pricing18_plan-content {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.rl_pricing18_plan {
  border: 1px solid black;
  flex-direction: column;
  padding: 2rem;
  display: flex;
}

.rl_pricing18_plans_3 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.rl_pricing18_plans_2 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.rl_pricing18_spacing-block-3 {
  width: 100%;
  padding-bottom: 5rem;
}

.rl_pricing18_spacing-block-2 {
  width: 100%;
  padding-bottom: 1.5rem;
}

.rl_pricing18_spacing-block-1 {
  width: 100%;
  padding-bottom: 1rem;
}

.rl_pricing18_heading-wrapper {
  text-align: center;
  width: 100%;
  max-width: 48rem;
}

.rl_pricing18_component {
  flex-direction: column;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 991px) {
  .rl-heading-style-h4 {
    font-size: 1.75rem;
  }
  .rl-heading-style-h1-2 {
    font-size: 3.25rem;
  }
  .rl_pricing18_plans_1 {
    grid-template-columns: 1fr;
  }

  .rl_pricing18_spacing-block-3 {
    padding-bottom: 4.5rem;
  }
  .rl-heading-style-h2 {
    font-size: 2.75rem;
  }
  .rl-padding-section-large-2 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .rl-heading-style-h4 {
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .rl-heading-style-h1-2 {
    font-size: 2.5rem;
  }
  .rl-padding-section-large-2 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .rl_pricing18_spacing-block-6,
  .rl_pricing18_spacing-block-5 {
    padding-bottom: 1.5rem;
  }
  .rl_pricing18_plan {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .rl_pricing18_plans_1 {
    grid-template-columns: 1fr;
  }

  .rl_pricing18_spacing-block-3 {
    padding-bottom: 3rem;
  }
  .rl_pricing18_spacing-block-2 {
    padding-bottom: 1.25rem;
  }
  .rl_pricing18_spacing-block-1 {
    padding-bottom: 0.75rem;
  }
  .rl-heading-style-h2 {
    font-size: 2.25rem;
  }
}

6. Now let’s add a urls.py with the below.

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path


from .views import *

urlpatterns = [
    path("admin/", admin.site.urls),
    path("index/", index),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

7. Make sure your settings.py has been set up and added.

import os
from pathlib import Path

#########################################
##  SITE_NAME - change to your own ##
#########################################
SITE_NAME = "Landing page"

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = Path(__file__).resolve().parent.parent
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "your_secret_key"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
#########################################
##  Application Definition ##
#########################################

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "landingpage",
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = "landingpage.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            BASE_DIR,
            "templates/",
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "landingpage.wsgi.application"


#########################################
##  Database ##
#########################################
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

#########################################
##  Password Validation ##
#########################################

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]

#########################################
##  Internationalization ##
#########################################

LANGUAGE_CODE = "en-us"

TIME_ZONE = "America/New_York"

USE_I18N = True

USE_L10N = True

USE_TZ = True

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATIC_URL = BACKEND_URL + "/static/"
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static_files"),
]

8. Now run python manage.py createsuperuser and fill in your username, email, and password to sign in to your Django Admin UI

9. Run python manage.py runserver

10. Go to http://127.0.0.1:8000/admin/

11. Log in with your username and password.

12. Go to http://127.0.0.1:8000/admin/landingpage/pricingdescription/

13. Add a description for Basic, Pro and Premium.

14. Go to http://127.0.0.1:8000/admin/landingpage/pricing/

15. Add 3 Prices with your descriptions. One for Basic, Pro, and Premium.

Your pricing table should have 3 prices now.

16. Now go to http://127.0.0.1:8000/admin/landingpage/landingpage/ and add a landing page.

17. You can now view the dynamic Pricing table by going to http://localhost:8000/index/

That’s it! Hope you enjoyed and found this helpful.

If you liked this tutorial and you enjoy learning about coding, building in public, indiehackers, automation, start ups or entrepreneurship, follow me here:

rcmisk.com

https://twitter.com/rcmisk

https://indiehackers.com/rcmisk

https://dev.to/rcmisk

https://medium.com/@rcmisk

Sign up for my newsletter to keep track of my progress and to learn along the way!

DjangoHTML5SaaSBuild In Public