10+ JavaScript Checkout Form Examples

This post contains a total of 10+ JavaScript Checkout ( Payment ) Form Examples with Source Code. All these Checkout Forms are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Checkout Form Examples

1. By Vishal Sondarva

Made by Vishal Sondarva. Fully responsive Shopping Cart with Credit Card Checkout Form. Source

JavaScript Checkout Form by Vishal Sondarva
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
@import url("https://fonts.googleapis.com/css2?family=Jost:[email protected];400;500;600;700&display=swap");
@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v54/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format("woff2");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}
* ::before,
* ::after {
  box-sizing: border-box;
}

body {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #34302d;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  background: linear-gradient(45deg, #ab5d6d, #913e4e), linear-gradient(45deg, #b26172, #ae5545);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-width: 360px;
}
@media (max-width: 767px) {
  body {
    align-items: baseline;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    align-items: baseline;
  }
}

.cart_wrapper {
  max-width: 1200px;
  width: 100%;
  max-height: 800px;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
  margin: 30px;
  overflow: hidden;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper {
    max-height: 1000px;
  }
}
@media (max-width: 767px) {
  .cart_wrapper {
    max-height: unset;
    max-width: 100%;
    margin: 15px;
  }
}
.cart_wrapper .cart_lists {
  background-color: #ecf0f1;
  padding: 30px;
  width: calc(100% - 330px);
  flex: 0 0 calc(100% - 330px);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_lists {
    width: 100%;
    flex: 0 0 100%;
  }
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists {
    width: 100%;
    flex: 0 0 100%;
    padding: 20px;
  }
}
.cart_wrapper .cart_lists .cart_title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 400;
  height: 50px;
}
.cart_wrapper .cart_lists .cart_title span {
  margin-right: 8px;
  padding-right: 8px;
  line-height: 18px;
  border-right: solid 2px #ddd;
}
.cart_wrapper .cart_lists .cart_list_wrap {
  padding: 25px 40px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 380px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive {
    max-height: 380px;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive::-webkit-scrollbar-thumb {
  background-color: #ddd;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive::-webkit-scrollbar-track {
  background-color: #eee;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item {
  display: grid;
  grid-template-columns: 80px 3fr 1fr 1fr 120px 50px;
  margin-bottom: 15px;
  transition: all 0.3s linear;
  position: relative;
  transform: scale(0.995);
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(1) {
  animation: listshow linear;
  animation-duration: 820ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(2) {
  animation: listshow linear;
  animation-duration: 640ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(3) {
  animation: listshow linear;
  animation-duration: 460ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(4) {
  animation: listshow linear;
  animation-duration: 280ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(5) {
  animation: listshow linear;
  animation-duration: 100ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(6) {
  animation: listshow linear;
  animation-duration: -80ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(7) {
  animation: listshow linear;
  animation-duration: -260ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(8) {
  animation: listshow linear;
  animation-duration: -440ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(9) {
  animation: listshow linear;
  animation-duration: -620ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(10) {
  animation: listshow linear;
  animation-duration: -800ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(11) {
  animation: listshow linear;
  animation-duration: -980ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(12) {
  animation: listshow linear;
  animation-duration: -1160ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(13) {
  animation: listshow linear;
  animation-duration: -1340ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(14) {
  animation: listshow linear;
  animation-duration: -1520ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(15) {
  animation: listshow linear;
  animation-duration: -1700ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(16) {
  animation: listshow linear;
  animation-duration: -1880ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(17) {
  animation: listshow linear;
  animation-duration: -2060ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(18) {
  animation: listshow linear;
  animation-duration: -2240ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(19) {
  animation: listshow linear;
  animation-duration: -2420ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(20) {
  animation: listshow linear;
  animation-duration: -2600ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(21) {
  animation: listshow linear;
  animation-duration: -2780ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(22) {
  animation: listshow linear;
  animation-duration: -2960ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(23) {
  animation: listshow linear;
  animation-duration: -3140ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(24) {
  animation: listshow linear;
  animation-duration: -3320ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(25) {
  animation: listshow linear;
  animation-duration: -3500ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(26) {
  animation: listshow linear;
  animation-duration: -3680ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(27) {
  animation: listshow linear;
  animation-duration: -3860ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(28) {
  animation: listshow linear;
  animation-duration: -4040ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(29) {
  animation: listshow linear;
  animation-duration: -4220ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(30) {
  animation: listshow linear;
  animation-duration: -4400ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(31) {
  animation: listshow linear;
  animation-duration: -4580ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(32) {
  animation: listshow linear;
  animation-duration: -4760ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(33) {
  animation: listshow linear;
  animation-duration: -4940ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(34) {
  animation: listshow linear;
  animation-duration: -5120ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(35) {
  animation: listshow linear;
  animation-duration: -5300ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(36) {
  animation: listshow linear;
  animation-duration: -5480ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(37) {
  animation: listshow linear;
  animation-duration: -5660ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(38) {
  animation: listshow linear;
  animation-duration: -5840ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(39) {
  animation: listshow linear;
  animation-duration: -6020ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(40) {
  animation: listshow linear;
  animation-duration: -6200ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(41) {
  animation: listshow linear;
  animation-duration: -6380ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(42) {
  animation: listshow linear;
  animation-duration: -6560ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(43) {
  animation: listshow linear;
  animation-duration: -6740ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(44) {
  animation: listshow linear;
  animation-duration: -6920ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(45) {
  animation: listshow linear;
  animation-duration: -7100ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(46) {
  animation: listshow linear;
  animation-duration: -7280ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(47) {
  animation: listshow linear;
  animation-duration: -7460ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(48) {
  animation: listshow linear;
  animation-duration: -7640ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(49) {
  animation: listshow linear;
  animation-duration: -7820ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:nth-last-child(50) {
  animation: listshow linear;
  animation-duration: -8000ms;
  transform-origin: top;
}
@keyframes listshow {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item {
    grid-template-columns: 80px auto 80px auto;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 2px;
  background-color: #d9d9d9;
  width: 0px;
  margin: auto;
}
@keyframes line {
  0% {
    width: 0px;
  }
  100% {
    width: calc(100% - 50px);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:hover {
  transform: scale(1);
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item:hover::after {
  width: calc(100% - 50px);
  animation: line 0.5s linear;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item {
  padding: 10px;
  background-color: #e5e9ea;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  color: #666;
  transition: all 0.3s linear;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item {
    padding: 5px;
  }
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_img {
    grid-row-start: 1;
    grid-row-end: 3;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_img img {
  height: 60px;
  width: 60px;
  overflow: hidden;
  border-radius: 100px;
  max-width: 100%;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_name {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 5;
    width: 100%;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_name .main {
  font-size: 16px;
  font-weight: 400;
  color: #666;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_name .sub {
  font-size: 12px;
  color: #666;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_qty select {
  height: 30px;
  background-color: transparent;
  border-color: transparent;
  border-width: 2px;
  outline: none;
  color: #666;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s linear;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_qty select:focus {
  background-color: #e2e2e2;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_qty select:hover {
  border-bottom: solid 2px #e2e2e2;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_price label {
  margin: auto;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_remove {
  background-color: transparent;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_remove {
    position: absolute;
    right: 0px;
    top: 0px;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_remove span {
  font-size: 18px;
  opacity: 0.6;
  padding: 5px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.cart_wrapper .cart_lists .cart_list_wrap .cart_responsive .tr_item .td_item.item_remove span:hover {
  opacity: 1;
  transform: scale(1.1);
}
.cart_wrapper .cart_lists .cart_list_wrap .footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 5px;
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .back_cart {
  width: 50%;
  flex: 0 0 50%;
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .back_cart a {
  color: #303030;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s;
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .back_cart a:hover {
  color: #111;
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .back_cart a:hover span {
  animation: arrow 1.5s infinite ease;
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .back_cart a span {
  vertical-align: sub;
  font-size: 18px;
  margin-right: 5px;
}
@keyframes arrow {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0px);
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .subtotal {
  width: calc(50% - 80px);
  flex: 0 0 calc(50% - 50px);
  text-align: right;
  font-size: 16px;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_lists .cart_list_wrap .footer .subtotal {
    width: 50%;
    flex: 0 0 50%;
  }
}
.cart_wrapper .cart_lists .cart_list_wrap .footer .subtotal label {
  margin-right: 15px;
}
.cart_wrapper .cart_details {
  background: linear-gradient(45deg, #303030, #4b4643);
  padding: 30px 40px;
  width: 330px;
  flex: 0 0 330px;
  box-shadow: -8px 0px 32px rgba(0, 0, 0, 0.36);
  position: relative;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details {
    width: 100%;
    flex: 0 0 100%;
  }
}
@media (max-width: 767px) {
  .cart_wrapper .cart_details {
    width: 100%;
    flex: 0 0 100%;
    padding: 30px;
  }
}
.cart_wrapper .cart_details .cart_title {
  font-size: 22px;
  color: #f1c40f;
  font-weight: 400;
  margin-bottom: 60px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details .cart_title {
    margin-bottom: 40px;
  }
}
.cart_wrapper .cart_details .form_row {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details .form_row {
    margin-bottom: 40px;
  }
}
.cart_wrapper .cart_details .form_row .form_group {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;
  margin-bottom: 35px;
  padding: 0px 10px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details .form_row .form_group:nth-child(2) {
    width: 50%;
  }
  .cart_wrapper .cart_details .form_row .form_group:nth-child(3) {
    width: 30% !important;
    flex: 0 0 30% !important;
  }
  .cart_wrapper .cart_details .form_row .form_group:nth-child(4) {
    width: 20% !important;
    flex: 0 0 20% !important;
  }
}
.cart_wrapper .cart_details .form_row .form_group.w_75 {
  width: 65%;
  flex: 0 0 65%;
}
.cart_wrapper .cart_details .form_row .form_group.w_25 {
  width: 35%;
  flex: 0 0 35%;
}
.cart_wrapper .cart_details .form_row .form_group .input_label {
  color: #f3f3f3;
  font-weight: 300;
  font-size: 16pxx;
  width: 100%;
  flex: 0 0 100%;
  letter-spacing: 0.5px;
}
.cart_wrapper .cart_details .form_row .form_group .input {
  width: 100%;
  flex: 0 0 100%;
  background-color: transparent;
  border: none;
  outline: none;
  color: #eee;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  border-bottom: solid 2px #999;
  height: 32px;
  transition: all 0.3s linear;
}
.cart_wrapper .cart_details .form_row .form_group .input::placeholder {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.1);
  transition: all 0.2s linear;
}
.cart_wrapper .cart_details .form_row .form_group .input:focus::placeholder {
  opacity: 0;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type {
  justify-content: space-between;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details .form_row .form_group.cart_type {
    justify-content: left;
  }
}
.cart_wrapper .cart_details .form_row .form_group.cart_type .type {
  width: calc(100% / 3 - 15px);
  padding: 0px;
  margin-top: 5px;
  cursor: pointer;
  transition: all 0.3s linear;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cart_wrapper .cart_details .form_row .form_group.cart_type .type {
    width: 75px;
  }
}
.cart_wrapper .cart_details .form_row .form_group.cart_type .type:hover svg {
  fill: #bbb;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type .type svg {
  width: 42px;
  fill: #7f7a76;
  transition: all 0.3s linear;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type .type.paypal svg {
  width: 62px;
  margin-top: -10px;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type input {
  display: none;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type input#master:checked ~ .master svg {
  fill: #f4f4f4;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type input#visa:checked ~ .visa svg {
  fill: #f4f4f4;
}
.cart_wrapper .cart_details .form_row .form_group.cart_type input#paypal:checked ~ .paypal svg {
  fill: #f4f4f4;
}
.cart_wrapper .cart_details .form_row .btn {
  width: calc(100%);
  height: 65px;
  margin: 0px -40px;
  background-color: #f1c40f;
  border: none;
  color: #333;
  font-size: 15px;
  font-weight: 400;
  position: absolute;
  bottom: 0px;
  transition: all 0.3s linear;
}
@media (max-width: 767px) {
  .cart_wrapper .cart_details .form_row .btn {
    position: static;
    margin: auto;
  }
}
.cart_wrapper .cart_details .form_row .btn:hover {
  background-color: #dfb50d;
}
.cart_wrapper .cart_details .form_row .btn:active {
  box-shadow: inset 0 0 28px 0px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
  <section class="cart_wrapper">
  <div class="cart_lists">
    <div class="cart_title">
      <span class="material-icons-outlined">local_mall</span>
      Your Shopping Cart
    </div>

    <div class="cart_list_wrap">
      <div class="cart_responsive">
        <div class="tr_item">
          <div class="td_item item_img">
            <img src="https://i.ibb.co/vQHXcYb/b68912b3426baa0b1f4c410a02174879.jpg" />
          </div>
          <div class="td_item item_name">
            <label class="main">Denim Jacket</label>
            <label class="sub">Ref. 007891987</label>
          </div>
          <div class="td_item item_color">
            <label>Blue</label>
          </div>
          <div class="td_item item_qty">
            <select>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="more">More</option>
            </select>
          </div>
          <div class="td_item item_price">
            <label>$ 260.00</label>
          </div>
          <div class="td_item item_remove">
            <span class="material-icons-outlined">close</span>
          </div>
        </div>

        <div class="tr_item">
          <div class="td_item item_img">
            <img src="https://i.ibb.co/R6rN96C/b5e11480e047426019842f1ebc019d52.jpg" />
          </div>
          <div class="td_item item_name">
            <label class="main">Denim Pant</label>
            <label class="sub">Ref. 007891987</label>
          </div>
          <div class="td_item item_color">
            <label>Blue</label>
          </div>
          <div class="td_item item_qty">
            <select>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="more">More</option>
            </select>
          </div>
          <div class="td_item item_price">
            <label>$ 260.00</label>
          </div>
          <div class="td_item item_remove">
            <span class="material-icons-outlined">close</span>
          </div>
        </div>

        <div class="tr_item">
          <div class="td_item item_img">
            <img src="https://i.ibb.co/XYx3YTH/6cd360618204b6d2fe6e3dc75d3f6f9e.jpg" />
          </div>
          <div class="td_item item_name">
            <label class="main">Denim Jacket Men</label>
            <label class="sub">Ref. 007891987</label>
          </div>
          <div class="td_item item_color">
            <label>Blue</label>
          </div>
          <div class="td_item item_qty">
            <select>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="more">More</option>
            </select>
          </div>
          <div class="td_item item_price">
            <label>$ 260.00</label>
          </div>
          <div class="td_item item_remove">
            <span class="material-icons-outlined">close</span>
          </div>
        </div>

        <div class="tr_item">
          <div class="td_item item_img">
            <img src="https://i.ibb.co/R6rN96C/b5e11480e047426019842f1ebc019d52.jpg" />
          </div>
          <div class="td_item item_name">
            <label class="main">Denim Pant</label>
            <label class="sub">Ref. 007891987</label>
          </div>
          <div class="td_item item_color">
            <label>Blue</label>
          </div>
          <div class="td_item item_qty">
            <select>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="more">More</option>
            </select>
          </div>
          <div class="td_item item_price">
            <label>$ 260.00</label>
          </div>
          <div class="td_item item_remove">
            <span class="material-icons-outlined">close</span>
          </div>
        </div>

      </div>
      <div class="footer">
        <div class="back_cart">
          <a href="#back">
            <span class="material-icons-outlined">west</span>
            Back to Shop
          </a>
        </div>
        <div class="subtotal">
          <label>Subtotal: </label>
          <strong>$2451.00</strong>
        </div>
      </div>
    </div>
  </div>

  <div class="cart_details">
    <div class="cart_title">
      Cart Details
    </div>
    <div class="form_row">
      <div class="form_group cart_type">
        <label class="input_label">Select Card Type</label>

        <input type="radio" name="cartType" required id="master" checked />
        <label class="type master" title="Master" for="master">
          <svg viewBox="0 -91 512 512" xmlns="http://www.w3.org/2000/svg">
            <path d="m347.339844 0c-33.765625 0-65.1875 10.222656-91.339844 27.722656-26.15625-17.5-57.574219-27.722656-91.339844-27.722656-90.792968 0-164.660156 73.859375-164.660156 164.644531 0 90.785157 73.867188 164.644531 164.660156 164.644531 33.765625 0 65.1875-10.222656 91.339844-27.722656 26.15625 17.5 57.574219 27.722656 91.339844 27.722656 90.792968 0 164.660156-73.859374 164.660156-164.644531 0-90.785156-73.867188-164.644531-164.660156-164.644531zm0 299.289062c-49.03125 0-92.023438-26.34375-115.570313-65.613281h17.304688c8.285156 0 15-6.714843 15-15 0-8.28125-6.714844-15-15-15h-30.617188c-1.851562-6.101562-3.285156-12.378906-4.261719-18.8125h58.882813c8.28125 0 15-6.714843 15-15 0-8.28125-6.71875-15-15-15h-60.042969c.460938-6.402343 1.378906-12.683593 2.710938-18.808593h33.328125c8.285156 0 15-6.71875 15-15 0-8.285157-6.714844-15-15-15h-22.960938c21.828125-44.972657 67.964844-76.054688 121.226563-76.054688 74.25 0 134.660156 60.402344 134.660156 134.644531 0 74.242188-60.410156 134.644531-134.660156 134.644531zm0 0" />
          </svg>
        </label>
        <input type="radio" name="cartType" required id="visa" />
        <label class="type visa" title="Visa" for="visa">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.834 47.834" style="enable-background:new 0 0 47.834 47.834;" xml:space="preserve">
            <g>
              <g>
                <polygon points="19.153,16.799 16.722,31.065 20.61,31.065 23.043,16.799 		" />
              </g>
            </g>
            <g>
              <g>
                <path d="M13.462,16.815l-3.808,9.729l-0.406-1.469c-0.751-1.77-2.883-4.312-5.386-5.914l3.482,11.897l4.114-0.007l6.123-14.239
			L13.462,16.815z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M7.772,17.836c-0.226-0.869-0.881-1.128-1.694-1.159H0.05L0,16.961c4.691,1.138,7.795,3.88,9.083,7.177L7.772,17.836z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M30.923,19.534c1.272-0.02,2.194,0.258,2.91,0.546l0.351,0.165l0.526-3.092c-0.77-0.289-1.977-0.599-3.483-0.599
			c-3.842,0-6.55,1.935-6.571,4.708c-0.025,2.049,1.929,3.193,3.405,3.876c1.515,0.7,2.023,1.145,2.016,1.77
			c-0.012,0.955-1.208,1.393-2.325,1.393c-1.557,0-2.384-0.215-3.661-0.747l-0.501-0.228l-0.547,3.193
			c0.91,0.399,2.589,0.742,4.332,0.76c4.087,0,6.743-1.912,6.771-4.875c0.017-1.621-1.02-2.858-3.267-3.873
			c-1.36-0.662-2.192-1.102-2.184-1.77C28.695,20.168,29.401,19.534,30.923,19.534z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M44.688,16.815h-3.004c-0.933,0-1.627,0.254-2.037,1.184l-5.773,13.074h4.083c0,0,0.666-1.758,0.817-2.143
			c0.447,0,4.414,0.006,4.979,0.006c0.116,0.498,0.474,2.137,0.474,2.137h3.607L44.688,16.815z M39.893,26.01
			c0.32-0.819,1.549-3.987,1.549-3.987c-0.021,0.039,0.317-0.825,0.518-1.362l0.262,1.23c0,0,0.745,3.406,0.901,4.119H39.893z" />
              </g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
          </svg>
        </label>
        <input type="radio" name="cartType" required id="paypal" />
        <label class="type paypal" title="PayPal" for="paypal">
          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 47.834 47.834" style="enable-background:new 0 0 50.409 50.409;" xml:space="preserve">
            <g>
              <g>
                <path d="M9.035,20.604C8.87,20.273,8.609,20,8.285,19.795c-0.338-0.207-0.737-0.352-1.193-0.438c-0.464-0.084-1-0.122-1.621-0.128
			l-2.867,0.002c-0.298,0.004-0.59,0.236-0.66,0.524l-1.929,8.402c-0.07,0.284,0.117,0.522,0.415,0.522h1.373
			c0.298,0,0.593-0.231,0.659-0.522l0.471-2.04c0.063-0.284,0.357-0.521,0.658-0.521h0.393c1.679-0.002,2.979-0.345,3.913-1.032
			c0.939-0.688,1.402-1.597,1.402-2.723C9.298,21.348,9.217,20.934,9.035,20.604z M6.074,23.349
			c-0.415,0.304-0.992,0.456-1.736,0.456H4.002c-0.299,0-0.482-0.236-0.417-0.524l0.413-1.784c0.058-0.286,0.359-0.523,0.654-0.521
			l0.45-0.003c0.525,0,0.926,0.091,1.194,0.267c0.265,0.174,0.398,0.451,0.396,0.818C6.7,22.616,6.487,23.045,6.074,23.349z" />
              </g>
            </g>
            <g>
              <g>
                <polygon points="48.175,19.887 48.089,19.913 47.974,19.929 47.833,19.907 47.761,19.837 47.728,19.727 47.726,19.562 
			47.726,18.951 48.185,18.951 48.185,18.762 47.726,18.762 47.726,18.381 47.499,18.381 47.499,18.762 47.345,18.762 
			47.345,18.951 47.499,18.951 47.499,19.662 47.605,20.014 47.917,20.126 48.048,20.115 48.187,20.088 48.187,19.887 		" />
              </g>
            </g>
            <g>
              <g>
                <polygon points="50.304,18.859 49.976,18.724 49.734,18.773 49.488,18.939 49.345,18.78 49.113,18.725 48.89,18.774 48.679,18.91 
			48.679,18.762 48.456,18.762 48.456,20.097 48.678,20.097 48.678,19.1 48.865,18.984 49.051,18.938 49.203,18.965 49.278,19.042 
			49.311,19.17 49.322,19.335 49.322,20.098 49.545,20.098 49.545,19.244 49.541,19.173 49.537,19.108 49.727,18.987 49.915,18.94 
			50.062,18.967 50.142,19.044 50.17,19.173 50.185,19.336 50.185,20.099 50.409,20.099 50.409,19.232 		" />
              </g>
            </g>
            <g>
              <g>
                <path d="M15.656,21.805c-0.518-0.292-1.336-0.438-2.454-0.438c-0.553,0-1.104,0.043-1.661,0.129
			c-0.411,0.063-0.451,0.075-0.704,0.13c-0.522,0.114-0.604,0.635-0.604,0.635l-0.168,0.691c-0.095,0.441,0.159,0.424,0.265,0.387
			c0.228-0.068,0.355-0.138,0.821-0.242c0.445-0.101,0.914-0.177,1.286-0.172c0.549,0,0.969,0.058,1.249,0.176
			c0.276,0.12,0.414,0.326,0.414,0.624l-0.024,0.194l-0.198,0.122c-0.779,0.049-1.342,0.121-2.025,0.22
			c-0.668,0.093-1.254,0.256-1.741,0.479c-0.523,0.23-0.911,0.539-1.182,0.932c-0.262,0.395-0.393,0.874-0.393,1.436
			c0,0.529,0.19,0.966,0.559,1.304c0.371,0.332,0.861,0.494,1.447,0.494c0.371-0.002,0.658-0.031,0.862-0.08l0.665-0.229
			l0.563-0.312l0.518-0.342l0.007,0.01l-0.052,0.22l-0.003,0.009v0.002c-0.056,0.268,0.106,0.488,0.367,0.514l0.005,0.006h0.024
			h1.053h0.198l0.018-0.008c0.274-0.032,0.531-0.252,0.591-0.514l1.001-4.333l0.052-0.353l0.024-0.331
			C16.44,22.551,16.175,22.096,15.656,21.805z M13.442,26.677l-0.214,0.282l-0.54,0.279c-0.254,0.103-0.495,0.155-0.718,0.155
			c-0.338,0-0.603-0.049-0.782-0.149l-0.265-0.515c0-0.279,0.064-0.5,0.201-0.67l0.582-0.396c0.249-0.084,0.553-0.155,0.905-0.204
			c0.314-0.039,0.934-0.11,1.015-0.112l0.095,0.167C13.702,25.609,13.526,26.345,13.442,26.677z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M40.594,21.811c-0.521-0.292-1.338-0.439-2.453-0.439c-0.553,0-1.105,0.043-1.66,0.132
			c-0.412,0.06-0.453,0.073-0.707,0.127c-0.521,0.113-0.602,0.636-0.602,0.636l-0.168,0.69c-0.094,0.441,0.154,0.421,0.27,0.387
			c0.229-0.068,0.352-0.135,0.814-0.243c0.443-0.1,0.916-0.174,1.289-0.172c0.547,0,0.967,0.059,1.246,0.177
			c0.278,0.12,0.414,0.328,0.414,0.623l-0.021,0.193l-0.196,0.125c-0.787,0.047-1.351,0.119-2.027,0.218
			c-0.666,0.093-1.254,0.255-1.742,0.479c-0.521,0.231-0.914,0.54-1.182,0.934c-0.265,0.395-0.394,0.873-0.394,1.43
			c0,0.533,0.188,0.97,0.562,1.306c0.373,0.331,0.858,0.497,1.444,0.497c0.369-0.004,0.656-0.028,0.861-0.081l0.663-0.226
			l0.568-0.312l0.514-0.346l0.009,0.011l-0.047,0.222l-0.005,0.004l0.002,0.004c-0.062,0.268,0.101,0.49,0.365,0.514l0.002,0.005
			h0.024c0.173,0,0.771,0,1.056,0h0.194l0.021-0.007c0.271-0.033,0.527-0.253,0.584-0.518l1.004-4.327l0.053-0.355l0.029-0.332
			C41.379,22.555,41.117,22.102,40.594,21.811z M38.385,26.683l-0.223,0.285l-0.535,0.277c-0.254,0.102-0.496,0.155-0.715,0.155
			c-0.349,0-0.607-0.05-0.781-0.15l-0.268-0.513c0-0.28,0.065-0.499,0.196-0.672c0.133-0.163,0.336-0.297,0.588-0.395
			c0.246-0.084,0.55-0.152,0.904-0.203c0.312-0.039,0.93-0.112,1.01-0.113l0.097,0.167C38.644,25.616,38.467,26.349,38.385,26.683z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M33.969,20.635c-0.172-0.333-0.43-0.602-0.756-0.812c-0.334-0.208-0.73-0.354-1.193-0.438
			c-0.455-0.081-0.998-0.125-1.615-0.126l-2.871,0.002c-0.299,0.005-0.586,0.237-0.655,0.522l-1.931,8.406
			c-0.07,0.285,0.122,0.521,0.414,0.521l1.375-0.002c0.292,0.002,0.591-0.232,0.66-0.52l0.465-2.041
			c0.068-0.284,0.363-0.523,0.66-0.521h0.393c1.681,0,2.984-0.346,3.922-1.031c0.927-0.693,1.396-1.6,1.396-2.727
			C34.228,21.377,34.143,20.962,33.969,20.635z M31.008,23.384c-0.414,0.298-0.992,0.45-1.732,0.45h-0.342
			c-0.295,0.003-0.486-0.237-0.42-0.523l0.416-1.781c0.061-0.285,0.359-0.524,0.656-0.521l0.445-0.003
			c0.528,0.003,0.924,0.09,1.194,0.266c0.269,0.176,0.396,0.452,0.399,0.818C31.627,22.648,31.42,23.078,31.008,23.384z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M45.742,19.85c0.063-0.287-0.117-0.52-0.412-0.516H44.1c-0.252,0-0.479,0.187-0.59,0.417l-0.068,0.106l-0.062,0.272
			l-1.719,7.814l-0.056,0.24l0.002,0.006c-0.057,0.257,0.101,0.451,0.345,0.488l0.021,0.029h1.277c0.25,0,0.485-0.19,0.592-0.424
			l0.066-0.1l1.838-8.331L45.742,19.85z" />
              </g>
            </g>
            <g>
              <g>
                <path d="M24.986,21.472c-0.325,0.004-1.646,0-1.646,0c-0.296,0-0.676,0.239-0.864,0.524c0,0-1.966,3.374-2.157,3.713l-0.228-0.003
			l-0.612-3.687c-0.068-0.29-0.371-0.538-0.748-0.538l-1.23,0.002c-0.296,0-0.478,0.236-0.411,0.524c0,0,0.934,5.315,1.121,6.566
			c0.087,0.69-0.011,0.813-0.011,0.813l-1.216,2.118c-0.18,0.288-0.083,0.523,0.212,0.523l1.422-0.002
			c0.296,0,0.685-0.233,0.861-0.522l5.47-9.252C24.949,22.252,25.475,21.461,24.986,21.472z" />
              </g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
            <g>
            </g>
          </svg>
        </label>
      </div>

      <div class="form_group">
        <label class="input_label">Card Number</label>
        <input type="text" class="input" id="card_number" name='card' min="16" max="16" placeholder="0000 0000 0000 0000" onkeypress="return checkDigit(event)" autocomplete="off" required />
      </div>

      <div class="form_group w_75">
        <label class="input_label">Ecpiry Date</label>
        <input type="text" class="input" id="card_date" placeholder="MM / YY" onkeypress="return checkDigit(event)" autocomplete="off" required />
      </div>

      <div class="form_group w_25">
        <label class="input_label">CVV</label>
        <input type="password" class="input" min="3" max="3" placeholder="***" onkeypress="return checkDigit(event)" autocomplete="off" required />
      </div>

      <button class="btn">Checkout</button>
    </div>

  </div>
</section>
      <script>
function card_format(value) {
  var v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
  var matches = v.match(/\d{4,16}/g);
  var match = matches && matches[0] || "";
  var parts = [];
  for (i = 0, len = match.length; i < len; i += 4) {if (window.CP.shouldStopExecution(0)) break;
    parts.push(match.substring(i, i + 4));
  }window.CP.exitedLoop(0);
  if (parts.length) {
    return parts.join(" ");
  } else {
    return value;
  }
}

document.getElementById("card_number").oninput = function () {
  this.value = card_format(this.value);
};

function ex_format(value) {
  var v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
  var matches = v.match(/\d{2,4}/g);
  var match = matches && matches[0] || "";
  var parts = [];
  for (i = 0, len = match.length; i < len; i += 2) {if (window.CP.shouldStopExecution(1)) break;
    parts.push(match.substring(i, i + 2));
  }window.CP.exitedLoop(1);
  if (parts.length) {
    return parts.join(" / ");
  } else {
    return value;
  }
}

document.getElementById("card_date").oninput = function () {
  this.value = ex_format(this.value);
};

function checkDigit(event) {
  var code = event.which ? event.which : event.keyCode;

  if ((code < 48 || code > 57) && code > 31) {
    return false;
  }

  return true;
}
    </script>
</body>
</html>

2. By Aman Ahmed

Made by Aman Ahmed. A simple Checkout form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

body{
  background: url("https://i.imgur.com/LAfQyOR.jpg") no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  font-size: 16px;
}

.wrapper{
  width: 100%;
  padding: 10px;
}

.container{
  max-width: 500px;
  height: auto;
  margin: 0px auto;
  background: #fff;
  padding: 20px 40px 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top: 7px solid #5f6c7d;
}

.title{
  color: #5f6c7d;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 20px;
}

.input-form{
  margin-bottom: 20px;
}

.input-form .label{
	  display: block;
    font-size: 1em;
    color: #212121;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.input-form .items{
  margin-bottom: 20px;
}

.section-1 .items .input,
.section-2 .items .input,
.section-3 .items .input{
    background: transparent;
    border: 2px solid #BDBDBD;
    width: 100%;
    padding: 10px;
    font-size: 1em;
    color: #212121;
    border-radius: 3px;
}

.input-form .section-3{
  display: flex;
  justify-content: space-between;
}

.input-form .section-3 .items{
   width: 48%;
}

.btn{
	background: #5f6c7d;
	color: #fff;
	font-size: 1.25em;	
	padding: 10px 0;
	text-align: center;
	text-transform: uppercase;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: 2px;
}

.cvc{
  display: flex;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s ease;
}

.cvc .tooltip{
  color: #d4d4d4;
  border: 2px solid #d4d4d4;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align:center;
  cursor: pointer;
}

.cvc .cvc-img{
  position: absolute;
  top: -300%;
  right: 0;
  background: #5f6c7d;
  padding: 12px;
  border-radius: 5px;
  display: none;
}

.cvc .cvc-img img{
  width: 100px;
  height: auto;
  display: block;
}

.cvc:hover .cvc-img{
  display: block;
}

@media screen and (max-width: 460px){
  .input-form .section-3{
    flex-direction: column;
  }
  .input-form .section-3 .items{
     width: 100%;
  }
  .input-form .items{
    margin-bottom: 10px;
  }

  .input-form{
    margin-bottom: 15px;
  }
  .title{
    font-size: 1.5em;
    margin-bottom: 15px;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="container">
    <div class="title">Checkout Form</div>
    
    <div class="input-form">
      <div class="section-1">
        <div class="items">
          <label class="label">card number</label>
          <input type="text" class="input" maxlength="16" data-mask="0000 0000 0000 0000"placeholder="1234 1234 1234 1234">
        </div>
      </div>
      <div class="section-2">
        <div class="items">
          <label class="label">card holder</label>
          <input type="text" class="input" placeholder="Coding Market">
        </div>
      </div>
      <div class="section-3">
        <div class="items">
          <label class="label">Expire date</label>
          <input type="text" class="input" data-mask="00 / 00" placeholder="MM / YY">
        </div>
        <div class="items">
          <div class="cvc">
            <label class="label">cvc code</label>
            <div class="tooltip">?
              <div class="cvc-img"><img src="https://i.imgur.com/r8oXtry.png" alt=""></div>
            </div>
          </div>
          <input type="text" class="input" data-mask="0000" placeholder="0000">
        </div>
      </div>
    </div>
      <div class="btn">proceed</div>
  </div>
</div>
      <script>
$(".btn").click(function () {
  $(".input").val("");
});
    </script>
</body>
</html>

3. By valeria

Made by valeria. Product Checkout form with Product image, review and price. Source

JavaScript Checkout Form by valeria
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <meta name="viewport" content="width=auto">
    <link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.5/mask.min.js"></script>
<style>
* {
  margin: 0px;
  padding: 0px;
  font-family: Work Sans;
}

button {
  cursor: pointer;
}

body {
  background-color: rgb(236, 240, 242);
}

.wrapper {
  position: relative;
  height: 100%;
  width: 1300px;
  border: 1px solid red;
  border-style: none;
}

.background {
  position: absolute;
  top: 0%;
  right: 0%;
  width: calc(100% + 1000px);
  height: 0px;
  overflow: hidden;
  transform: rotate(-45deg);
  transform-origin: 80% 10%;
  border-bottom: 60px solid rgb(222, 134, 101);
  border-top: 100px solid rgb(246, 152, 116);
  z-index: -1;
}

.back-panel {
  position: relative;
  margin: 100px auto;
  width: 800px;
  height: 700px;
  background-image: linear-gradient(to right bottom, rgb(100, 109, 122), rgb(63, 70, 83));
  box-shadow: 6px 6px 2em 0.1px rgba(100, 109, 122, .9);
}

.back-panel .input-container {
  position: absolute;
  width: 670px;
  height: 450px;
  background-color: white;
  left: 300px;
  top: 150px;
  box-shadow: 6px 6px 2.5em 0.1px rgba(100, 109, 122, .5);
}

.input-wrapper {
  position: relative;
}

.input-wrapper .buy-btn {
  position: absolute;
  border-radius: 0;
  border: none;
  padding: 25px 45px;
  background-color: rgb(238, 144, 108);
  top: 410px;
  left: 430px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #B35F40;
}

.input-wrapper .buy-btn:hover {
  box-shadow: 7px 7px 1.5em 0.1px rgba(238, 144, 108, .9);
}

.card-type {
  font-size: 150px;
  opacity: 0.05;
  text-transform: uppercase;
  font-style: italic;
  line-height: 0.7;
}

.order-total {
  width: 300px;
  letter-spacing: 2px;
  margin-left: 30px;
  margin-top: 90px;
  line-height: 1.5;
  position: relative;
}

.product-title {
  color: rgb(239, 146, 110);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-name {
  color: rgb(254, 254, 255);
  font-size: 23px;
}

.product-price {
  position: absolute;
  top: 300px;
  width: 230px;
  border-top: 1px solid rgba(255, 254, 255, 0.2);
  color: rgba(149, 145, 154, 0.9);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  padding-top: 20px;
}

.price span {
  font-size: 70px;
  font-weight: 700;
  color: rgb(255, 254, 255);
  text-shadow: 0px 5px 5px rgb(63, 70, 83);
}

.save-confirm {
  position: absolute;
  bottom: 45px;
  right: 130px;
  color: rgba(149, 145, 154, 0.9);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.5px;
  vertical-align: top;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:not(checked) + label:before {
  content: '';
  position: absolute;
  top: 0px;
  right: 280px;
  width: 20px;
  height: 20px;
  background: #5E6773;
  line-height: 20px;
}

input[type=checkbox]:checked + label:before {
  content: "\2713";
  font-size: 16px;
  color: #F59C79;
  text-align: center;
  font-weight: 800;
}

.payment-form {
  display: inline-block;
  width: 59%;
  height: 100%;
}

.product-info {
  padding-top: 35px;
  padding-left: 20px;
  text-align: center;
}

.product-info p {
  color: rgba(149, 145, 154, 0.4);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
}

.product-info .reviews {
  padding-top: 10px;
}

.product-info img {
  padding-top: 20px;
}

.product-info-wrapper {
  float: left;
  width: 40%;
}

.product-reviews .fa-star {
  color: #F4CE82;
  padding-top: 20px;
}

.product-reviews i:nth-child(5) {
  opacity: 0.4;
}

.payment-form-wrapper {
  padding: 30px 40px;
}

.small-card-type {
  font-size: 40px;
  text-transform: uppercase;
  font-style: italic;
  line-height: 0.7;
  color: rgba(109, 119, 143, 0.9);
  text-align: right;
}

.payment-form-wrapper label,
.payment-form-wrapper input,
.payment-form-wrapper select {
  display: block;
  color: rgba(149, 145, 154, 0.8);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  border: none;
}

.payment-form-wrapper input,
.payment-form-wrapper select {
  border-bottom: 1px solid rgba(109, 119, 143, 0.8);
  width: 100%;
  padding: 15px 0;
  margin-bottom: 40px;
  font-family: "Josefin Sans";
  text-transform: none;
  font-size: 20px;
  color: #7683A2;
  letter-spacing: 4px;
}

input::-webkit-input-placeholder {
  color: #7683A2;
}

*:focus {
  outline-color: transparent;
  outline-style: none;
}

input:focus {
  opacity: 1;
  transition: all .15s $curve;
  margin-bottom: 39px;
  border-bottom: 3px solid rgb(246, 152, 116);
}

label.month {
  width: 35%;
  float: left;
}

label.year {
  width: 30%;
  float: left;
  margin-top: 18px;
  padding-left: 25px;
}

label.ccv {
  width: 20%;
  float: right;
}

.ccv input {
  text-align: center;
}
</style>
</head>
<body ng-app="paymentForm">
    <div class="wrapper">
        <div class="background"></div>
    </div>
    <div class="container">
        <div class="back-panel">
            <h1 class="card-type">visa</h1>
            <div class="order-total">
                <div class="product-title"> everlane </div>
                <span class="product-name"> The Twill Snap  <br> Backpack One </span>
                <div class="product-price">
                    <span> order total</span>
                    <div class="price">
                        <span> 87.41</span>
                    </div>
                </div>
            </div>
            <div class="save-confirm">
                <input type="checkbox" name="safe" id="safe-field" checked>
                <label for="safe-field">Save my information for later</label>
            </div>
            <div class="input-container">
                <section class="input-wrapper">
                    <div class="product-info-wrapper">
                        <div class="product-info">
                            <p> <i class="fa fa-search" aria-hidden="true"></i>mouseover for detailes</p>
                            <img src="http://www.blacksides.ru/upload/resize_cache/iblock/f23/218_274_1/f233d979dac82d3f26b2a1ad686fff06.jpg">
                            <div class="product-reviews">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </div>
                            <p class="reviews">see all reviews </p>
                        </div>
                    </div>
                    <div class="payment-form-wrapper">
                        <h1 class="small-card-type">visa</h1>
                        <form class="payment-form">
                            <div class="cardholder">
                                <label> Name
                                    <input value="Hannah Cochran" />
                                </label>
                            </div>
                            <div class="card-number">
                                <label class="">Credit Card Number
                                    <input  type="text" name="credit-card" ng-model="cardNumber" ui-mask=" 9999 - 9999 - 9999 - 9999" />
                                </label>
                            </div>
                            <div class="expires">
                                <label class="month"> expires
                                    <select >
                                        <option>January </option>
                                        <option>February</option>
                                        <option>March </option>
                                        <option>April </option>
                                        <option>May </option>
                                        <option>June </option>
                                        <option>July </option>
                                        <option>August </option>
                                        <option>September </option>
                                        <option>October </option>
                                        <option>November </option>
                                        <option>December </option>
                                    </select>
                                </label>
                              <label class="year">
                                <select >
                                    <option>2016</option>
                                    <option>2017</option>
                                    <option>2018</option>
                                    <option>2019</option>
                                </select>
                              </label>
                               <label class="ccv"> ccv
                                    <input  ui-mask="999" ng-model="ccv" />
                                </label>
                            </div>
                        </form>
                    </div>
                    <button class="buy-btn"> buy now</button>
                </section>
            </div>
        </div>
    </div>
</body>
      <script>
var app = angular.module("paymentForm", ["ui.mask"]);
    </script>
</body>
</html>
 

4. By Jose Santana

Made by Jose Santana. Checkout form with Two payment options. Source

JavaScript Checkout Form by jose santana
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  box-sizing: border-box;
}
 
html,
body {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  margin: 0 auto;
  background: #f4f4f4;
  justify-content: center;
  align-items: center;
}
.checkout-panel {
  margin: 100px;
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 740px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
}
.panel-body {
  padding: 45px 80px 0;
  flex: 1;
}
 
.title {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 40px;
  color: #2e2e2e;
}
.progress-bar {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}
.step {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block;
  width: 25px;
  height: 25px;
  margin-bottom: 30px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #efefef;
}
.step:after {
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 22px;
  width: 225px;
  height: 6px;
  content: '';
  background-color: #efefef;
}
.step:before {
  color: #2e2e2e;
  position: absolute;
  top: 40px;
}
.step:last-child:after {
  content: none;
}
 
.step.active {
  background-color: #f62f5e;
}
.step.active:after {
  background-color: #f62f5e;
}
.step.active:before {
  color: #f62f5e;
}
.step.active + .step {
  background-color: #f62f5e;
}
.step.active + .step:before {
  color: #f62f5e;
}
 
.step:nth-child(1):before {
  content: 'Delivery';
}
.step:nth-child(2):before {
  right: -40px;
  content: 'Confirmation';
}
.step:nth-child(3):before {
  right: -30px;
  content: 'Payment';
}
.step:nth-child(4):before {
  right: 0;
  content: 'Finish';
}
.payment-method {
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}
 
.method {
  display: flex;
  flex-direction: column;
  width: 382px;
  height: 122px;
  padding-top: 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: rgb(249, 249, 249);
  justify-content: center;
  align-items: center;
}
 
.card-logos {
  display: flex;
  width: 150px;
  justify-content: space-between;
  align-items: center;
}
 
.radio-input {
  margin-top: 20px;
}
 
input[type='radio'] {
  display: inline-block;
}
.input-fields {
  display: flex;
  justify-content: space-between;
}
 
.input-fields label {
  display: block;
  margin-bottom: 10px;
  color: #b4b4b4;
}
 
.info {
  font-size: 12px;
  font-weight: 300;
  display: block;
  margin-top: 50px;
  opacity: .5;
  color: #2e2e2e;
}
 
div[class*='column'] {
  width: 382px;
}
 
input[type='text'],
input[type='password'] {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-right: 40px;
  padding-left: 16px;
  color: rgba(46, 46, 46, .8);
  border: 1px solid rgb(225, 225, 225);
  border-radius: 4px;
  outline: none;
}
 
input[type='text']:focus,
input[type='password']:focus {
  border-color: rgb(119, 219, 119);
}
 
#date { background: url(img/icons_calendar_black.png) no-repeat 95%; }
#cardholder { background: url(img/icons_person_black.png) no-repeat 95%; }
#cardnumber { background: url(img/icons_card_black.png) no-repeat 95%; }
#verification { background: url(img/icons_lock_black.png) no-repeat 95%; }
 
.small-inputs {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
 
.small-inputs div {
  width: 182px;
}
.panel-footer {
  display: flex;
  width: 100%;
  height: 96px;
  padding: 0 80px;
  background-color: rgb(239, 239, 239);
  justify-content: space-between;
  align-items: center;
}
.btn {
  font-size: 16px;
  width: 163px;
  height: 48px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  letter-spacing: 1px;
  border: none;
  border-radius: 23px;
}
 
.back-btn {
  color: #f62f5e;
  background: #fff;
}
 
.next-btn {
  color: #fff;
  background: #f62f5e;
}
 
.btn:focus {
  outline: none;
}
 
.btn:hover {
  transform: scale(1.1);
}
.blue-border {
  border: 1px solid rgb(110, 178, 251);
}
.warning {
  border-color: #f62f5e;
}
</style>
</head>
<body>
  <div class="checkout-panel">
  <div class="panel-body">
    <h2 class="title">Checkout</h2>
 
    <div class="progress-bar">
      <div class="step active"></div>
      <div class="step active"></div>
      <div class="step"></div>
      <div class="step"></div>
    </div>
 
    <div class="payment-method">
      <label for="card" class="method card">
        <div class="card-logos">
          <img src="https://designmodo.com/demo/checkout-panel/img/visa_logo.png"/>
          <img src="https://designmodo.com/demo/checkout-panel/img/mastercard_logo.png"/>
        </div>
 
        <div class="radio-input">
          <input id="card" type="radio" name="payment">
          Pay 340.00 with credit card
        </div>
      </label>
 
      <label for="paypal" class="method paypal">
        <img src="https://designmodo.com/demo/checkout-panel/img/paypal_logo.png"/>
        <div class="radio-input">
          <input id="paypal" type="radio" name="payment">
          Pay 340.00 with PayPal
        </div>
      </label>
    </div>
 
    <div class="input-fields">
      <div class="column-1">
        <label for="cardholder">Cardholder's Name</label>
        <input type="text" id="cardholder" />
 
        <div class="small-inputs">
          <div>
            <label for="date">Valid thru</label>
            <input type="text" id="date"/>
          </div>
 
          <div>
            <label for="verification">CVV / CVC *</label>
            <input type="password" id="verification"/>
          </div>
        </div>
 
      </div>
      <div class="column-2">
        <label for="cardnumber">Card Number</label>
        <input type="password" id="cardnumber"/>
 
        <span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
      </div>
    </div>
  </div>
 
  <div class="panel-footer">
    <button class="btn back-btn">Back</button>
    <button class="btn next-btn">Next Step</button>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  // Radio box border
  $('.method').on('click', function () {
    $('.method').removeClass('blue-border');
    $(this).addClass('blue-border');
  });

  // Validation
  var $cardInput = $('.input-fields input');

  $('.next-btn').on('click', function (e) {

    $cardInput.removeClass('warning');

    $cardInput.each(function () {
      var $this = $(this);

      if (!$this.val()) {
        $this.addClass('warning');
      }
    });

  });

});
    </script>
</body>
</html>

5. By Danny

Made by Danny. JavaScript Checkout form with Sidebar Image. Source

JavaScript Checkout Form by Danny
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700'>
  
<style>
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
/*   border: 1px solid black; */
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 10% 0;
  position: relative;
  min-height: 100vh;
  background: #34495e;
  display: flex;
  justify-content: center;
    animation: fadein 5s;
  animation-fill-mode: forwards;
}

.fadeIn {
  animation: fadein 5s;
  animation-fill-mode: forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

label {
  display: block;
}
/* Model Container */

.model {
  width: 900px;
  height: 700px;
  background: white;
/*   font-size: 0; */
  color: white;
  position: relative;
/*   animation: slideInFromLeft 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
  animation-fill-mode: forwards;
}

.model:after {
    width: 30px;
    content: 'X';
    height: 30px;
    color: black;
    position: absolute;
    text-align: center;
    padding-top: 3px;
    top: 0;
    right: -30px;
    background-color: #bdc3c7;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.room {
  width: 50%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1470274038469-958113db2384?auto=format&fit=crop&w=1875&q=80) no-repeat center center;
  background-size: cover;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.text-cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px
}

.text-cover > * {
  margin: 10px 0;
}

.text-cover h1 {
  font-size: 1.8rem;
}

.text-cover .price {
  color: #e67e22;
}

.text-cover .price span {
  font-size: 1.4rem;
  font-weight: 700;
}

.payment {
  width: 50%;
  height: 100%;
  color: #34495e;
  display: inline-block;
}

.receipt-box {
  padding: 20px 20px;
  border-bottom: 1px solid #34495e;
}

.receipt-box h3,
.payment-info h3 {
  margin-bottom: 2rem;
}

.payment-info {
  padding: 20px;
}


input[type=text]{
    width: 100%;
    padding: 8px 10px 10px;
    margin: 15px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn {
  padding: 15px 25px;
  border: none;
  color: white;
  width: 100%;
  display: block;
  background: #9b59b6;
  text-transform: uppercase;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}
 
.table td {
  font-size: 0.8rem;
  font-style: italic;
  padding: .25rem;
  vertical-align: top;
    
}


.table td:nth-child(2) {
  text-align: right;
}
</style>
</head>
<body>
  <body>
  <div class="model">
    <div class="room">
      <div class="text-cover">
        <h1>Danny's House</h1>
        <p class="price"> 120.00 <span>USD</span> / Night</p>
        <hr>
        <p>Entire Home for 1 guest</p>
        <p>Tues, Oct 2, 2017 to Friday, Oct 5, 2017</p>
      </div>
    </div><div class="payment">
      <div class="receipt-box">
        <h3>Reciept Summary</h3>
        <table class="table">
          <tr>
            <td>120 x 2 nights</td>
            <td>240.00 USD</td>
          </tr>
          <tr>
            <td>Discount</td>
            <td>0 USD</td>
          </tr>
          <tr>
            <td>Subtotal</td>
            <td>240 USD</td>
          </tr>
          <tr>
            <td>Tax</td>
            <td>10 USD</td>
          </tr>
          <tfoot>
            <tr>
              <td>Sum</td>
              <td>$180</td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="payment-info">
        <h3>Payment Info</h3>
        <form>
        <label>Name on Credit Card</label>
        <input type="text" name="firstname" value="Mickey">
        <label>Credit Card Number</label>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input class="btn" type="submit" value="Book Securly">
      </form>
      </div>
    </div>
  </div>
</body>
      <script>
var model = document.querySelector(".model");

function fadeIn() {
  console.log('fadein');
  model.className += " fadeIn";
}
    </script>
</body>
</html>

6. By Jessica Danby

Made by Jessica Danby. Credit Card Checkout Form. Source

JavaScript Checkout Form by Jessica Danby
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,700);

body {
	font-family: 'Roboto', san-serif;
	background-color: #D7FEDB;
	height: 100%;
	width: 100%;
	min-width: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	position: absolute;
}

.container {
	width: 1000px;
	background-color: #FFF;
	box-shadow: 0 0 20px 0 #457F4B;
}

.breadcrumbs {
	background-color: #61B269;
	color: #FFF;
	display: flex;
	font-size: 14px;
	position: relative;
}

.breadcrumb-item {
	padding-left: 30px;
}

.breadcrumb-item:first-child {
	padding-left: 10px;
}

.breadcrumb-item .number {
	display: block;
	background-color: #457F4B;
	width: 8px;
	height: 16px;
	border-radius: 15px;
	padding: 6px 10px;
	float: left;
	margin: 13px 0 0 10px;
}

.breadcrumb-item .label {
	display: block;
	padding: 20px 0 20px 10px;
	float: left;
}

.breadcrumb-item::after {
	content: '';
	display: block;
	width: 35px;
	height: 35px;
	transform: rotate(130deg) skew(-10deg);
	float: right;
	position: relative;
	top: 10px;
	left: 19px;
	border-top: 1px solid #457F4B;
	border-left: 1px solid #457F4B;
	background-color: #61B269;
}

.breadcrumb-item.current,
.breadcrumb-item.current::after{
	background-color: #457F4B;
}

.breadcrumb-item.current .number {
	background-color: #61B269;
}

.product {
	margin-left: 30px;
	padding: 20px;
	width: 400px;
	float: left;
}

.product img {
	width: 200px;
	float: left;
	margin-right: 20px;
}

.product h3 {
	font-family: 'Roboto Condensed', san-serif;
	margin: 15px 0 0;
	text-decoration: underline;
}

.product p {
	margin: 0;
}

.product .details {
	margin-top: 20px;
}

.product .information {
	line-height: 1em;
	position: relative;
	right: 3px;
	margin-top: 20px;
}

.product .information td {
	vertical-align: top;
}

.product .label {
	font-weight: bold;
}

.product .break {
	padding-bottom: 20px;
}

form {
	float: right;
	background-color: #EEE;
	width: 360px;
	padding: 60px 80px 46px;
}

.cc-info {
	display: flex;
}

.cc-info input, .cc-info label {
	padding-left: 2px;
}

.input-group {
	height: 50px;
	margin: 0 0 20px;
}

.month{
	width: 65px;
	margin-right: 10px;	
}

.year {
	width: 65px;
	margin-right: 90px;
}

.slash {
	width: 15px;
}

.ccv {
	width: 113px;
}

label, input {
	display: block;
	width: 100%;
	height: 30px;
	font-size: 16px;
}

label {
	z-index: 1;
	transition: opacity 0.2s ease-in-out;
	color: #666;
}

input {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 2px solid #61B269;
	position: relative;
	top: -37px;
	background-color: transparent;
	transition: border-bottom 0.2s ease-in-out;
}

input:focus {
	outline: none;
}

button {
	display: block;
	background-color: #457F4B;
	border: 0;
	color: #FFFFFF;
	font-size: 18px;
	padding: 10px 20px;
	transition: background-color 0.2s ease-in-out;
	outline: none;
	float: right;
}

button:hover {
	cursor: pointer;
	background-color: #61B269;
}


.fadeOut {
	opacity: 0;
}

.fadeIn {
	opacity: 1;
}
</style>
</head>
<body>
<div class="container">
	
	<div class="breadcrumbs">
		<div class="breadcrumb-item">
			<span class="number">1</span>
			<span class="label">Name & Address</span>
		</div>
		<div class="breadcrumb-item">
			<span class="number">2</span>
			<span class="label">Shipping</span>
		</div>
		<div class="breadcrumb-item current">
			<span class="number">3</span>
			<span class="label">Payment</span>
		</div>
		<div class="breadcrumb-item">
			<span class="number">4</span>
			<span class="label">Review Order</span>
		</div>
	</div>
	
	<div class="product">
		<img src="https://image.rakuten.co.jp/footmonkey/cabinet/newbalance/nb-wl555-sj-1.jpg">
		<h3>555 New Balance</h3>
		<p>$69.99</p>
		
		<table class="information">
			<tr>
				<td class="label">Style #:</td>
				<td>WL696CCA</td>
			</tr>
			<tr>
				<td class="label break">Color:</td>
				<td>Grey & mint</td>
			</tr>
			<tr>
				<td class="label">Subtotal:</td>
				<td>$69.99</td>
			</tr>
			<tr>
				<td class="label">Tax:</td>
				<td>$5.60</td>
			</tr>
			<tr>
				<td class="label break">Shipping:</td>
				<td>$5.00</td>
			</tr>
			<tr>
				<td class="label">Total</td>
				<td class="label">$80.59</td>
			</tr>
		</table>
	</div>
	
	<form>
		<div class="input-group">
			<label for="cc-number">Credit Card Number</label>
			<input type="text" name="cc-number">
		</div>

		<div class="cc-info">
			<div class="input-group month">
				<label>Month</label>
				<input type="number" name="exp-month" min="1" max="12">
			</div>

			<label class="slash">/</label>

			<div class="input-group year">
				<label>Year</label>
				<input type="number" name="exp-year" min="2016" max="2025">
			</div>

			<div class="input-group ccv">
				<label for="ccv">Security Code</label>
				<input type="number" name="ccv">
			</div>
		</div>
		
		<button>Next</button>
	</form>
</div>
      <script>
var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  inputs[i].addEventListener('focus', function () {
    this.previousSibling.previousSibling.classList.remove('fadeIn');
    this.previousSibling.previousSibling.classList.add('fadeOut');
  });

  inputs[i].addEventListener('blur', function () {
    if (!this.value.length) {
      this.previousSibling.previousSibling.classList.remove('fadeOut');
      this.previousSibling.previousSibling.classList.add('fadeIn');
    }
  });
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

7. By Eric Figueroa

Made by Eric Figueroa. Gucci Backpack Checkout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

body {
  font-family: poppins, arial, sans-serif;
  background-color: whitesmoke;
}

.modal {
  width: 96%;
  max-width: 1000px;
  height: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  overflow: hidden;
  background-color: white;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
}
.modal .modal-product {
  width: 40%;
  height: 100%;
  float: left;
  position: relative;
}
.modal .modal-product .product {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.modal .modal-product .product .product-slideshow {
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}
.modal .modal-product .product .product-slideshow .productSlides {
  display: none;
}
.modal .modal-product .product .product-slideshow .dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 5px;
  position: relative;
  top: -36px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  /* Fading animation */
}
.modal .modal-product .product .product-slideshow .dot.active {
  background-color: white;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
}
.modal .modal-product .product .product-slideshow .dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.modal .modal-product .product .product-slideshow .dot .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.modal .modal-product .product .product-name {
  color: #111;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 2rem;
  text-align: center;
  margin-top: -22px;
}
.modal .modal-product .product .product-code-name {
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  margin: 8px auto 5px;
}
.modal .modal-product .product .product-price {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.18rem;
  text-align: center;
}
.modal .modal-product .round-shape {
  width: 125%;
  height: 150%;
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #cdb196;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.modal .modal-info {
  width: 60%;
  height: 100%;
  float: right;
  position: relative;
}
.modal .modal-info .info {
  width: 90%;
  height: 85%;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(0%, -50%);
}
.modal .modal-info .info h2 {
  font-size: 2.25rem;
  margin-left: 1rem;
}
.modal .modal-info .info form .form-list {
  margin-top: 1.5rem;
  margin-left: 3.5rem;
}
.modal .modal-info .info form .form-list .form-list-row {
  margin: 1rem 0;
}
.modal .modal-info .info form .form-list .form-list-row label {
  font-size: 1rem;
}
.modal .modal-info .info form .form-list .form-list-row input {
  width: 70%;
  font-size: 1rem;
  padding: 0.4rem 0;
  border: none;
  display: inline-block;
  border-bottom: solid 2px #999;
  background-color: transparent;
  transition: all 0.3s ease;
}
.modal .modal-info .info form .form-list .form-list-row input:focus {
  border-color: #cdb196;
}
.modal .modal-info .info form .form-list .form-list-row .user .fa-user {
  color: #999;
  font-size: 1rem;
}
.modal .modal-info .info form .form-list .form-list-row .user input {
  position: relative;
  left: -16px;
  padding-left: 30px;
}
.modal .modal-info .info form .form-list .form-list-row .number .fa-credit-card {
  color: #999;
  font-size: 1rem;
}
.modal .modal-info .info form .form-list .form-list-row .number input {
  position: relative;
  left: -20px;
  padding-left: 30px;
}
.modal .modal-info .info form .form-list .form-list-row .date {
  float: left;
}
.modal .modal-info .info form .form-list .form-list-row .date input {
  width: 60px;
  text-align: center;
}
.modal .modal-info .info form .form-list .form-list-row .date .year {
  margin-left: 1.5rem;
}
.modal .modal-info .info form .form-list .form-list-row .cvc {
  float: left;
  margin-left: 6rem;
  text-align: center;
}
.modal .modal-info .info form .form-list .form-list-row .cvc .fa-question-circle {
  color: dodgerblue;
  display: inline-block;
  position: relative;
  left: 0.75rem;
}
.modal .modal-info .info form .form-list .form-list-row .cvc input {
  width: 70px;
  text-align: center;
}
.modal .modal-info .info form .form-list .form-list-row .checkbox {
  margin-top: 2rem;
}
.modal .modal-info .info form .form-list .form-list-row .checkbox input {
  width: auto;
}
.modal .modal-info .info form .form-list .form-list-row .checkbox span {
  font-size: 0.8rem;
}
.modal .modal-info .info form button {
  color: white;
  font-size: 1rem;
  margin-left: 1rem;
  padding: 1rem 2.5rem;
  position: absolute;
  bottom: 0;
  border: none;
  border-radius: 3px;
  background-color: #cdb196;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}
.modal .modal-info .info form button:hover {
  background-color: #b59779;
}
</style>
</head>
<body>
  <!-- Font Awesome Link -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="modal clearfix">
    <div class="modal-product">
      <div class="product">

        <!-- Slideshow container -->
        <div class="product-slideshow">

          <!-- Full-width images with number and caption text -->
          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-1.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-2.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-3.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-4.png?raw=true" style="width:100%">
          </div>

          <div class="productSlides fade">
            <img src="https://github.com/EricGFigueroa/002-DailyUI-Gucci-Checkout/blob/master/img/gucci-bag-5.png?raw=true" style="width:100%">
          </div>

          <br>

          <!-- The dots/circles -->
          <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
            <span class="dot" onclick="currentSlide(4)"></span>
            <span class="dot" onclick="currentSlide(5)"></span>
          </div>

        </div>

        <h1 class="product-name">
          Gucci Tian GG<br>Supreme Backpack
        </h1>
        <p class="product-code-name">
          Style β€Ž428027 K0LCN 8685
        </p>
        <p class="product-price">
          $1,590
        </p>

      </div>

      <div class="round-shape"></div>
    </div>
    <div class="modal-info">
      <div class="info">
        <h2>Payment Information</h2>
        <form action="#">
          <ul class="form-list">
            <li class="form-list-row">
              <div class="user">
                <label for="#">Name</label><br>
                <i class="fas fa-user"></i></i><input type="text" required>
              </div>
            </li>
            <li class="form-list-row">
              <div class="number">
                <label for="#">Card Number</label><br>
                <i class="far fa-credit-card"></i><input type="text" required>
              </div>
            </li>
            <li class="form-list-row clearfix">
              <div class="date">
                <label for="#">Expiration Date</label><br>
                <input class="month" type="text" required placeholder="MM">
                <input class="year" type="text" required placeholder="YY">
              </div>
              <div class="cvc">
                <label for="#">CVC</label><i class="fas fa-question-circle"></i><br>
                <input type="text" required placeholder="123">
              </div>
            </li>
            <li class="form-list-row">
              <div class="checkbox">
                <label for="checkbox">
                  <input id="checkbox" type="checkbox">
                  <span>Remember My Information</span>
                </label>
              </div>
            </li>
          </ul>
          <button>Pay Now</button>
        </form>
      </div>
    </div>
  </div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("productSlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    slides[i].style.display = "none";
  }window.CP.exitedLoop(0);
  for (i = 0; i < dots.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    dots[i].className = dots[i].className.replace(" active", "");
  }window.CP.exitedLoop(1);
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
    </script>
</body>
</html>

8. By Mhammed El-Sayed

Made by Mhammed El-Sayed. Product Credit Card Checkout Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body,html {
  height:100%;
  margin:0;
  font-family:lato;
}

h2 {
  margin-bottom:0px;
  margin-top:25px;
  text-align:center;
  font-weight:200;
  font-size:19px;
  font-size:1.2rem;
  
}
.container {
  height:100%;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  background:-webkit-linear-gradient(#c5e5e5, #ccddf9);
  background:linear-gradient(#c9e5e9,#ccddf9);
}
.dropdown-select.visible {
  display:block;
}
.dropdown {
  position:relative;
}
ul {
  margin:0;
  padding:0;
}
ul li {
  list-style:none;
  padding-left:10px;
  cursor:pointer;
}
ul li:hover {
  background:rgba(255,255,255,0.1);
}
.dropdown-select {
  position:absolute;
  background:#77aaee;
  text-align:left;
  box-shadow:0px 3px 5px 0px rgba(0,0,0,0.1);
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  width:90%;
  left:2px;
  line-height:2em;
  margin-top:2px;
  box-sizing:border-box;
}
.thin {
  font-weight:400;
}
.small {
  font-size:12px;
  font-size:.8rem;
}
.half-input-table {
  border-collapse:collapse;
  width:100%;
}
.half-input-table td:first-of-type {
  border-right:10px solid #4488dd;
  width:50%;
}
.window {
  height:540px;
  width:800px;
  background:#fff;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2);
  border-radius:30px;
  z-index:10;
}
.order-info {
  height:100%;
  width:50%;
  padding-left:25px;
  padding-right:25px;
  box-sizing:border-box;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  position:relative;
}
.price {
  bottom:0px;
  position:absolute;
  right:0px;
  color:#4488dd;
}
.order-table td:first-of-type {
  width:25%;
}
.order-table {
    position:relative;
}
.line {
  height:1px;
  width:100%;
  margin-top:10px;
  margin-bottom:10px;
  background:#ddd;
}
.order-table td:last-of-type {
  vertical-align:top;
  padding-left:25px;
}
.order-info-content {
  table-layout:fixed;

}

.full-width {
  width:100%;
}
.pay-btn {
  border:none;
  background:#22b877;
  line-height:2em;
  border-radius:10px;
  font-size:19px;
  font-size:1.2rem;
  color:#fff;
  cursor:pointer;
  position:absolute;
  bottom:25px;
  width:calc(100% - 50px);
  -webkit-transition:all .2s ease;
          transition:all .2s ease;
}
.pay-btn:hover {
  background:#22a877;
    color:#eee;
  -webkit-transition:all .2s ease;
          transition:all .2s ease;
}

.total {
  margin-top:25px;
  font-size:20px;
  font-size:1.3rem;
  position:absolute;
  bottom:30px;
  right:27px;
  left:35px;
}
.dense {
  line-height:1.2em;
  font-size:16px;
  font-size:1rem;
}
.input-field {
  background:rgba(255,255,255,0.1);
  margin-bottom:10px;
  margin-top:3px;
  line-height:1.5em;
  font-size:20px;
  font-size:1.3rem;
  border:none;
  padding:5px 10px 5px 10px;
  color:#fff;
  box-sizing:border-box;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.credit-info {
  background:#4488dd;
  height:100%;
  width:50%;
  color:#eee;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  font-size:14px;
  font-size:.9rem;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  box-sizing:border-box;
  padding-left:25px;
  padding-right:25px;
  border-top-right-radius:30px;
  border-bottom-right-radius:30px;
  position:relative;
}
.dropdown-btn {
  background:rgba(255,255,255,0.1);
  width:100%;
  border-radius:5px;
  text-align:center;
  line-height:1.5em;
  cursor:pointer;
  position:relative;
  -webkit-transition:background .2s ease;
          transition:background .2s ease;
}
.dropdown-btn:after {
  content: '\25BE';
  right:8px;
  position:absolute;
}
.dropdown-btn:hover {
  background:rgba(255,255,255,0.2);
  -webkit-transition:background .2s ease;
          transition:background .2s ease;
}
.dropdown-select {
  display:none;
}
.credit-card-image {
  display:block;
  max-height:80px;
  margin-left:auto;
  margin-right:auto;
  margin-top:35px;
  margin-bottom:15px;
}
.credit-info-content {
  margin-top:25px;
  -webkit-flex-flow:column;
      -ms-flex-flow:column;
          flex-flow:column;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  width:100%;
}
@media (max-width: 600px) {
  .window {
    width: 100%;
    height: 100%;
    display:block;
    border-radius:0px;
  }
  .order-info {
    width:100%;
    height:auto;
    padding-bottom:100px;
    border-radius:0px;
  }
  .credit-info {
    width:100%;
    height:auto;
    padding-bottom:100px;
    border-radius:0px;
  }
  .pay-btn {
    border-radius:0px;
  }
}
</style>
</head>
<body>
  <div class='container'>
  <div class='window'>
    <div class='order-info'>
      <div class='order-info-content'>
        <h2>Order Summary</h2>
                <div class='line'></div>
        <table class='order-table'>
          <tbody>
            <tr>
              <td><img src='https://dl.dropboxusercontent.com/s/sim84r2xfedj99n/%24_32.JPG' class='full-width'></img>
              </td>
              <td>
                <br> <span class='thin'>Nike</span>
                <br> Free Run 3.0 Women<br> <span class='thin small'> Color: Grey/Orange, Size: 10.5<br><br></span>
              </td>

            </tr>
            <tr>
              <td>
                <div class='price'>$99.95</div>
              </td>
            </tr>
          </tbody>

        </table>
        <div class='line'></div>
        <table class='order-table'>
          <tbody>
            <tr>
              <td><img src='https://dl.dropboxusercontent.com/s/qbj9tsbvthqq72c/Vintage-20L-Backpack-by-Fj%C3%A4llr%C3%A4ven.jpg' class='full-width'></img>
              </td>
              <td>
                <br> <span class='thin'>FjΓ€llrΓ€ven</span>
                <br>Vintage Backpack<br> <span class='thin small'> Color: Olive, Size: 20L</span>
              </td>
            </tr>
            <tr>
              <td>
                <div class='price'>$235.95</div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class='line'></div>
        <table class='order-table'>
          <tbody>
            <tr>
              <td><img src='https://dl.dropboxusercontent.com/s/nbr4koso8dpoggs/6136C1p5FjL._SL1500_.jpg' class='full-width'></img>
              </td>
              <td>
                <br> <span class='thin'>Monobento</span>
                <br>Double Lunchbox<br> <span class='thin small'> Color: Pink, Size: Medium</span>
              </td>

            </tr>
            <tr>
              <td>
                <div class='price'>$25.95</div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class='line'></div>
        <div class='total'>
          <span style='float:left;'>
            <div class='thin dense'>VAT 19%</div>
            <div class='thin dense'>Delivery</div>
            TOTAL
          </span>
          <span style='float:right; text-align:right;'>
            <div class='thin dense'>$68.75</div>
            <div class='thin dense'>$4.95</div>
            $435.55
          </span>
        </div>
</div>
</div>
        <div class='credit-info'>
          <div class='credit-info-content'>
            <table class='half-input-table'>
              <tr><td>Please select your card: </td><td><div class='dropdown' id='card-dropdown'><div class='dropdown-btn' id='current-card'>Visa</div>
                <div class='dropdown-select'>
                <ul>
                  <li>Master Card</li>
                  <li>American Express</li>
                  </ul></div>
                </div>
               </td></tr>
            </table>
            <img src='https://dl.dropboxusercontent.com/s/ubamyu6mzov5c80/visa_logo%20%281%29.png' height='80' class='credit-card-image' id='credit-card-image'></img>
            Card Number
            <input class='input-field'></input>
            Card Holder
            <input class='input-field'></input>
            <table class='half-input-table'>
              <tr>
                <td> Expires
                  <input class='input-field'></input>
                </td>
                <td>CVC
                  <input class='input-field'></input>
                </td>
              </tr>
            </table>
            <button class='pay-btn'>Checkout</button>

          </div>

        </div>
      </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var cardDrop = document.getElementById('card-dropdown');
var activeDropdown;
cardDrop.addEventListener('click', function () {
  var node;
  for (var i = 0; i < this.childNodes.length - 1; i++) {if (window.CP.shouldStopExecution(0)) break;
    node = this.childNodes[i];}window.CP.exitedLoop(0);
  if (node.className === 'dropdown-select') {
    node.classList.add('visible');
    activeDropdown = node;
  };
});

window.onclick = function (e) {
  console.log(e.target.tagName);
  console.log('dropdown');
  console.log(activeDropdown);
  if (e.target.tagName === 'LI' && activeDropdown) {
    if (e.target.innerHTML === 'Master Card') {
      document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/2vbqk5lcpi7hjoc/MasterCard_Logo.svg.png';
      activeDropdown.classList.remove('visible');
      activeDropdown = null;
      e.target.innerHTML = document.getElementById('current-card').innerHTML;
      document.getElementById('current-card').innerHTML = 'Master Card';
    } else
    if (e.target.innerHTML === 'American Express') {
      document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/f5hyn6u05ktql8d/amex-icon-6902.png';
      activeDropdown.classList.remove('visible');
      activeDropdown = null;
      e.target.innerHTML = document.getElementById('current-card').innerHTML;
      document.getElementById('current-card').innerHTML = 'American Express';
    } else
    if (e.target.innerHTML === 'Visa') {
      document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/ubamyu6mzov5c80/visa_logo%20%281%29.png';
      activeDropdown.classList.remove('visible');
      activeDropdown = null;
      e.target.innerHTML = document.getElementById('current-card').innerHTML;
      document.getElementById('current-card').innerHTML = 'Visa';
    }
  } else
  if (e.target.className !== 'dropdown-btn' && activeDropdown) {
    activeDropdown.classList.remove('visible');
    activeDropdown = null;
  }
};
    </script>
</body>
</html>

9. By rajeshdn

Made by rajeshdn. Credit Card Checkout Form with Product Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
  background: #ffd262;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 550px;
  height: 400px;
  display: flex;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.slider_container{
  width: 45%;
  height: 100%;
  background: #ffc32d;
  text-align: center;
}

.slider_container h3{
  margin-top: 30px;
  color: #fff;
  text-transform: uppercase;
}

.checkout_container{
  width: 55%;
  height: 100%;
  background: #fff;
  padding: 30px;
}

.checkout_container h3{
  margin-bottom: 25px;
  text-transform: uppercase;
  text-align: center;
}

.checkout_container .input_item,
.checkout_container .item{
  margin-bottom: 10px;
}

.checkout_container .input_item label{
  display: block;
  margin-bottom: 5px;
}

.checkout_container .input_item  input[type="text"]{
  width: 100%;
  border: none;
  background: #f2f2f2;
  padding: 10px;
}

.checkout_container  .btn{
  background:  #ffc32d;
  padding: 10px;
  margin-top: 15px;
}

.checkout_container  .btn a{
  display: block;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* bxslider */
.bx-wrapper{
  background: transparent !important;
  border: none !important;
  box-shadow: 0 0 !important;
  margin-top: 30px !Important;
}


.bx-wrapper .bx-pager.bx-default-pager a{
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !Important;
}

.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover{
  background: #fff !important;
}
</style>
</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />


<div class="wrapper">
  <div class="slider_container">
    <h3>your cart</h3>
    <ul class="bxslider">
  <li><img src="https://i.imgur.com/1mJWEZb.png" /></li>
  <li><img src="https://i.imgur.com/XASvbYf.png" /></li>
  <li><img src="https://i.imgur.com/dQJu1dt.png" /></li>
</ul>
  </div>
  <div class="checkout_container">
    <h3>credit card details</h3>
    <div class="form">
      <div class="input_item">
        <label>Name</label>
        <input type="text">
      </div>
      <div class="input_item">
        <label>Card number</label>
        <input type="text">
      </div>
      <div class="input_item grp">
        <div class="item">
          <label>Expiry date</label>
          <input type="text">
        </div>
        <div class="item">
          <label>CVV</label>
          <input type="text">
        </div>
      </div>
      <div class="btn">
        <a href="#">Proceed</a>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>
      <script>
$(document).ready(function () {
  $('.bxslider').bxSlider({
    controls: false });

});
    </script>
</body>
</html>

10. By Meghan

Made by Meghan. Minimalistic payment form. Source

JavaScript Payment Form by Meghan
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<style>
body {
  background: #FEF8F8;
}
.amex {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACi1BMVEUAAAAAAAAAdKIAdqcGdqoDeqkDeKoDe6sFeqoFeqwCeqoGe6wGeasGeqwGe6wFeqwFeqwFeqsGe6oFeawEeqwEeqwFe6wHeaoFe6oFeasFe6wFeawHe6wIfKwJfKwKfa0Lfa0Mfq0Of64Pf64QgK8RgK8Sga8TgbAUgrAVgrAWg7EXg7EYhLEZhLIahbIbhbIdhrMfh7QgiLQhiLQjirUkirUli7YnjLYojLcqjbcsj7gtj7kukLkvkLkwkbkxkboykrozkro0k7s1k7s2lLs3lLw4lbw5lbw6lr07lr08l709l75Amb9Bmr9Dm8BFnMBHncFIncFJnsJKnsJLn8JMn8NNoMNOocRPocRQosRRosVUpMZVpMZWpcZXpcdYpsdZp8dap8dbqMheqclgqslhq8pjrMpkrMtnrsxpr8xqr81tsc5vss5wss9xs89ztNB0tdB1ttF6uNJ8udN9utN+utR/u9SAu9SBvNWCvNWDvdWEvdWGvtaHv9aIv9eKwNeMwdiPw9mQw9mRxNqTxdqUxtuVx9uWx9yXyNyYyNyZyd2ayd2byt2cyt6dy96fzN+gzN+hzd+izeCjzuCkzuCn0OGp0eKq0eKr0uOs0+Ot0+Ov1OSw1eSy1uWz1uW01+W32Oa62ui72+i82+i+3Om/3enC3urE3+vF4OvH4ezI4uzJ4u3K4+3L4+3N5O7O5e7P5e/R5u/S5/DT5/DV6PHW6fHX6fHY6vHa6/Lb7PPc7PPd7fPe7fTf7vTg7vTi7/Xj8PXk8fbm8vbn8vfo8/fp8/fq9Pjr9Pjs9fjt9fnu9vnv9vnw9/rx9/ry+Prz+Pv0+fv1+fv2+vz4+/z5+/37/P38/f7+/v7///+B6xdgAAAAHHRSTlMAARYaJ0FIT1pcYG6YmZyssrPDys3T2tvt9PX+1nJQbwAAAnFJREFUOMtjYOAWESMWiAqwMzBwyZAEOBn4SdMgzCBImgYJUjVI0UeDkoGBrq6BgZ6MhgECqAA56nJ6ICZIWN3AQAeuoevIrvOHDuy6ZLl1366ru3ft2nVl167dJ08cOXHo/P6Dl3Yd33Nm15mdJw+thGnQO2ei2nzDRaZp405Zmd2KxhYWW2TMTeUmJOWv0NOPKVJ1uNEi4329LByuoXKaabvZNZcQw8u5IUANrYuX7pA5eNSxJCk/OPfGBe2ZKotbnAw6kTSs8Axslpnh0mtRr74YqME7LGaHjI6G4uakfOfGG21q3c5hLf7TNDMQGhqUMjN9vFz6O2TCjgA11M+Zs13m4oXIvKT8bOs+i7DMNJks/xuhcggNKQ3b+vfGpS65kLTqVNyRpLi4uP1xl6d09jRPPF+blHC29WB+SsX5PXF1cA0lE/1lWiZOnFg2saZrIgxkgojiyr6JZTLxQFZ5ycSJpRTHdOAmMMiM2Agk103esGnTxiWzwELTVwOJyes29aFqiFtrCQR+x05FuVpaWqcfA3I8FlQDyandjpaWh5KtLI3RNCxTA8ZypHewb7vNrvWKk2QW7wiIzU3YteusXtXWrQvllm+diK5BRl6+4JyW2omJ2qkRiqtknN2VF+UCxWbmKCi5b3GU1fRE16B+4cK5RCe3pH6z6bP3nZOZsyYoMzftwsWrp4+skZt/4kA1mqfjVqgAgcORw/Z23kejg86r7JxXm1AIFOqzVdFLAEoahaNqiDgMBplZQGKNjC6QbD0MA3vmAomN5XTLcaQASQZe0jSIM3CQpoGPgZFHmgT1QkwMDAzMrOxEAjYWBgYAvI9h1MHdhQIAAAAASUVORK5CYII=") #fff;
}

.visa {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAABvFBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e0mM3onNHspNXkqN30rN30sOH4tN3ovO4AwPIAyPoE1QYM3Q4Q4Q4U4RIU5RYY8R4g9SIhCTYtDToxGUY5HUo5JU49JVJBOWJJQW5RSXJVTXZZVX5dXYZhYYplaY5pfaJ1kbaBlbqFoaZFocaNpcqNqc6RtdqZvd6dzcpV0fKp2f6x5ga18g698hK99hK99hbB+hrCAh7GDi7OHjrWIj7aJkLeNk7mNlLqOlbqRl7yUmr6WnL6YnsCbocKepMSjqMekqceprsqrsMysscytss2uss2xts+xttC0uNG1udK1utK2utK3u9O6vdS7v9W8wNa9wda9wdfBxNnDx9rEx9vFyNzFydvHy93Kzd/Mz+DR0+LS1OPT1uTVnV/V1+XX2ebY2NjZuJbZ2+faoVza3Ojc3+rf4evf4ezi5O7j5e7n6fHp6/Lq6/Lr7PPsmC3snTfs7fPunjnu7/Tu7/Xw8fbx8vfy8/f09fj09fn19vn29/r3z5332LH39/r42LD42bL42bP5+fv76tX77dz7+/v7+/387dv9/f7+9ev//v3///9+dhG/AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABbklEQVQ4y+WUV1cTYRQAlwSIsxoLltgLKgZ7AwV777FiL9gT1x4FGxpb0Gg0On/YBx83D+wz8z7nu+fe800QpNKtpTHSmk4FQUt7pu4YqWfaW4L0BBOQSQdt9SRCvS0omYjSOBZ+fB0d/f5T/VQoDHi6cF4b1/Zt6d9fUZ+cLFyMvfDny6vhN3/1EOwegW4/LAHgpb6bBpNr8ZE2PBz+rQvIvrgJ2+2DdaeOba7pXoBbceHAxHvfHIRNHoHjLobLqlZnkIeDcaHIlAeuh6Jb4bb9EG58rh6G4nTWNNnSHFYNZcnrcsKK1d4Qpl63MY9lrmRmE6GHcCdc0Q7mqt5ZAfM9C7uKvfA0LlyASSzUt7Daz+pIyGw7+c+JuPAxCxzV+7DHrq5tOzqhbxA6crlcSE+TS+dhVk0vwRk7AFhb64a76lIWva7EhKEoKqvvo6jqs6sD526UNYoeq5ajR78a4/k/JM5M4pAlTGUqSBrjf5znrWNE0ZcCAAAAAElFTkSuQmCC") #fff;
}

.mastercard {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACc1BMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3MAADMAQHMBATNCQnOCwvODAzODg7PDwnPERHRGxvSFgfSHh7SHx/SIB7THhDTJCTTJibTJyfUKSnVIAXVLS3VMDDWMjLWNTXWNjbXIQDXLyLXNS7XNzfXOzvYLxbYPT3YPj7Y2NjZOy/ZRUXaSEjaSUnbLQDbLgDbS0vbTU3cSj/cU1PdNADdSjTdVVXdVlbeNwDeW1vfYmLgUDPgZWXgZmbgaGjhXkvhamrhbW3ia2Lib2/jXDfja1njdXXkeHjkeXnke3vlgIDlgYHmg4PmhITmhobnh4fniIjni4voVgDojIzokJDqXADqaiTqlpbqmJjqmZnqmprrnJzrn5/tpqbuqqrura3urq7vsbHvsrLvs7PwbADwbQDwtLTwtbXwt7fxvLzycgDyjULyvr7yv7/zdQDzmVvzn2fzxMTzxcXzx8f2fwD21tb3gQD3x6/3ybL32Nj4hAD43t7439/44OD5iQD54eH54uL65ub65+f76+v7+/v88vL89PT99/f9+Pj9+fn+lwD+/f3/mQD/mgT/nQv/nw//oRT/oRX/oRb/ohj/qCf/qSn/qSr/qy3/rDH/rjX/rjb/sT7/sj//s0L/tEX/tUf/tUj/tkn/t0v/uVD/uVH/u1X/vFj/vVr/vl7/v2H/w2n/xGz/x3P/yHb/yXr/zob/z4j/0Iv/1Zj/1pr/153/2J7/26X/3q7/4LL/4LP/4bX/4bb/5cD/5sL/58P/58T/58X/6sz/7NH/7dL/8d7/8t//9OX/9eb/9ef/9ur/9+v/+vT/+/X//Pj//fz///90HdR0AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABmElEQVQ4y2NgYGJm0SISsDAzMTAwsrG3XiAStLKzMTIwc1wgAbAzM7C2kqKhlZVB6wJJQItSDS3R5orSmo7pPUD2+d2r506bvWzLKdwaOr14OSFAMuXCzqm9ENC//hwODc2KnHDAVdCLALNOYNXQLo9QzylgGoykY+YZbBqckNSrpKamdSPpWINFQw03kgZhJSUlSyQNfUcxNfjzyfFISUDUi5WCQO+EOZOgGmZswNSgY3VBpyPOxJZf1d4uWdxZW9k45+SBtStWTVowffH8o/MxNUgHNsY0entmxrW5R6VnhNb6NlVu6p247uCOs3sOH941DYuG9MTa3JCiGp+S+CzdrrziBOuK5b1L9x8/tG3vko0bsWjQafCKaIhNqon0qyvzqApyKZMtPLZl8/bTR1Zv3Xd6JRYnBeiJChkJGqppWIgoKKi7mTnIVC9YPHnhnHlTJiyaM3EDgWANz87OLicQrCgRx6VvYJBPIOJQk4ZNWD3BpIGS+DhdCSc+0pM3JAOpkpCBaJOnSS5mSC7ISCwqgYUriYUxAINRRW57ksG5AAAAAElFTkSuQmCC") #fff;
}

.discover {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACLlBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3vzbDvzbEBAQECAgIDAwMTExMUFBQWFhYYGBgZGRkeHh4jIyMmJiYnJycpKSksLCwtLS0uLi4wMDAzMzM0NDQ3Nzc6Ojo8PDw/Pz9CQkJDQ0NHR0dJSUlKSkpMTExOTk5PT09RUVFWVlZYWFhcXFxgYGBiYmJjY2Nra2tsbGxtbW1wcHBxcXF0dHR1dXV2dnZ3d3d4eHh8fHx9fX1+fn6AgICBgYGCgoKDg4OLi4uMjIyPj4+VlZWWlpabm5udnZ2enp6fn5+hoaGjo6OoqKirq6usrKyvr6+wsLCysrKzs7O4uLi7u7u8vLy9vb2/v7/AwMDBwcHExMTGxsbHx8fJycnLy8vQ0NDR0dHS0tLU1NTW1tbY2NjZ2dnb29vd3d3f39/h4eHi4uLn5+fo6Ojp6enr6+vs7Ozt7e3v7+/x8fHy8vL1giD1giH1gyP1hCT1iS31ii71izD1jDL2kTv2kjz2kz/2lED2lkP2lkT2l0X2mUn2pmH2pmL3m033n1X3oVf3pF73pV739/f4q2n4q2r4rWz4r3D4r3H4sXT4s3f5uoT5u4b5vov5+fn6xJb6yJ36yqD6zKT6+vr7zqj70a372Ln7+/v83sT838b84Mj84sv848785M/85dD89O78/Pz959X96Nb969z9/f3+8+r+9e7+9u/+9/H++PP++vb++vf+/Pn+/Pr+/fz+/v7////OeAUcAAAAC3RSTlMAGxuq7e7u+vv7+w/+RoMAAAGnSURBVDjLY2BgYmZJJRKwMDMxMDCysS/YSSRYwM7GyMDMsZMEwM7MwLqAFA0LWBlSd5IEUumkwc7A0HPBTuvcTAN13535FuqWJTsXdrdP2+IZuHOnR6iNgYHVDgMDsySEBin3QE2NnWJpKk6x8T1iDsku6UvKSktL+4Kld84RzBb3Co9ZyRPnJYikIXHnAr5ssTR9hYCVIfIg8UmlILBCOMFfa6e4jWvQWh5/e0kUDTuFMsTSpvvI6gUog8QngzVsdDRVC9spbu7st5bbmL8ASUNEipEi0ElRRQEyhYL+K/2Tl5cD1U/cmSMgsXOneHRe3krenSpuCA26ckp2xTu1s2xFZSJ3JqiJqKbvXNrbOWPrzp0m3jt36sjJyS2Q35ms0rNz53wSg3VRI2kaVlc1kKRhVU0pSRoWVZaSpGF2RSkpGjZNAMcM0RoW15aSomE9JOKJ1bB1VnUpCRq2z6srLSVew+ZZyMoJalgzpbq0lGgNG+Z2lGKAplQcxcy6uV3lpVhAKyuWgmzLwqktpTgAJzNaUblt2cz+xnocoLmNiw1YuJJYGAMAEKBGzN/0FVAAAAAASUVORK5CYII=") #fff;
}

.expiry-date-group {
  float: left;
  width: 50%
}

.expiry-date-group input {
  width: calc(100% + 1px);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.expiry-date-group input:focus {
  position: relative;
  z-index: 10;
}

.security-code-group {
  float: right;
  width: 50%
}

.security-code-group input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.zip-code-group {
  clear: both;
}

#PayButton {
  outline: 0!important;
  height: 42px;
  font-size: 16px;
  background-color: #54C7C3!important;
  border: none;
}

#PayButton:hover {
  background-color: #6DCECB!important;
}

#PayButton:active {
  background-color: #4FBCB9!important;
}

#PayButton:disabled {
  background: rgba(84, 199, 195, .5)!important;
  color: #FFF!important;
}

.container {
  margin-top: 50px;
}

#Checkout {
  z-index: 100001;
  background: ;
  width: 50%;
  min-width: 300px;
  height: 100%;
  min-height: 100%;
  background: 0 0 #ffffff;
  border-radius: 8px;
  border: 1px solid #dedede;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#Checkout>h1 {
  margin: 0;
  padding: 20px;
  text-align: center;
  background: #EEF2F4;
  color: #5D6F78;
  font-size: 24px;
  font-weight: 300;
  border-bottom: 1px solid #DEDEDE;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#Checkout>form {
  margin: 0 25px 25px;
}

label {
  color: #46545C;
  margin-bottom: 2px;
}

.input-container {
  position: relative;
}

.input-container input {
  padding-right: 25px;
}

.input-container>i, a[role="button"] {
  color: #d3d3d3;
  width: 25px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
  text-align: center;
}

.input-container>i:hover, a[role="button"]:hover {
  color: #777;
}
.amount-placeholder {
  font-size: 20px;
  height: 34px;
}

.amount-placeholder>button {
  float: right;
  width: 60px;
}

.amount-placeholder>span {
  line-height: 34px;
}

.card-row {
  text-align: center;
  margin: 20px 25px 10px;
}

.card-row span {
  width: 48px;
  height: 30px;
  margin-right: 3px;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: contain;
}

.card-image {
  background-repeat: no-repeat;
  padding-right: 50px;
  background-position: right 2px center;
  background-size: auto 90%
}

.cvc-preview-container {
  overflow: hidden;
}

.cvc-preview-container.two-card div {
  width: 48%;
  height: 80px;
}

.cvc-preview-container.two-card div.amex-cvc-preview {
  float: right;
}

.cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {
  float: left;
}

.cvc-preview-container div {
  height: 160px;
}

.amex-cvc-preview {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAYAAAAlzXSMAAAAAXNSR0IArs4c6QAAFg9JREFUeNrtnfeTFcXaxw+ZBZacM0oGySBIXECiSBQQAQFhJaclo+SgAsuS2QVBlrCLSlQBAVGCCpK5XiW4vFVvvXX/gPvDe9+qt+r2Pd9eeuiZ6TkBzuI563erPgVn5jk93T397X76mTndPl+Qv0+v3I/PuHW/MiEkMkBTvnD/3vr883wZdx6NyriX9XXmvax/Zt57LAghkSbrn9AYtAbNBRTlwTuP22Tce/wbK42QFwc0B+0ZRXno9h8D/Ab/YkUR8qeI81/QoE2U++8+apF59/H/soII+RPxaxBaVLrMk3k36yYrhpBoEGfWTWjSl3H30ZusEEKiyK31a9IvzMfprAxCokmYj9N9B289/Acrg5DoAZr0Zdz54/9ZGYRE0Yjp16SPFUFI9EFhEkJhEkIoTEIoTEIIhUkIhUkIoTAJoTBZCYRQmIQQCpMQCpMQQmESQmESQihMQihMEsFfn2eJTad+ENvP/8z6iEIO3flDpHx9QWw5c1kcuv0o4vYxJcx1R06LPHnzSuJLlhLp13832jVt38myA/O27radT0pJtZ1v1qGLda5VQnfbOROVatay7Nt072W0KRRXRJSuUFG07NJNLE//wnb9es1bSZvqdeq78p588rxo0q6D/L7P55PEFYsXvUeOFXt/vudZN598eSqkumnbo4+0yV+goPyO83zF6jXl+b6jxwe8F60SXg9eTzWy62lx2n6RN18+eaxByzay09HTavJaR+s7i9PSjfWK7xcoVEiWrU6T5mL6J5uN5fK6Dy06dxPLPjts+86rr/cOWobyVavZvoOy4PoFCxe27g/y1q5nX5HyzfeueoJ93aYtXPbIL4SaK4SJxqkKByav3mC0e6VtB5td73fG2M73HD7adh4NQ53DDdTPmahQrYatgQazhwhWZxy3voMbheNVX65jy9f0jzfZbqATNJJdl26a68ZfRt12yhpz3aAxKhvkwykSXAPn+owaF/BeoMMJWk9Vq1v2nfsPto6/v/wj6/iMdVus4x3fGGAdb921R9D0xy9ZbSyXF/nyFxArDxx92ql26xn0O2UrVbbsl+7NlKJ6ml5+m22p8hVE2sUblj06At3GZV+uvEj74XpsC3P/jd9F0eIlbAXDyBOKMJ0CqFzzJW9hduoqjxUrUVKsPfyVkfXHvnUJs0h8/FObzJNixf4vRbchw61roIdU30GP68xX6ve/iLiixeTxkmXLiVnJ26UIMYK26/WGlU7XwcOeq26cDThx2dpnEqbqwHDdUOpp95XbokSZstZ30CDhAaBx4lh8qdK2TsdZr2syT8iG3n/cRKuB4zvKLVTlKlykqOs+vD70Hau8EKNTmPBIvMqw7ugZy755x4Qn+S8uVh86Jju1fdf+LgZOmGKlPyhxqqstoQyrDh6V9um//CYGJj61x3djWphwXVRh2vd50/q/fvOdwqxet75lt/PCNXkOczZ1rEa9Bp4jJhpRKPlSDQgulmte4W80ELjMi+a2mkbM7m+NsPKFRuicn6AsaNCv9e7nrhv/SBtq3TiFifzpggh3xCxRumzI93DWhm220VH3gKau3RhyveojHeZserkgAtP8rnjpMvJ8lZdqu9JBHYSSf9WeXm7c1JV+w1avSjd98MTp1nHVvl5q+IrbvnXbbPv3p8W2MBu3bS8LWa1OPbHju6vS/ze5qbowMV8sV7mKzbWD+6vcLNWj5ZQw0eDhPuF8sw6dAwoT8zHlXpqugxHH6Xaa6gYdT6C6UQ1YdRigy4C3XogwnS6qyqdeN047U7126DvASkN1KoGEiborULCgPI+28azC1N1xeCRwpbd+e9nTHvUajn3MCXPz6UtWAUfMWmAFeJRb4Qx06MLs3H+I/H+nNwfJc/gXnxMGDQsoTIDAgQm9d1fCRGCi39hESd9R70mXs0zFylZaSSk7PYV58NZDyz3r2G9geHVz6qKrblAer7pRDRi9Na6lvrt83+fPPMf0rqdk1/fQqUI8+ndNjVUJE2WAO7/hxDnpPg6blmTVlT6HVeXCfN55HzBPVNebuX6rceT1KsOkless+61nr9g6NAWmRhj59Pnls9jHnDDht8seNk8esf3cTy73zRkE0oU5edV6a2KOc4jQZbtOyUGF6YV+s4IFfzCi6MEOkzC3nf3xaaDK7949c908ebQSqG50YWKep+amGG3RQUQy+DNxxSdG916fYmC+HWxkNYHy6p1dsOAPXNkJS9Z4usReJC5d4xokMOdHR2wKCqKj1O3hamP6YbT3dyxO+5gRJvxxJSbcUMy/AHp45SbWbdbSU5jojfVRS/0fjdgoTC34s3L/ESN6JE0fMfu/N0mOQqpHR8+48/trrjI5hXng5gPLrTPNIT3rxt/ITXWTHQ0sYAwC6cLEZzQ8VScjkxaGLUwIO5R6UoyYOd/VQJ2CCdThYRRD3udv22MsF1xW3Ad4Ruo+YJqAkdprrorgj1cZEJQzlf+zq7+K2Rt3iB7DR8lOX+WvVsPGnvZof3gioNvXbNAoNoU5f9unQXs1oEfPdGHic7kqVS0h4F88q9NFaBLm88wxP9h1wAqrl6lQyfWSgGmOid5W3qj6DY3XeXvmPOmeobGEWzd6EMgpTMxbVX7Q6OE6hhOVDWeOCZdUzfXQOPFdKYyixaTbZ6pXdJCIZIJAD+ZNc8wlezIsceJ68ExMwgxljokOFp7S8BlzRfKJ87ZzyFujNu2s+t59+ZYUdCB7FRcAOenS5pgwdXcD8wcn6lyvEe96ClOfhAM8xvAUZoSCP4jOqeshAqcHboJFZdGgnEEkPBqQvX/NWlZaodaNHgRyClO9nKA/n8uJ4A/yjNFbpT9nU5qc75keWQUL/oQqTDB0ymzrGvVbtrbdh3CEiY7D1NYUqC/rCYBfxPr0BKOk0x4vcKjzptE8qoWJXidYUKRq7bpPAx3+nsgkTBWJVUz7KCWoMJHeotR9nuDZYSBhYr4GN8XkrpmEiV5TjVZoXIjgrT9+Vr4JA/dIpTN24TKrBw+rbp4EgUzCBP3GTAhLmOHW05gFS43PdPW5qv5MNVC0OxxhYpR9qVET6xrjFq9wu7L+ETtQGVTdwZtR81uMhHhzB3PE8R+usjwB5Y1J+yf3X9pPn5Nt75+j4t6qOaf+skrMCPOd2QutClWvajkZPfeDp4GOVeuNwtR7L72HUo0r3OCPmqMG69nxCqGa66HBqPmm15s/GEUw3/G6Jhof5txyrjZrQXh18yQIBFGYhIk5kB69jETwR9bTuZ9kYywUF2cJWZ9347x6sQL/Kncz3BFTlcv0uAQdnPIgUL/q/ocS/NGflcKzMAVx9Mc/+twX9z+4/aexJ0z47XgLBg/nVYN0gpEG8zjY4f1KHEPUDJ/xqETZ4aEwjunPCREgwDE8lHceC4ZqXHCT8Rmjkyl/EJD6jmrsaNT4DBfXaY9GgEamgjrobRG8wEiJIJGyw3fDqRuIGsfgxut1pTN3yy4rr0MmzQj6TC+kerpwTY7o6rPqPHUwgqjz6plqsHp1ospVpdbLxvMj5yyyrtHz7WzXEo/MQimDPjfFfBH3R3k36lU/zBmd7+KqebWXPV7x469LYpBPr9zxi/E+6yKK7w+mW5i25IQ9hUkIf49JCKEwCaEwCSEUJiGEwiSEwiSEUJiEUJiEEAqTEAqTEEJhEkIoTEIoTEIIhUkIhUkIoTAJoTAJIRQmIYTCJITCJIRQmIRQmIQQCpMQCpOQP53Dtx6IIxdvRD+Xbsq8UpgkV3N29wHxt4FDRFar1uK/mjePCZDXXwcOlnmnMEmu4+e5i2JGjF6gDBQmyTWc2XfYNQo96JIQEzhHd5SFwiS5gtujx1oN+/qUGeLwk705Y2I+7M8r8qzyj7JQmCRX8LBjJ6thf3nldszlH3lW+X/YqTOFSXIHuivIMlCYhMKkMAmhMClMQmFSmIRQmBQm+YsLc89Pd0WVl2qLWg0bu87NWLdFNG7bXlSqWUs0fvU1+Vk/v/n0JdHpzUGiWp16omHrtmLq2o2e15m7ZZcoU6GSSBg4lMIkFGYg0n/5TTTvmCB8Pp8oUaas7Vzi0jXyOIgvVdr6P47jfNrFGyK+ZCl5rHjpMtb5sQuXua6z69JNmT7Ot+zSjcIkFKYXszZsE2UqVrYE5RRmlVovy+PTP9ksP4+as1h+rl63vvwMAeJzh74DRMbdLDFp5Tr5GaOn81pte/SxrkNhEgozgB0EVqBgQdFvzASXMCG0aR+liJFJC8WBm/flsaV7M6Vdxeo1Lbvt536SIyf+//7yj+T5Zh262K6DdJSgKUxCYQZp1GMWLhVbzlwWySfOG0dMJ537D5F2pjli6649RP4CBUWpcuXFx19881S4538WRYsXl3PYmeu3UpiEwgy1UYcizOHT50ibQnFF5CjpnKcWLFxYnkeQaMH2vda5Zh06izx584rVh46JuZvTKExCYUZKmEMmzZDn4fYu3PGZ6zzcXrBi/5fSDiPn1rNXxIQl2cGjnsNHi92Xb1kuLcSKzxQmoTCfUZhDp8y2RsoPdx90CRKu6t6f79nmrbDHY5UWnbtZAR8Tau5KYRIK08CGE+eMwkxK2SmP582XT4ry0O1HFjiPuSbOv/HuePn50yt3RL78BeSxlfuPiIGJU+SzT0X1OtmixSMWfD546yGFSSjMcEfMmvUbGkc6BHNwHuKDaHGsYatXZbQW/2/Qso04dOcP4wsGnGMSCjPERp3yzfeiZNlyoka9Btaxrd9elhFWHHeCCKsuNvW8s3CRoqJz/8Ge88dFqfvk92FDYRIK8wWQfv13Oefku7KE8CV2CpNQmBQmIRQmhUlyF/e797Aa9bGzV2Iu/8izyj/KQmGSXMGNxElWw743ZKj46tiZ2NgiwQ/yijyr/KMsFCbJFZz8+oLIatUq5ldiRxlQFgqT5Bq+25wmstq0iV1R+vOOMkSqPihMEjUcP3NJXJ09T24s9CCha/RvkeDPI/KKPCPvkawLCpOQKITCJITCJIRQmIRQmIQQCpMQCjM4+KEplnXoO3q8ixGzFojPrv7NZr/q4FGjbb+xicYlIYbPmGu0x3GszK3brz38lfyVuivtMRPEwp37nquc646cluno6aZ+/4un/bvzl5jzPX2O63eA+AGwM22AsuDX+aafLo2cs8hajjEUBiVOdaU/YPxkkfbDdZvduMUrjMcjwfSPNxnrBOCcyd50P6es2eCyxdIhgydOd9lidYJNp35w2c9K3m5Me+KKT1w/C8N9HjJ5pjvtCVPkvYtKYeIGFihUyHO9lN7vjLHZ939vkqdtvvz5bSubQXhYw8XLPmHQMOO6LyawAhp+aPus5YQQnGliqQtjZ3X7kW3FbydYVFi3f++DlQHXnMHKbbq9Wkxq6tpkWwcZSKhFi5dw10mePK7OEPUEFqelR1yYccXiPcuIc7otFtMKVCezN+6w2ddv2drTFj+Q1m3VurNe6PUKmrbv5GlbtlLl6HVlsVgRRkYnpcpXkCuNOe1NtuOXrJYFXb7vc0faD4z2FarVkEtDuNP+1WWLHhZp45fpz1NOlTZG60DCBFgnxpTv2k2aiaq167rs9137u8t2/rY9TxqKfZ8N1BGOT1613jr29sx5ch0bLNHoJcxWCd1t6WPkdTUMj/VYIwE6WXRKznLiGM45PQ7VKem28FxwHPdAt0dHiC0UnGljvxJ0QLqt2lJhyZ4Mmy1GVhyHd6Hbl6tcRTRq086Vdve3Rkh7Uz1G9RyzdIWKRmGaQCMzCdOLSjVqGYVpAkvsR0KYitFzPwgqTC/qNmtpW/IiEGg4oQqz/7iJ8pjXchkQZpvuvYJeE43Y6YlEUpjt+7zpOo5jXsJcd/SM7Tg2B/ISJjoeZ9ooi5cwnZ4IXFYch/vrFOYrbTu40u414t3YFCbWTQlVmBNXfByWML1GTBNYojAWhfnBrgMvXJimKUIkhYmFs96ZvdAGjlGYOSRMTJixMBIqDmDugky36/WG0X7Pj3cs282nLlqbucBVCZb28vQv5DzIaxUzzE31tDu+MUCmjcDTixSmLR9PwBZyps1slIuv22J+juvM27o7IsJEJ6nSxkLHpmUZc1KYanU6EyEL038/KcwwgF9uqnDMk5y2+2/8bgwY1WzQyLhQkprTOYGLaooSm4IMGKVMSxXmlDD7jBong1mmfKOjMH2nXJWqLlusAIf6ioQwnWmjwTkjyzkpTHQ8G7/6zkWLTl0pzJwSZvLJ87Ky8DgAdBsy3BiVVWArNGU7dOpsuZcE1v5E2Ntpi0k5ghvKHkvZI+2ug80NCFE1ZTtsWpIMtuDmmMLmz4La5g3C3PHdVf8cqb/YdvZHV8cDV1vlQ4EgF4JIpnQRadRtX27cNLsBZRw3ChMjEFxjgPm8qVHpedbTfn3YyGxxr97gEmaJ0mWtdBX1mreSUe+cEOxrvfs9tzCxLyaFGaJrWyQ+3rXVmRdqD0O4qaHOX7F4bzjz10g9AtBHTBU5TUpJtc5j1MIxjGLPcx21uQ320nA+r4UHoFOsRElpi8YSStpolPrmrrowcd+c6WMtVtR5tAqTIyajsi9MmF5RWRPBXNlQhekVlUWjR+PPiXbCqOxfVJhqv8O/ojCxkQ48BWegJ9CI+aKFGdaISWGGBuZT2EIbE3gn2A7N+ZbLnE1pcnclpy2WvUch9c1E0ZiwTL0p7UJxcfKBsvNtEVPaiIQibbwx86zlRJQZUWCkB9dO7YOh5oEmYeKRjinv4xYtt88Z/e67SlunTpPmMp25ISxd4SVMtcUcXvbQ08acUd8eXR8xy1So5MoL5p05Icz1x8/Khu8Uptr1GZ2vng886MdxbGar25evWk3m0ZlvlCWuaDHXq35IA3Wg20J8OD5i5nybPWIU2GDImTbyja381OZFUSVM7JyEhmraOwLPp9ZmnrSPNvM+NO41gQpEQML5pg0eLZjSxo5M2CxGt0dgBQ3QaYuRG2+zPE9UFiO6KW0AASK6aAnzym2jnaLn26NdIzry6LTD9dCxBdoGTk8DbxU5Gwk6N8yxa7/S1FbvuF6bbj1dbwq169nXeH9wzHl/IsHSPZmygTufsWKkR+N35gWf8Yoc6thZfgTDXPemanWRuGyt/V1jf5mxs7TzfiJt7O7ljFSjY0Rw0pk2OgPERvjrEkL46xJCCIVJCKEwCaEwCSEUJiEUJiGEwiSEwiSEUJiEUJisBEIoTEIIhUkIhUkIoTAJoTAJIRQmIX9tYR649YAVQUgUAU36sHQDK4OQ6AGa9G0+ffH/WBmERA/QpG/ZZ59nsTIIiR6gSV/Spp2bd164xgohJAqAFqFJ3+wN29su3LFXpF//jRVDyJ8INAgtQpM+/PkVehILGXvtQkwIyWFR+rUHDUKLPvU3c2NqpaSUnf+zYPtese3cj8Yt8AghkQdag+agPWgQWvTpf7OSU1/xn/jvOZtS5Q7GySfOibSLN+RehtiTgRASGaApaAsag9agOWgPGvSZ/makpFTwGxxK2pT6bxgTQnIWaA2ag/Z8wf5mJW9tNGfjjmX+L13w8yApJfUfhJAIAU35tQWNQWsmDf4HqpjHZRJqxUwAAAAASUVORK5CYII=") center center/contain no-repeat;
}

.visa-mc-dis-cvc-preview {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=") center center/contain no-repeat;
}

.submit-button-lock {
  height: 20px;
  margin-top: -2px;
  margin-right: 7px;
  vertical-align: middle;
  background: url("data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC") center center/contain no-repeat;
  width: 14px;
  display: inline-block;
}

.align-middle {
  vertical-align: middle;
}

input {
  box-shadow: none!important;
}

input:focus {
  border-color: #b0e5e3!important;
  background-color: #EEF9F9!important;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="container">
  <div id="Checkout" class="inline">
      <h1>Pay Invoice</h1>
      <div class="card-row">
          <span class="visa"></span>
          <span class="mastercard"></span>
          <span class="amex"></span>
          <span class="discover"></span>
      </div>
      <form>
          <div class="form-group">
              <label for="PaymentAmount">Payment amount</label>
              <div class="amount-placeholder">
                  <span>$</span>
                  <span>500.00</span>
              </div>
          </div>
          <div class="form-group">
              <label or="NameOnCard">Name on card</label>
              <input id="NameOnCard" class="form-control" type="text" maxlength="255"></input>
          </div>
          <div class="form-group">
              <label for="CreditCardNumber">Card number</label>
              <input id="CreditCardNumber" class="null card-image form-control" type="text"></input>
          </div>
          <div class="expiry-date-group form-group">
              <label for="ExpiryDate">Expiry date</label>
              <input id="ExpiryDate" class="form-control" type="text" placeholder="MM / YY" maxlength="7"></input>
          </div>
          <div class="security-code-group form-group">
              <label for="SecurityCode">Security code</label>
              <div class="input-container" >
                  <input id="SecurityCode" class="form-control" type="text" ></input>
                  <i id="cvc" class="fa fa-question-circle"></i>
              </div>
              <div class="cvc-preview-container two-card hide">
                  <div class="amex-cvc-preview"></div>
                  <div class="visa-mc-dis-cvc-preview"></div>
              </div>
          </div>
          <div class="zip-code-group form-group">
              <label for="ZIPCode">ZIP/Postal code</label>
              <div class="input-container">
                  <input id="ZIPCode" class="form-control" type="text" maxlength="10"></input>
                  <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Enter the ZIP/Postal code for your credit card billing address."><i class="fa fa-question-circle"></i></a>
              </div>
          </div>
          <button id="PayButton" class="btn btn-block btn-success submit-button" type="submit">
              <span class="submit-button-lock"></span>
              <span class="align-middle">Pay $500.00</span>
          </button>
      </form>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
      <script>
$(function () {
  $('[data-toggle="popover"]').popover();

  $('#cvc').on('click', function () {
    if ($('.cvc-preview-container').hasClass('hide')) {
      $('.cvc-preview-container').removeClass('hide');
    } else {
      $('.cvc-preview-container').addClass('hide');
    }
  });

  $('.cvc-preview-container').on('click', function () {
    $(this).addClass('hide');
  });
});
    </script>
</body>
</html>

11. By Jesper Strange Klitgaard Christiansen

Made by Jesper Strange Klitgaard Christiansen. Shopping Cart Checkout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
/*** Shadows ***/
/*** Follow ***/
a.follow {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  color: #fff !important;
  z-index: 9999;
  font-family: "Helvetica";
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.5;
}
a.follow svg {
  vertical-align: middle;
  margin-right: 5px;
}
a.follow span {
  display: none;
}
a.follow:hover {
  opacity: 1;
}
a.follow:hover span {
  display: inline;
}

body {
  font-family: "Open Sans", arial;
}

html, body {
  min-height: 100%;
  height: 100%;
  background: #f4f4f4;
}

.demo-container {
  display: table;
  width: 100%;
  height: 100%;
}

.demo-container-inner {
  display: table-cell;
  vertical-align: middle;
}

.contents {
  width: 80%;
  margin: auto;
}

.s10 {
  height: 10px;
}

h1 {
  margin-bottom: 40px;
  font-weight: 300;
  color: #999;
}

.flipable {
  perspective: 80;
  position: relative;
  display: inline-block;
}
.flipable .flipable-group {
  transition: 0.3s;
  transform-origin: center;
  transform-style: preserve-3d;
}
.flipable .flipable-group > *:nth-child(1), .flipable .flipable-group > *:nth-child(2) {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 2;
  top: 0;
  left: 0;
}
.flipable .flipable-group > *:nth-child(1) {
  position: relative;
  z-index: 1;
}
.flipable .flipable-group > *:nth-child(2) {
  transform: rotatex(180deg);
  position: absolute;
}
.flipable.flipped .flipable-group {
  transform: rotatex(180deg);
}
.flipable.flipped .flipable-group > *:nth-child(1) {
  pointer-events: none;
}
.flipable.flipped .flipable-group > *:nth-child(2) {
  z-index: 10;
}

.form-control {
  border-color: #000;
  border-width: 0 0 1px 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  padding: 0.375rem 0;
}
.form-control:focus {
  border-color: #000;
  outline: 0;
}

.btn:focus, .btn:active {
  outline: 0 !important;
  box-shadow: none !important;
}

.card {
  border-color: #ccc;
}
.card .card-title {
  color: #fc5830;
}

.cart-price {
  font-size: 1.5rem;
}

.add-to-cart span, .remove-from-cart span {
  pointer-events: none;
}

.add-to-cart {
  background-color: #fc5830;
  border-color: #fc5830;
}
.add-to-cart:hover, .add-to-cart:active, .add-to-cart:focus, .add-to-cart:active:focus {
  background-color: #fc4417;
  border-color: #fc4417;
}

.remove-from-cart {
  background-color: #0da58e;
  border-color: #0da58e;
}
.remove-from-cart:hover, .remove-from-cart:active, .remove-from-cart:focus, .remove-from-cart:active:focus {
  background-color: #ed1c24;
  border-color: #ed1c24;
}

.checkout-form {
  color: white;
  padding: 20px;
  z-index: 998;
  top: 50px;
  right: 10px;
  background-color: #fff;
  transition: right 0.5s;
  position: absolute;
  width: 390px;
  color: white;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  transition: -webkit-clip-path 0.2s;
  transition: clip-path 0.2s;
  transition: clip-path 0.2s, -webkit-clip-path 0.2s;
  border-radius: 0 0 3px 3px;
}

.btn-submit {
  background-color: #0da58e;
}

.btn-checkout {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 10px;
  right: -60px;
  z-index: 999;
  background-color: #0da58e;
  border-radius: 3px;
  transition: all 0.2s;
  overflow: hidden;
  cursor: pointer;
}
.btn-checkout > .cart-icon {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  line-height: 50px;
  color: white;
}
.btn-checkout span:nth-child(2) {
  position: absolute;
  left: 0;
  line-height: 50px;
  color: white;
  width: 390px;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
}
.btn-checkout > .close-cart-icon {
  display: none;
}
.btn-checkout:hover {
  width: 390px;
}

.enable-checkout .btn-checkout {
  right: 10px;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: black;
  z-index: 989;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.card-wrapper {
  opacity: 0;
  transition: opacity 0.1s;
}

body.open-checkout .overlay {
  opacity: 0.8;
  pointer-events: initial;
}
body.open-checkout .btn-checkout {
  width: 390px;
  border-radius: 3px 3px 0 0;
}
body.open-checkout .checkout-form {
  -webkit-clip-path: inset(0 0 0% 0);
          clip-path: inset(0 0 0% 0);
}
body.open-checkout .checkout-form .card-wrapper {
  opacity: 1;
}

.jp-card-logo.jp-card-amex {
  text-transform: uppercase;
  font-size: 4px;
  font-weight: bold;
  color: white;
  background-image: repeating-radial-gradient(circle at center, #FFF 1px, #999 2px);
  border: 1px solid #EEE;
}

.jp-card-logo.jp-card-amex:before {
  height: 28px;
  content: "american";
  top: 3px;
  text-align: left;
  padding-left: 2px;
  padding-top: 11px;
  background: #267AC3;
}

.jp-card-logo.jp-card-amex:after {
  content: "express";
  bottom: 11px;
  text-align: right;
  padding-right: 2px;
}

.jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before {
  background-color: #108168;
}

.jp-card-logo.jp-card-discover {
  background: #FF6600;
  color: #111;
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  padding-top: 9px;
  letter-spacing: 0.03em;
  border: 1px solid #EEE;
}

.jp-card-logo.jp-card-discover:before {
  background: white;
  width: 200px;
  height: 200px;
  border-radius: 200px;
  bottom: -5%;
  right: -80%;
  z-index: -1;
}

.jp-card-logo.jp-card-discover:after {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  top: 10px;
  left: 27px;
  background-color: #FF6600;
  background-image: radial-gradient(#FF6600, #fff);
  content: "network";
  font-size: 4px;
  line-height: 24px;
  text-indent: -7px;
}

.jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before {
  background-color: #86B8CF;
}

.jp-card.jp-card-discover.jp-card-identified .jp-card-front:after {
  transition: 400ms;
  content: " ";
  display: block;
  background-color: #FF6600;
  background-image: linear-gradient(#FF6600, #ffa366, #FF6600);
  height: 50px;
  width: 50px;
  border-radius: 25px;
  position: absolute;
  left: 100%;
  top: 15%;
  margin-left: -25px;
  box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, 0.5);
}

.jp-card-logo.jp-card-visa {
  background: white;
  color: #1A1876;
}

.jp-card-logo.jp-card-visa:before {
  background: #1A1876;
}

.jp-card-logo.jp-card-visa:after {
  background: #E79800;
}

.jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before {
  background-color: #191278;
}

.jp-card-logo.jp-card-mastercard {
  color: white;
  font-weight: bold;
  text-shadow: none !important;
}

.jp-card-logo.jp-card-mastercard:before,
.jp-card-logo.jp-card-mastercard:after {
  border-radius: 18px;
}

.jp-card-logo.jp-card-mastercard:before {
  background: #FF0000;
}

.jp-card-logo.jp-card-mastercard:after {
  background: #FFAB00;
}

.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before {
  background-color: #0061A8;
}

.jp-card-logo.jp-card-maestro {
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}

.jp-card-logo.jp-card-maestro:before {
  background: #0064CB;
}

.jp-card-logo.jp-card-maestro:after {
  background: #CC0000;
}

.jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before {
  background-color: #0B2C5F;
}

.jp-card-logo.jp-card-dankort {
  border-radius: 8px;
  border: #000000 1px solid;
  background-color: #FFFFFF;
}

.jp-card-logo.jp-card-dankort .dk:before {
  background-color: #ED1C24;
  border-radius: 6px;
}

.jp-card-logo.jp-card-dankort .dk:after {
  border-style: solid;
  border-width: 7px 7px 10px 0;
  border-color: transparent #ED1C24 transparent transparent;
}

.jp-card-logo.jp-card-dankort .d,
.jp-card-logo.jp-card-dankort .k {
  background: white;
}

.jp-card-logo.jp-card-dankort .d:before {
  background: #ED1C24;
  border-radius: 2px 4px 6px 0px;
}

.jp-card-logo.jp-card-dankort .k:before {
  border-width: 8px 5px 0 0;
  border-color: #ED1C24 transparent transparent transparent;
}

.jp-card-logo.jp-card-dankort .k:after {
  border-width: 0 5px 8px 0;
  border-color: transparent transparent #ED1C24 transparent;
}

.jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before {
  background-color: #0055C7;
}

.jp-card-logo.jp-card-elo .o {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  right: 0;
  top: 7px;
  border-radius: 100%;
  background-image: linear-gradient(yellow 50%, red 50%);
  transform: rotate(40deg);
  text-indent: -9999px;
}

.jp-card-logo.jp-card-elo .o:before {
  content: "";
  position: absolute;
  width: 49%;
  height: 49%;
  background: black;
  border-radius: 100%;
  text-indent: -99999px;
  top: 25%;
  left: 25%;
}

.jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before {
  background-color: #6F6969;
}

.jp-card .jp-card-front,
.jp-card .jp-card-back {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 2px solid white !important;
}

.jp-card .jp-card-front:before,
.jp-card .jp-card-back:before {
  border-radius: 10px;
}

.jp-card .jp-card-front .jp-card-display,
.jp-card .jp-card-back .jp-card-display {
  color: white;
  font-weight: normal;
  opacity: 1;
}

.jp-card .jp-card-front .jp-card-shiny,
.jp-card .jp-card-back .jp-card-shiny {
  background: rgba(255, 255, 255, 0.5) !important;
}

.jp-card .jp-card-front .jp-card-shiny:before,
.jp-card .jp-card-back .jp-card-shiny:before {
  background: rgba(255, 255, 255, 0.5) !important;
}

.jp-card .jp-card-back .jp-card-bar {
  background-color: #444;
  background-image: linear-gradient(#444, #333);
}

.jp-card .jp-card-back:after {
  background-color: #FFF;
  background-image: linear-gradient(#FFF, #FFF);
}

.jp-card .jp-card-back .jp-card-shiny:after {
  content: "This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free.AIt comes with no warranty.A For support issues, please visit: github.com/jessepollak/card.";
  position: absolute;
  left: 120%;
  top: 5%;
  color: white;
  font-size: 7px;
  width: 230px;
  opacity: 0.5;
}

.jp-card.jp-card-identified {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.jp-card.jp-card-identified .jp-card-front,
.jp-card.jp-card-identified .jp-card-back {
  background-color: rgba(0, 0, 0, 0.5);
}

.jp-card.jp-card-identified .jp-card-front .jp-card-logo,
.jp-card.jp-card-identified .jp-card-back .jp-card-logo {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.jp-card.jp-card-identified .jp-card-front:before,
.jp-card.jp-card-identified .jp-card-back:before {
  background-image: none !important;
}
</style>
</head>
<body>
  <div class="btn-checkout">
  <span class="fa fa-shopping-cart cart-icon"></span>
  <span>continue to checkout</span>
</div>
<div class="checkout-form">
  <div class="card-wrapper">
  </div>
  <div class="s10"></div>
  <div class="form-container active">
      <div class="row">
        <div class="col-xs-12">
          <input placeholder="Full name" type="text" name="name" class="form-control">
        </div>
      </div>
      <div class="s10"></div>
      <div class="row">
        <div class="col-xs-12">
          <input placeholder="Card number" type="text" name="number" class="form-control">
        </div>
      </div>
      <div class="s10"></div>
      <div class="row">
        <div class="col-xs-6">
          <input placeholder="MM/YY" type="text" name="expiry" class="form-control">
        </div>

        <div class="col-xs-6">
          <input placeholder="CVC" type="text" name="cvc" class="form-control">
        </div>
      </div>
      <div class="s10"></div>
      <div class="row">

        <div class="col-xs-12">
          <input type="button" value="Continue" class="btn btn-submit postfix">
        </div>
      </div>
  </div>
</div>


<div class="overlay"></div>

<div class="demo-container">
  <div class="demo-container-inner">
    <div class="container">

      <h1>Awesome shop</h1>
      <div class="row">
        <div class="col-xs-6 col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Cool product</h4>
              <p class="card-text">Some quick example text to build on the card title.</p>
            </div>
            <div class="card-block">
              <div class="pull-xs-right flipable">
                <div class="flipable-group">
                  <button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
                  <button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
                </div>
              </div>
              <p class="card-text cart-price">59$</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Cool product</h4>
              <p class="card-text">Some quick example text to build on the card title.</p>
            </div>
            <div class="card-block">
              <div class="pull-xs-right flipable">
                <div class="flipable-group">
                  <button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
                  <button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
                </div>
              </div>
              <p class="card-text cart-price">59$</p>
            </div>
          </div>
        </div>
        <div class="col-md-4 hidden-sm-down">
          <div class="card">
            <div class="card-block">
              <h4 class="card-title">Cool product</h4>
              <p class="card-text">Some quick example text to build on the card title.</p>
            </div>
            <div class="card-block">
              <div class="pull-xs-right flipable">
                <div class="flipable-group">
                  <button class="btn btn-primary add-to-cart"><span class="fa fa-cart-plus"></span></button>
                  <button class="btn btn-primary remove-from-cart"><span class="fa fa-check"></span></button>
                </div>
              </div>
              <p class="card-text cart-price">59$</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/175382/jquery.card.js'></script>
<script src='https://codepen.io/jesperkc/pen/oxaoNL/f177ba515fb47030457bd96ffb2f93b3.js'></script>
      <script>
$(document).ready(function () {
  $('.add-to-cart, .remove-from-cart').on('click', function () {
    $(this).parents('.flipable').toggleClass('flipped product-added');
    if ($('.product-added').length > 0) {
      $('body').addClass('enable-checkout');
    } else {
      $('body').removeClass('enable-checkout');
    }
  });
  $('.btn-checkout').on('click', function () {
    $('body').toggleClass('open-checkout');
  });

  var card = new Card({
    // a selector or DOM element for the form where users will
    // be entering their information
    form: '.form-container.active', // *required*
    // a selector or DOM element for the container
    // where you want the card to appear
    container: '.card-wrapper', // *required*


    //width: 200, // optional β€” default 350px
    formatting: true, // optional - default true

    // Strings for translation - optional
    messages: {
      validDate: 'valid\ndate', // optional - default 'valid\nthru'
      monthYear: 'mm/yyyy' // optional - default 'month/year'
    },

    // Default placeholders for rendered fields - optional
    placeholders: {
      number: 'β€’β€’β€’β€’ β€’β€’β€’β€’ β€’β€’β€’β€’ β€’β€’β€’β€’',
      name: 'Full Name',
      expiry: 'β€’β€’/β€’β€’',
      cvc: 'β€’β€’β€’' },


    // if true, will log helpful messages for setting up Card
    debug: true // optional - default false
  });

});


function demo() {
  setTimeout(function () {
    $('.add-to-cart:eq(0)').click();
    setTimeout(function () {
      $('.add-to-cart:eq(1)').click();
      setTimeout(function () {
        $('.btn-checkout').click();
      }, 500);
    }, 500);
  }, 1500);
}
    </script>
</body>
</html>