# Pay traffic fines, settle municipal accounts and purchase prepaid electricity

> Markdown mirror of DialtoneApp's public top-site detail page for `paycity.co.za`.

URL: https://dialtoneapp.com/top-sites/paycity.co.za/index.md
Canonical HTML: https://dialtoneapp.com/top-sites/paycity.co.za

## Summary

- Domain: `paycity.co.za`
- Website: https://paycity.co.za
- Description: ai readable | score 27 | purchase read only
- Label: ai_readable
- Payment surface: Not available
- Purchase boundary: read_only
- Control boundary: unknown
- Rank: 395746

## robots

Not found.

## llms

~~~text
<!--ENTRY POINT FOR ANGULARJS APP-->


<input name="__RequestVerificationToken" type="hidden" value="V7als2dazHe1hKLHCz8I-WxWsLG7rcI6EjdNw6WOBexyTkQGxnjpHD_UrG_g4wEAZ1LueCAFr1SIwUgWHoR3vP6GWoyXEEJob1kLz0YVamM1" />

<!DOCTYPE html>
<html lang="en" data-ng-controller="mainCtrl">
<head>
    <!-- Title -->
    <title>Pay traffic fines, settle municipal accounts and purchase prepaid electricity</title>
    <base href="/" />
    <!-- Required Meta Tags Always Come First -->

    <meta charset="utf-8" />
    <meta name="description" content="payCity allows you to view and pay your traffic fines, renew your car licence online, settle your municipal accounts, buy prepaid utilities" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="wl-pc" content="AE7837ED-7DA2-488C-8B2F-502A3441AA80" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="../../favicon.ico" />
    <!-- Google Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik" />

    <link href="/bundles/compulsoryStyles?v=NE22WXoSxr0-vCBjO28kMNxfziaxgIoOu1RM-BYiZgk1" rel="stylesheet"/>

    <link href="/bundles/themeIconStyles?v=bQ5iRzyMOvGFB7z8eQoAA_IhcaFPeOH74ExJe0ipnmQ1" rel="stylesheet"/>

    <link href="/bundles/themeStyles?v=8WP0UDd3vNWmtbm3FtbpvD3acOSKRWs-5bz3kRH1h1g1" rel="stylesheet"/>

    <link href="/bundles/customStyles?v=4TsMbLpxPUa3E4LhfVUTC6bIXEsK2LZN0bQ8GZmDSI41" rel="stylesheet"/>

</head>

<body ng-cloak>
    <toast></toast>
    <main lang="en">
        


<header id="js-header" class="u-header u-header--sticky-top">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-pt-10">
    <nav class="js-mega-menu navbar navbar-expand-lg hs-menu-initialized hs-menu-horizontal">
      <div class="container-fluid"> <a href="/" class="navbar-brand"> <img src="../Content/images/Logo.svg"
            alt="payCity Logo" class="header-site-logo"> </a>
        <div class="nav-item g-mx-10 d-block d-lg-none" ng-if="isUserLoggedIn"> <basket-button></basket-button> </div>
        <button ng-if="!$route.current.isAuthenticated && IsMobile && !isUserLoggedIn" ng-click="navigateToStore()"
          class="btn u-btn-primary g-min-width-110 pcc-btn pcc-btn-header">Get App</button> <button
          class="navbar-toggler navbar-toggler-right btn g-brd-none g-pa-0" type="button" aria-label="Toggle navigation"
          aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar"> <span
            class="hamburger hamburger--slider"> <span class="hamburger-box"> <span class="hamburger-inner"></span>
            </span> </span> </button>
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg g-mr-40--lg" id="navBar">
          <ul class="navbar-nav text-uppercase g-pos-rel g-font-weight-600 ml-auto"> <!-- Home -->
            <li ng-show="LiRegister" ng-if="!isUserLoggedIn && ($route.current.activeTab != 'register')"
              class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="Register" class="nav-link g-py-9 g-px-0">Register</a>
            </li>
            <li ng-show="LiLogin" ng-if="!isUserLoggedIn && ($route.current.activeTab != 'login')"
              class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="Login" class="nav-link g-py-9 g-px-0">Login</a> </li>
            <li ng-show="LiOurServices" ng-if="!isUserLoggedIn" class="nav-item  g-mx-10--lg g-mx-15--xl"> <a
                href="/OurServices" class="nav-link g-py-9 g-px-0">Our Services</a> </li>
            <li ng-if="isUserLoggedIn" class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="/MyServices"
                class="nav-link g-py-9 g-px-0">My Services</a> </li> <!-- End Home --> <!-- Quick Lookup -->
            <li class="nav-item hs-has-sub-menu  g-mx-10--lg g-mx-15--xl" data-animation-in="fadeIn"
              data-animation-out="fadeOut"> <a id="nav-link--lookup" class="nav-link g-py-9 g-px-0" href="#!"
                aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu--lookup">Quick Lookup</a>
              <ul
                class="hs-sub-menu list-unstyled u-shadow-v11 g-brd-top g-brd-primary g-brd-top-2 g-min-width-220 g-mt-18 g-mt-8--lg--scrolling"
                id="nav-submenu--lookup" aria-labelledby="nav-link--services">
                <li class="dropdown-item "> <a class="nav-link" href="NoticeSearch">Notice Number Search</a> </li>
                <li ng-if="!isUserLoggedIn" class="dropdown-item "> <a class="nav-link" href="IdSearch">ID Number
                    Search</a></li>
                <li class="dropdown-item "> <a class="nav-link" href="MeterSearch">Is my meter supported</a> </li>
              </ul>
            </li>
            <li ng-if="!isUserLoggedIn && ($route.current.activeTab != 'login')"
              class="nav-item d-none d-lg-block g-mx-10--lg g-mx-15--xl"> <a
                class="btn u-btn-outline-black g-min-width-110 pcc-btn pcc-btn-header" href="Login">Login</a> </li>
            <li ng-if="!isUserLoggedIn" class="nav-item d-none d-lg-block g-mx-10--lg g-mx-15--xl"> <a
                class="btn u-btn-primary g-min-width-110 pcc-btn pcc-btn-header" href="Register">Register</a> </li>
            <li class="nav-item g-mx-10 d-none d-lg-block" ng-if="isUserLoggedIn"> <basket-button></basket-button> </li>
            <li class="nav-item hs-has-sub-menu g-mx-10--lg g-mx-15--xl" data-animation-in="fadeIn"
              data-animation-out="fadeOut" ng-if="isUserLoggedIn"> <a id="nav-link--profile"
                class="nav-link g-py-0 g-px-0" href="#!" aria-haspopup="true" aria-expanded="false"
                aria-controls="nav-submenu--profile"> <span class="g-pos-rel"> <img
                    class="g-width-40 g-width-50--md g-height-40 g-height-50--md rounded-circle g-mr-10--sm"
                    src="../Content/images/placeholder.png" alt="Image description"> </span> <span
                  class="g-pos-rel g-top-2"> <span>{{user.Fullname}}</span> </span> </a>
              <ul
                class="hs-sub-menu list-unstyled u-shadow-v11 g-brd-top g-brd-primary g-brd-top-2 g-min-width-220 g-mt-18 g-mt-8--lg--scrolling pcc-profile-xs-max-height"
                id="nav-submenu--profile" aria-labelledby="nav-link--services">
                <li class="dropdown-item "> <a class="nav-link" href="/MyServices/TrafficFines">My Traffic Fines</a>
                </li>
                <li class="dropdown-item" style="cursor: pointer;" ng-hide="user.IsLDRRole == null || user.IsLDRRole == false"> <a class="nav-link"
                  ng-click="onLDRClick(featureSettings.LDR.Version === 1 ? '/ManageAccount/ManageServices' : '/LDRV2')">
                  {{ featureSettings.LDR.Title }} </a> </li>
                <li style="display: none;" class="dropdown-item "> <a class="nav-link"
                    href="/MyServices/MunicipalAccounts">My Municipal Accounts</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/MyServices/PrepaidUtilities">My Prepaid
                    Utilities</a> </li>
                <!-- <li class="dropdown-item "> <a class="nav-link" href="/Subscriptions">Subscription</a>                                  </li> -->
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/Profile">Personal Details</a> </li>
                <li class="dropdown-item"> <a class="nav-link" href="/ManageAccount/ManageServices"> {{ user.IsLDRRole
                    == true ? 'My Entities & Vehicles' : 'Entities' }} </a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/NotificationSettings">Notification
                    Settings</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/NotificationHistory">Notification
                    History</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/TransactionHistory">Payments and
                    Credits</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="javascript:void(0)"
                    ng-click="onLogoutClick()">Logout</a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div style="color:white">  </div>
  </div>
</header>

        <div class="starting-view" id="Loader">
            <h1>Loading ...</h1>
        </div>

        <div class="site-view-container" autoscroll="true" ng-view="" onload="onNgViewLoad()">
        </div>

        


<div id="contacts-section" class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 g-mb-40 g-mb-0--lg">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Media</h2>
                </div>
                <article>
                    <div class="row">
                        <div class="col-1"> <a href="https://twitter.com/paycity" target="_blank"
                                class="g-color-white-opacity-0_5 g-color-white--hover"> <i class="fa fa-twitter"></i>
                            </a> </div>
                        <div class="col-10">
                            <h3 class="h6 g-mb-2"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    target="_blank" href="https://twitter.com/paycity">Follow us on X</a> </h3>
                        </div>
                    </div>
                </article>
                <hr class="g-brd-white-opacity-0_1 g-my-10">
                <article>
                    <div class="row">
                        <div class="col-1"> <a href="https://www.facebook.com/payCity/" target="_blank"
                                class="g-color-white-opacity-0_5 g-color-white--hover"> <i class="fa fa-facebook"></i>
                            </a> </div>
                        <div class="col-10">
                            <h3 class="h6 g-mb-2"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    target="_blank" href="https://www.facebook.com/payCity/">Like us on Facebook</a>
                            </h3>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-lg-4 col-md-4 g-mb-40 g-mb-0--lg">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Useful Links</h2>
                </div>
                <nav class="text-uppercase1">
                    <ul class="list-unstyled g-mt-minus-10 mb-0">
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/AboutUs">About Us</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/OurServices">Our Services</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/FAQs">Frequently Asked Questions</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Our Contacts</h2>
                </div>
                <address class="g-bg-no-repeat g-font-size-12 mb-0"
                    style="background-image: url(../../Content/unifyTheme/html/assets/img/maps/map2.png);">
                    <div class="d-flex g-mb-20 align-items-center">
                        <div class="g-mr-10"> <span
                                class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-color-white-opacity-0_6"> <i
                                    class="fa fa-phone"></i> </span> </div>
                        <p class="mb-0">(+27) 087 237 7011</p>
                    </div>
                    <div class="d-flex g-mb-20 align-items-center">
                        <div class="g-mr-10"> <a
                                class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-color-white-opacity-0_6"
                                href="mailto:team@paycity.co.za"> <i class="fa fa-envelope"></i> </a> </div>
                        <p class="mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="mailto:team@paycity.co.za">team@paycity.co.za</a> </p>
                    </div>
                </address>
            </div>
        </div>
    </div>
</div>
<footer class="g-bg-gray-dark-v1 g-color-white-opacity-0_8 g-py-20">
    <div class="container">
        <div class="row">
            <div class="col-md-8 text-center text-md-left g-mb-10 g-mb-0--md">
                <div class="d-lg-flex"> <small class="d-block g-font-size-default g-mr-10 g-mb-10 g-mb-0--md">All
                        Content Copyright Syntell (Pty.) Ltd.</small>
                    <ul class="u-list-inline">
                        <li class="list-inline-item"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="TermsAndConditions">Terms and Conditions</a> </li>
                        <li class="list-inline-item"> <span>|</span> </li>
                        <li class="list-inline-item"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="@Url.Content(" /Content/pdf/Syntell_PAIA_Manual.pdf")" target="_blank">PAIA
                                Document</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer> <a class="js-go-to u-go-to-v1 animated js-animation-was-fired zoomIn" href="#!" data-type="fixed"
    data-position="{       &quot;bottom&quot;: 15,       &quot;right&quot;: 15     }" data-offset-top="400"
    data-compensation="#js-header" data-show-effect="zoomIn"
    style="display: inline-block; position: fixed; bottom: 15px; right: 15px;"> <i
        class="hs-icon hs-icon-arrow-top"></i> </a>
    </main>
    <!--Scripts-->
    <script src="/bundles/compulsoryScripts?v=N5aJXoq8N7SOH0FXyGmTti4nnhQ0LLgp_2osKxdjUNQ1"></script>

    <script src="/bundles/themeScripts?v=GKJhmK28547za0X2_isFSyE84kUlf9QuIA18ml2i9-s1"></script>

    <script src="/bundles/customScripts?v=D6SGwSsDsHH-eRZPd3aZIOKHZlwEzv_76c7ZtXYa4b01"></script>

    <script src="/bundles/vendorScripts?v=ZJm1lcsnghhufleFSgdiWEzItBWNPO3GlxSCSs2Nxzo1"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
    <script src="/bundles/appScripts?v=RL4SBWVJqu-m96_71DjOmh-FX4ZsGtIvYY21incr5ag1"></script>


    
    <script>
        $(document).on('ready', function () {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf('MSIE ');
            var trident = ua.indexOf('Trident/');
            var edge = ua.indexOf('Edge/');

            if (trident > 0 || msie > 0 || edge > 0) {
                window.location.href = "/UnsupportedBrowsers.html";
            }

            //<a href="~/Views/Browsers/UnsupportedBrowsers.html">~/Views/Browsers/UnsupportedBrowsers.html</a>
            // initialization of tabs
            $.HSCore.components.HSTabs.init('[role="tablist"]');

            // initialization of header height offset
            $.HSCore.helpers.HSHeightCalc.init();


            // initialization of scroll animation
            $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');

            // initialization of counters
            var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');

            // initialization of chart pies with rtl option
            var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
                rtl: true
            });

            // initialization of rating
            $.HSCore.components.HSRating.init($('.js-rating'), {
                spacing: 4
            });

            // initialization of popups with media
            $.HSCore.components.HSPopup.init('.js-fancybox-media', {
                helpers: {
                    media: {},
                    overlay: {
                        css: {
                            'background': 'rgba(255, 255, 255, .8)'
                        }
                    }
                }
            });

            // initialization of text animation (typing)
            $(".u-text-animation.u-text-animation--typing").typed({
                strings: [
                    "awesome template",
                    "perfect template",
                    "just like a boss"
                ],
                typeSpeed: 60,
                loop: true,
                backDelay: 1500
            });

            // initialization of go to
            $.HSCore.components.HSGoTo.init('.js-go-to');
        });

        $(window).on('load', function () {
            // initialization of header
            $.HSCore.components.HSHeader.init($('#js-header'));
            $.HSCore.helpers.HSHamburgers.init('.hamburger');

            // initialization of HSMegaMenu component
            $('.js-mega-menu').HSMegaMenu({
                event: 'hover',
                pageContainer: $('.container'),
                breakpoint: 991
            });
        });

        $(window).on('resize', function () {
            setTimeout(function () {
                $.HSCore.components.HSTabs.init('[role="tablist"]');
            }, 200);
        });
    </script>
</body>
</html>
~~~

## llms-full

~~~text
<!--ENTRY POINT FOR ANGULARJS APP-->


<input name="__RequestVerificationToken" type="hidden" value="ceN4AvcRbR8URJyLiTUtkEIiHymAW9KU2ks18kdS4m8KkQipW8uPAp4Ly7LTpoF7P4Hea04fuC3R3Nc4ushtuc05jmXW6ICjcdxMLfIL18g1" />

<!DOCTYPE html>
<html lang="en" data-ng-controller="mainCtrl">
<head>
    <!-- Title -->
    <title>Pay traffic fines, settle municipal accounts and purchase prepaid electricity</title>
    <base href="/" />
    <!-- Required Meta Tags Always Come First -->

    <meta charset="utf-8" />
    <meta name="description" content="payCity allows you to view and pay your traffic fines, renew your car licence online, settle your municipal accounts, buy prepaid utilities" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="wl-pc" content="AE7837ED-7DA2-488C-8B2F-502A3441AA80" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="../../favicon.ico" />
    <!-- Google Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik" />

    <link href="/bundles/compulsoryStyles?v=NE22WXoSxr0-vCBjO28kMNxfziaxgIoOu1RM-BYiZgk1" rel="stylesheet"/>

    <link href="/bundles/themeIconStyles?v=bQ5iRzyMOvGFB7z8eQoAA_IhcaFPeOH74ExJe0ipnmQ1" rel="stylesheet"/>

    <link href="/bundles/themeStyles?v=8WP0UDd3vNWmtbm3FtbpvD3acOSKRWs-5bz3kRH1h1g1" rel="stylesheet"/>

    <link href="/bundles/customStyles?v=4TsMbLpxPUa3E4LhfVUTC6bIXEsK2LZN0bQ8GZmDSI41" rel="stylesheet"/>

</head>

<body ng-cloak>
    <toast></toast>
    <main lang="en">
        


<header id="js-header" class="u-header u-header--sticky-top">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-pt-10">
    <nav class="js-mega-menu navbar navbar-expand-lg hs-menu-initialized hs-menu-horizontal">
      <div class="container-fluid"> <a href="/" class="navbar-brand"> <img src="../Content/images/Logo.svg"
            alt="payCity Logo" class="header-site-logo"> </a>
        <div class="nav-item g-mx-10 d-block d-lg-none" ng-if="isUserLoggedIn"> <basket-button></basket-button> </div>
        <button ng-if="!$route.current.isAuthenticated && IsMobile && !isUserLoggedIn" ng-click="navigateToStore()"
          class="btn u-btn-primary g-min-width-110 pcc-btn pcc-btn-header">Get App</button> <button
          class="navbar-toggler navbar-toggler-right btn g-brd-none g-pa-0" type="button" aria-label="Toggle navigation"
          aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar"> <span
            class="hamburger hamburger--slider"> <span class="hamburger-box"> <span class="hamburger-inner"></span>
            </span> </span> </button>
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg g-mr-40--lg" id="navBar">
          <ul class="navbar-nav text-uppercase g-pos-rel g-font-weight-600 ml-auto"> <!-- Home -->
            <li ng-show="LiRegister" ng-if="!isUserLoggedIn && ($route.current.activeTab != 'register')"
              class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="Register" class="nav-link g-py-9 g-px-0">Register</a>
            </li>
            <li ng-show="LiLogin" ng-if="!isUserLoggedIn && ($route.current.activeTab != 'login')"
              class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="Login" class="nav-link g-py-9 g-px-0">Login</a> </li>
            <li ng-show="LiOurServices" ng-if="!isUserLoggedIn" class="nav-item  g-mx-10--lg g-mx-15--xl"> <a
                href="/OurServices" class="nav-link g-py-9 g-px-0">Our Services</a> </li>
            <li ng-if="isUserLoggedIn" class="nav-item  g-mx-10--lg g-mx-15--xl"> <a href="/MyServices"
                class="nav-link g-py-9 g-px-0">My Services</a> </li> <!-- End Home --> <!-- Quick Lookup -->
            <li class="nav-item hs-has-sub-menu  g-mx-10--lg g-mx-15--xl" data-animation-in="fadeIn"
              data-animation-out="fadeOut"> <a id="nav-link--lookup" class="nav-link g-py-9 g-px-0" href="#!"
                aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu--lookup">Quick Lookup</a>
              <ul
                class="hs-sub-menu list-unstyled u-shadow-v11 g-brd-top g-brd-primary g-brd-top-2 g-min-width-220 g-mt-18 g-mt-8--lg--scrolling"
                id="nav-submenu--lookup" aria-labelledby="nav-link--services">
                <li class="dropdown-item "> <a class="nav-link" href="NoticeSearch">Notice Number Search</a> </li>
                <li ng-if="!isUserLoggedIn" class="dropdown-item "> <a class="nav-link" href="IdSearch">ID Number
                    Search</a></li>
                <li class="dropdown-item "> <a class="nav-link" href="MeterSearch">Is my meter supported</a> </li>
              </ul>
            </li>
            <li ng-if="!isUserLoggedIn && ($route.current.activeTab != 'login')"
              class="nav-item d-none d-lg-block g-mx-10--lg g-mx-15--xl"> <a
                class="btn u-btn-outline-black g-min-width-110 pcc-btn pcc-btn-header" href="Login">Login</a> </li>
            <li ng-if="!isUserLoggedIn" class="nav-item d-none d-lg-block g-mx-10--lg g-mx-15--xl"> <a
                class="btn u-btn-primary g-min-width-110 pcc-btn pcc-btn-header" href="Register">Register</a> </li>
            <li class="nav-item g-mx-10 d-none d-lg-block" ng-if="isUserLoggedIn"> <basket-button></basket-button> </li>
            <li class="nav-item hs-has-sub-menu g-mx-10--lg g-mx-15--xl" data-animation-in="fadeIn"
              data-animation-out="fadeOut" ng-if="isUserLoggedIn"> <a id="nav-link--profile"
                class="nav-link g-py-0 g-px-0" href="#!" aria-haspopup="true" aria-expanded="false"
                aria-controls="nav-submenu--profile"> <span class="g-pos-rel"> <img
                    class="g-width-40 g-width-50--md g-height-40 g-height-50--md rounded-circle g-mr-10--sm"
                    src="../Content/images/placeholder.png" alt="Image description"> </span> <span
                  class="g-pos-rel g-top-2"> <span>{{user.Fullname}}</span> </span> </a>
              <ul
                class="hs-sub-menu list-unstyled u-shadow-v11 g-brd-top g-brd-primary g-brd-top-2 g-min-width-220 g-mt-18 g-mt-8--lg--scrolling pcc-profile-xs-max-height"
                id="nav-submenu--profile" aria-labelledby="nav-link--services">
                <li class="dropdown-item "> <a class="nav-link" href="/MyServices/TrafficFines">My Traffic Fines</a>
                </li>
                <li class="dropdown-item" style="cursor: pointer;" ng-hide="user.IsLDRRole == null || user.IsLDRRole == false"> <a class="nav-link"
                  ng-click="onLDRClick(featureSettings.LDR.Version === 1 ? '/ManageAccount/ManageServices' : '/LDRV2')">
                  {{ featureSettings.LDR.Title }} </a> </li>
                <li style="display: none;" class="dropdown-item "> <a class="nav-link"
                    href="/MyServices/MunicipalAccounts">My Municipal Accounts</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/MyServices/PrepaidUtilities">My Prepaid
                    Utilities</a> </li>
                <!-- <li class="dropdown-item "> <a class="nav-link" href="/Subscriptions">Subscription</a>                                  </li> -->
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/Profile">Personal Details</a> </li>
                <li class="dropdown-item"> <a class="nav-link" href="/ManageAccount/ManageServices"> {{ user.IsLDRRole
                    == true ? 'My Entities & Vehicles' : 'Entities' }} </a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/NotificationSettings">Notification
                    Settings</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/NotificationHistory">Notification
                    History</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="/ManageAccount/TransactionHistory">Payments and
                    Credits</a> </li>
                <li class="dropdown-item "> <a class="nav-link" href="javascript:void(0)"
                    ng-click="onLogoutClick()">Logout</a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div style="color:white">  </div>
  </div>
</header>

        <div class="starting-view" id="Loader">
            <h1>Loading ...</h1>
        </div>

        <div class="site-view-container" autoscroll="true" ng-view="" onload="onNgViewLoad()">
        </div>

        


<div id="contacts-section" class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-60">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 g-mb-40 g-mb-0--lg">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Media</h2>
                </div>
                <article>
                    <div class="row">
                        <div class="col-1"> <a href="https://twitter.com/paycity" target="_blank"
                                class="g-color-white-opacity-0_5 g-color-white--hover"> <i class="fa fa-twitter"></i>
                            </a> </div>
                        <div class="col-10">
                            <h3 class="h6 g-mb-2"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    target="_blank" href="https://twitter.com/paycity">Follow us on X</a> </h3>
                        </div>
                    </div>
                </article>
                <hr class="g-brd-white-opacity-0_1 g-my-10">
                <article>
                    <div class="row">
                        <div class="col-1"> <a href="https://www.facebook.com/payCity/" target="_blank"
                                class="g-color-white-opacity-0_5 g-color-white--hover"> <i class="fa fa-facebook"></i>
                            </a> </div>
                        <div class="col-10">
                            <h3 class="h6 g-mb-2"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    target="_blank" href="https://www.facebook.com/payCity/">Like us on Facebook</a>
                            </h3>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-lg-4 col-md-4 g-mb-40 g-mb-0--lg">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Useful Links</h2>
                </div>
                <nav class="text-uppercase1">
                    <ul class="list-unstyled g-mt-minus-10 mb-0">
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/AboutUs">About Us</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/OurServices">Our Services</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                        <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                            <h4 class="h6 g-pr-20 mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                    href="/FAQs">Frequently Asked Questions</a> <i
                                    class="fa fa-angle-right g-absolute-centered--y g-right-0"></i> </h4>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="u-heading-v2-3--bottom g-brd-white-opacity-0_8 g-mb-20">
                    <h2 class="u-heading-v2__title h6 text-uppercase mb-0">Our Contacts</h2>
                </div>
                <address class="g-bg-no-repeat g-font-size-12 mb-0"
                    style="background-image: url(../../Content/unifyTheme/html/assets/img/maps/map2.png);">
                    <div class="d-flex g-mb-20 align-items-center">
                        <div class="g-mr-10"> <span
                                class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-color-white-opacity-0_6"> <i
                                    class="fa fa-phone"></i> </span> </div>
                        <p class="mb-0">(+27) 087 237 7011</p>
                    </div>
                    <div class="d-flex g-mb-20 align-items-center">
                        <div class="g-mr-10"> <a
                                class="u-icon-v3 u-icon-size--xs g-bg-white-opacity-0_1 g-color-white-opacity-0_6"
                                href="mailto:team@paycity.co.za"> <i class="fa fa-envelope"></i> </a> </div>
                        <p class="mb-0"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="mailto:team@paycity.co.za">team@paycity.co.za</a> </p>
                    </div>
                </address>
            </div>
        </div>
    </div>
</div>
<footer class="g-bg-gray-dark-v1 g-color-white-opacity-0_8 g-py-20">
    <div class="container">
        <div class="row">
            <div class="col-md-8 text-center text-md-left g-mb-10 g-mb-0--md">
                <div class="d-lg-flex"> <small class="d-block g-font-size-default g-mr-10 g-mb-10 g-mb-0--md">All
                        Content Copyright Syntell (Pty.) Ltd.</small>
                    <ul class="u-list-inline">
                        <li class="list-inline-item"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="TermsAndConditions">Terms and Conditions</a> </li>
                        <li class="list-inline-item"> <span>|</span> </li>
                        <li class="list-inline-item"> <a class="g-color-white-opacity-0_8 g-color-white--hover"
                                href="@Url.Content(" /Content/pdf/Syntell_PAIA_Manual.pdf")" target="_blank">PAIA
                                Document</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer> <a class="js-go-to u-go-to-v1 animated js-animation-was-fired zoomIn" href="#!" data-type="fixed"
    data-position="{       &quot;bottom&quot;: 15,       &quot;right&quot;: 15     }" data-offset-top="400"
    data-compensation="#js-header" data-show-effect="zoomIn"
    style="display: inline-block; position: fixed; bottom: 15px; right: 15px;"> <i
        class="hs-icon hs-icon-arrow-top"></i> </a>
    </main>
    <!--Scripts-->
    <script src="/bundles/compulsoryScripts?v=N5aJXoq8N7SOH0FXyGmTti4nnhQ0LLgp_2osKxdjUNQ1"></script>

    <script src="/bundles/themeScripts?v=GKJhmK28547za0X2_isFSyE84kUlf9QuIA18ml2i9-s1"></script>

    <script src="/bundles/customScripts?v=D6SGwSsDsHH-eRZPd3aZIOKHZlwEzv_76c7ZtXYa4b01"></script>

    <script src="/bundles/vendorScripts?v=ZJm1lcsnghhufleFSgdiWEzItBWNPO3GlxSCSs2Nxzo1"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
    <script src="/bundles/appScripts?v=RL4SBWVJqu-m96_71DjOmh-FX4ZsGtIvYY21incr5ag1"></script>


    
    <script>
        $(document).on('ready', function () {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf('MSIE ');
            var trident = ua.indexOf('Trident/');
            var edge = ua.indexOf('Edge/');

            if (trident > 0 || msie > 0 || edge > 0) {
                window.location.href = "/UnsupportedBrowsers.html";
            }

            //<a href="~/Views/Browsers/UnsupportedBrowsers.html">~/Views/Browsers/UnsupportedBrowsers.html</a>
            // initialization of tabs
            $.HSCore.components.HSTabs.init('[role="tablist"]');

            // initialization of header height offset
            $.HSCore.helpers.HSHeightCalc.init();


            // initialization of scroll animation
            $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');

            // initialization of counters
            var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');

            // initialization of chart pies with rtl option
            var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
                rtl: true
            });

            // initialization of rating
            $.HSCore.components.HSRating.init($('.js-rating'), {
                spacing: 4
            });

            // initialization of popups with media
            $.HSCore.components.HSPopup.init('.js-fancybox-media', {
                helpers: {
                    media: {},
                    overlay: {
                        css: {
                            'background': 'rgba(255, 255, 255, .8)'
                        }
                    }
                }
            });

            // initialization of text animation (typing)
            $(".u-text-animation.u-text-animation--typing").typed({
                strings: [
                    "awesome template",
                    "perfect template",
                    "just like a boss"
                ],
                typeSpeed: 60,
                loop: true,
                backDelay: 1500
            });

            // initialization of go to
            $.HSCore.components.HSGoTo.init('.js-go-to');
        });

        $(window).on('load', function () {
            // initialization of header
            $.HSCore.components.HSHeader.init($('#js-header'));
            $.HSCore.helpers.HSHamburgers.init('.hamburger');

            // initialization of HSMegaMenu component
            $('.js-mega-menu').HSMegaMenu({
                event: 'hover',
                pageContainer: $('.container'),
                breakpoint: 991
            });
        });

        $(window).on('resize', function () {
            setTimeout(function () {
                $.HSCore.components.HSTabs.init('[role="tablist"]');
            }, 200);
        });
    </script>
</body>
</html>
~~~