TikTok Tutorial #88 - How to create a Payment system with CSS & JS

No one wants to shop online if the payment doesn't run smoothly. So, here's how to implement a flawless payment system.

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

<div class="container">
  <div id="logo"><h1 class="logo">hulu</h1>
    <div class="CTA">
      <h1>Get $10</h1>
      </div>
  </div>
  <div class="leftbox">
    <nav>
      <a id="profile" class="active"><i class="fa fa-user"></i></a>
      <a id="payment"><i class="fa fa-credit-card"></i></a>
      <a id="subscription"><i class="fa fa-tv"></i></a>
      <a id="privacy"><i class="fa fa-tasks"></i></a>
      <a id="settings"><i class="fa fa-cog"></i></a>
    </nav>
  </div>
  <div class="rightbox">
    <div class="profile">
      <h1>Personal Info</h1>
      <h2>Full Name</h2>
      <p>Julie Park <button class="btn">update</button></p>
      <h2>Birthday</h2>
      <p>July 21</p>
      <h2>Gender</h2>
      <p>Female</p>
      <h2>Email</h2>
      <p>example@example.com <button class="btn">update</button></p>
      <h2>Password </h2>
      <p>••••••• <button class="btn">Change</button></p>
    </div>

    <div class="payment noshow">
      <h1>Payment Info</h1>
      <h2>Payment Method</h2>
      <p>Mastercard •••• •••• •••• 0000 <button class="btn">update</button></p>
      <h2>Billing Address</h2>
      <p>1234 Example Ave | Seattle, WA <button class="btn">change</button></p>
      <h2>Zipcode</h2>
      <p>999000</p>
      <h2>Billing History</h2>
      <p>2018<button class="btn">view</button></p>
      <h2>Redeem Gift Subscription </h2>
      <p><input type="text" placeholder="Enter Gift Code"></input> <button class="btn">Redeem</button></p>
    </div>

    <div class="subscription noshow">
      <h1>Your Subscription</h1>
      <h2>Payment Date</h2>
      <p>05-15-2018 <button class="btn">pay now</button></p>
      <h2>Your Next Charge</h2>
      <p>$8.48<span> includes tax</span></p>
      <h2>Hulu Base Plan</h2>
      <p>Limited Commercials <button class="btn">change plan</button></p>
      <h2>Add-ons</h2>
      <p>None <button class="btn">manage</button></p>
      <h2>Monthly Recurring Total </h2>
      <p>$7.99/month</p>
    </div>

    <div class="privacy noshow">
      <h1>Privacy Settings</h1>
      <h2>Manage Email Notifications<button class="btn">manage</button></h2>
      <p></p>
      <h2>Manage Privacy Settings<button class="btn">manage</button></h2>
      <p></p>
      <h2>View Terms of Use <button class="btn">view</button></h2>
      <p></p>
      <h2>Personalize Ad Experience <button class="btn">update</button></h2>
      <p></p>
      <h2>Protect Your Account <button class="btn">protect</button></h2>
      <p></p>
    </div>
 <div class="settings noshow">
      <h1>Account Settings</h1>
      <h2>Sync Watchlist to My Stuff<button class="btn">sync</button></h2>
      <p></p>
      <h2>Hold Your Subscription<button class="btn">hold</button></h2>
      <p></p>
      <h2>Cancel Your Subscription <button class="btn">cancel</button></h2>
      <p></p>
      <h2>Your Devices <button class="btn">Manage Devices</button></h2>
      <p></p>
      <h2>Referrals <button class="btn">get $10</button></h2>
   <p></p>
    </div>

  </div>
</div>

<footer>
  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
</footer>

2. CSS Code

$logo: #3DBB3D;
$gray: #777777;
$black: #070707;
$green: #7ED386;
$aqua: #3FB6A8;
$white: #FFFFFF;

@import url('https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto');

$hulu: 'Nunito Sans', sans-serif;
$heading: 'Montserrat', sans-serif;
$body: 'Roboto', sans-serif;

body {
  background: linear-gradient(to right, $aqua, $green);
}

.container {
  background: $white;
  width: 540px;
  height: 420px;
  margin: 0 auto;
  position: relative;
  margin-top: 10%;
  box-shadow: 2px 5px 20px rgba($gray, .5);
}

.logo {
  float: right;
  margin-right: 12px;
  margin-top: 12px;
  font-family: $hulu;
  color: $logo;
  font-weight: 900;
  font-size: 1.5em;
  letter-spacing: 1px;
}

.CTA {
  width: 80px;
  height: 40px;
  right: -20px;
  bottom: 0;
  margin-bottom: 90px;
  position: absolute;
  z-index: 1;
  background: $green;
  font-size: 1em;
  transform: rotate(-90deg);
  transition: all .5s ease-in-out;
  cursor: pointer;
  h1 {
    color: $white;
    margin-top: 10px;
    margin-left: 9px;
  }
  &:hover {
    background: $aqua;
    transform: scale(1.1);
  }
}

.leftbox {
  float: left;
  top: -5%;
  left: 5%;
  position: absolute;
  width: 15%;
  height: 110%;
  background: $green;
  box-shadow: 3px 3px 10px rgba($gray, .5);
}

nav a {
  list-style: none;
  padding: 35px;
  color: $white;
  font-size: 1.1em;
  display: block;
  transition: all .3s ease-in-out;
  &:hover {
    color: $aqua;
    transform: scale(1.2);
    cursor: pointer;
  }
  &:first-child {
    margin-top: 7px;
  }
}

.active {
  color: $aqua;
}

.rightbox {
  float: right;
  width: 60%;
  height: 100%;
}


.profile, .payment, .subscription, .privacy, .settings {
  transition: opacity .5s ease-in;
  position: absolute;
  width: 70%;
}

h1 {
  font-family: $heading;
  color: $green;
  font-size: 1em;
  margin-top: 40px;
  margin-bottom: 35px;
}

h2 {
  color: $gray;
  font-family: $body;
  width: 80%;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 1px;
  margin-left: 2px;
}

p {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, $aqua, rgba($green,.5)) 1 0%;
  border-top: 0;
  width: 80%;
  font-family: $heading;
  font-size: .7em;
  padding: 7px 0;
  color: $black;
}
span {
  font-size: .5em;
  color: $gray;
}

.btn {
  float: right;
  font-family: $body;
  text-transform: uppercase;
  font-size: 10px;
  border: none;
  color: $aqua;
}

.btn:hover {
  text-decoration: underline;
  font-weight: 900;
}

input {
  border: 1px solid lighten($gray,40%);
  font-family: $body;
  padding: 2px;
  margin: 0;
}

.privacy h2{
  margin-top: 25px;
}

.settings h2{
  margin-top: 25px;
}

.noshow {
  opacity: 0;
}

footer {
  position: absolute;
  width: 20%;
  bottom: 0;
  right: -20px;
  text-align: right;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: $body;
  p {
    border: none;
    padding: 0;
  }
  a {
    color: #ffffff;
    text-decoration: none;
    &:hover {
      color: #7d7d7d;
    }
  }
}

3. Javascript Code

/*active button class onclick*/
$('nav a').click(function(e) {
  e.preventDefault();
  $('nav a').removeClass('active');
  $(this).addClass('active');
  if(this.id === !'payment'){
    $('.payment').addClass('noshow');
  }
  else if(this.id === 'payment') {
    $('.payment').removeClass('noshow');
    $('.rightbox').children().not('.payment').addClass('noshow');
  }
  else if (this.id === 'profile') {
    $('.profile').removeClass('noshow');
     $('.rightbox').children().not('.profile').addClass('noshow');
  }
  else if(this.id === 'subscription') {
    $('.subscription').removeClass('noshow');
    $('.rightbox').children().not('.subscription').addClass('noshow');
  }
    else if(this.id === 'privacy') {
    $('.privacy').removeClass('noshow');
    $('.rightbox').children().not('.privacy').addClass('noshow');
  }
  else if(this.id === 'settings') {
    $('.settings').removeClass('noshow');
    $('.rightbox').children().not('.settings').addClass('noshow');
  }
});

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

  • TikTok
  • Instagram
  • Twitter
  • Facebook
  • Blog

Other useful resources:

  • Free Resources (UI Kits, Admin, and Mobile Templates)
  • "Fundamentals of Creating a Great UI/UX" by Creative Tim book
  • "Roots of UI/UX Design" book by Creative Tim

Similar Posts