Material Design Lite: Order Checkout Card

In this tutorial, I’m going to show you how-to create a order checkout card using Google’s Material Design Lite.This is what we are going to create:

See the Pen Material Design Lite: Order Checkout by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

 

Checkout

 

 

Your full name…

 

XXXX XXXX XXXX XXXX Input is not a number!

 

MM / YY

 

CCV Input is not a number!

</div>

COMPLETE ORDER

</form> </div> </div>

For the credit card number and CVV, we will make sure the value inputted is a number, which you can see looks like this:

<input class="mdl-textfield__input" type="text" id="cardnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="-?[0-9]*(.[0-9]+)?" maxlength="16" />

Note pattern="-?[0-9]*(.[0-9]+)?" which requires the input pattern to be a number and maxlength="16" which adds a maximum input length.

The second line afterwards, we’ll see:

<span class="mdl-textfield__error">Input is not a number!</span>

This is a message that will be displayed to the user if they do not enter a number.

Custom CSS

We will use some custom CSS:

body {
  background: #5C6BC0;
}
.mdl-card {
  margin-top: 40px;
  margin-left: auto;
  margin-bottom: 40px;
  margin-right: auto;
}
.mdl-card-order > .mdl-card__title {
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #3F51B5;   
  /* 
  background: #3F51B5 url("images/mastercard.jpg") center;
  background-size: cover; 
  */
}

From lines 15 – 18, you will see this:

  /* 
  background: #3F51B5 url("images/mastercard.jpg") center;
  background-size: cover; 
  */

If you wish for the card title to be an image instead of the indigo colour, use this code.