CodePen Embed - Payment form

Live

Live

Live

This Pen is owned by Axel Michel on CodePen.

See more by @webandapp on CodePen

External CSS

https://fonts.googleapis.com/css?family=Droid+Serif

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"yVwxGy\",\"auto_save\":true},\"hashid\":\"yVwxGy\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://fonts.googleapis.com/css?family=Droid+Serif\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"creditcard\",\"payment\",\"form\"],\"id\":11705432,\"user_id\":513985,\"html\":\"<h1>Choose Payment</h1>\\n<p id=\\\"choosen-paymenttype\\\">Credit Card</p>\\n<ul class=\\\"payment-types\\\">\\n  <li class=\\\"paymenttype pp unselected-left\\\">\\n    <div class=\\\"box\\\">\\n    <header>\\n      <div class=\\\"card\\\" id=\\\"pp-card\\\">\\n        <div class=\\\"flipper\\\">\\n          <div class=\\\"front\\\">\\n            <div class=\\\"shine\\\"></div>\\n            <div class=\\\"shadow\\\"></div>\\n            <div class=\\\"card-bg\\\">\\n              <img src=\\\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/pp-front-bg.png\\\" />\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n    <form>\\n      <div class=\\\"form-content\\\">\\n        <p><strong>About</strong></p>\\n <p>This is a basic concept for a payment, checkout process. The user can select between the different payment types, each type has a seperate form to fill in the required data for the transaction. What I tried to provide:</p> \\n      <ul>\\n        <li>A quick and easy way to fill the required form fields.</li>\\n        <li>Mobile friendly keyboard display</li>\\n        <li>Disabling auto-correction and spellcheck for names</li>\\n        <li>Avoid dropdown fields for a better UX.</li>\\n      </ul>     \\n      </div>\\n    </form>\\n    </div>\\n  </li>\\n  <li class=\\\"paymenttype selected cc\\\">\\n    <div class=\\\"box\\\">\\n    <header>\\n      <div class=\\\"card\\\" id=\\\"cc-card\\\">\\n        <div class=\\\"flipper\\\">\\n          <div class=\\\"front\\\">\\n            <div class=\\\"shine\\\"></div>\\n            <div class=\\\"shadow\\\"></div>\\n            <div class=\\\"card-bg\\\">\\n              <img src=\\\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/cc-front-bg.png\\\" />\\n            </div>\\n            <div class=\\\"card-content\\\">\\n              <div class=\\\"credit-card-type\\\"></div>\\n              <div class=\\\"card-number\\\">\\n                <span>1234 1234 1234 1234</span>\\n                <span>1234 1234 1234 1234</span>\\n              </div>\\n              <div class=\\\"card-holder\\\">\\n                <em>Card holder</em>\\n                <span>Your Name</span>\\n                <span>Your Name</span>\\n              </div>\\n              <div class=\\\"validuntil\\\">\\n                <em>Expire</em>\\n                <div class=\\\"e-month\\\">\\n                    <span>\\n                      MM\\n                    </span>\\n                    <span>\\n                      MM\\n                    </span>\\n                </div>\\n                <div class=\\\"e-divider\\\">\\n                     <span>\\n                      /\\n                    </span>\\n                    <span>\\n                      /\\n                    </span>\\n                </div>\\n                <div class=\\\"e-year\\\">\\n                    <span>\\n                      YY\\n                    </span>\\n                    <span>\\n                      YY\\n                    </span>\\n                </div>\\n                \\n              </div>\\n            </div>\\n          </div>\\n\\n          <div class=\\\"back\\\">\\n            <div class=\\\"shine\\\"></div>\\n            <div class=\\\"shadow\\\"></div>\\n            <div class=\\\"card-bg\\\">\\n             <img src=\\\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/cc-back-bg-new.png\\\" />\\n            </div>\\n            <div class=\\\"ccv\\\">\\n              <em>CCV Number</em>\\n              <strong></strong>\\n            </div>\\n            <div class=\\\"card-content\\\">\\n              <div class=\\\"card-number\\\">\\n                <span>4111 1111 1111 1111</span>\\n                <span>4111 1111 1111 1111</span>\\n              </div>\\n              <div class=\\\"card-holder\\\">\\n                <span>Your Name</span>\\n                <span>Your Name</span>\\n              </div>\\n              <div class=\\\"validuntil\\\">\\n                <span>\\n                  <strong class=\\\"e-month\\\">MM</strong> /                 <strong class=\\\"e-year\\\">YY</strong>\\n                </span>\\n                <span>\\n                  <strong class=\\\"e-month\\\">MM</strong> /\\n                  <strong class=\\\"e-year\\\">YY</strong>\\n                </span>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n\\n    <form>\\n      <div class=\\\"form-content\\\">\\n        <div class=\\\"field\\\">\\n          <input type=\\\"tel\\\" id=\\\"cardnumber\\\" maxlength=\\\"20\\\" />\\n          <span class=\\\"focus-bar\\\"></span>\\n          <label for=\\\"cardnumber\\\">Card number</label>\\n        </div>\\n        <div class=\\\"field\\\">\\n          <input type=\\\"text\\\" autocorrect=\\\"off\\\" spellcheck=\\\"false\\\" id=\\\"cardholder\\\" maxlength=\\\"25\\\" />\\n          <span class=\\\"focus-bar\\\"></span>\\n          <label for=\\\"cardholder\\\">Card holder (Name on card)</label>\\n        </div>\\n        <div class=\\\"field-group\\\">\\n          <div class=\\\"col-50\\\">\\n            <label for=\\\"expires-month\\\">Expire (Valid until)</label>   \\n            <div class=\\\"field expire-date\\\">\\n              <div>\\n                <input type=\\\"tel\\\" id=\\\"expires-month\\\" placeholder=\\\"MM\\\" allowed-pattern=\\\"[0-9]\\\" maxlength=\\\"2\\\">\\n                <span class=\\\"focus-bar\\\"></span>\\n              </div>\\n              <div class=\\\"divider\\\">/</div>\\n              <div>\\n                <input type=\\\"tel\\\" id=\\\"expires-year\\\" placeholder=\\\"YY\\\" allowed-pattern=\\\"[0-9]\\\" maxlength=\\\"2\\\">\\n                <span class=\\\"focus-bar\\\"></span>\\n              </div>\\n            </div>\\n          </div>\\n          <div class=\\\"col-50\\\">\\n            <div class=\\\"field ccv\\\">\\n              <input type=\\\"tel\\\" id=\\\"ccv\\\" autocomplete=\\\"off\\\" maxlength=\\\"3\\\" />\\n              <span class=\\\"focus-bar\\\"></span>\\n              <label for=\\\"ccv\\\">CCV</label>\\n            </div>\\n          </div>\\n        </div>\\n        <button><span>Submit</span></button>\\n      </div>\\n    </form>\\n    </div>\\n  </li>\\n  <li class=\\\"paymenttype ec unselected-right\\\">\\n    <div class=\\\"box\\\">\\n    <header>\\n      <div class=\\\"card\\\" id=\\\"ec-card\\\">\\n        <div class=\\\"flipper\\\">\\n          <div class=\\\"front\\\">\\n            <div class=\\\"shine\\\"></div>\\n            <div class=\\\"shadow\\\"></div>\\n            <div class=\\\"card-bg\\\">\\n              <img src=\\\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/ec-front-bg.png\\\" />\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n    <form>\\n      <div class=\\\"form-content\\\">\\n        <p><strong>This is just a demo</strong></p>\\n       <p>It is neither complete, nor optimized code. In CSS it is playing around with text-shadow, transformations, transitions and a few animations. Some quick coded JavaScript to handle the required interactions. Anyway it might be an inspiration or a starting point.</p>\\n        <p>Made with &#10084; by webandapp.fr</p>\\n      </div>\\n    </form>\\n     </div>\\n  </li>\\n</ul>\",\"css\":\"html, body {\\n  min-height: 100%;\\n  margin: 0;\\n  padding: 0;\\n}\\n\\nhtml {\\n  box-sizing: border-box;\\n}\\n\\n*, *:before, *:after {\\n  box-sizing: inherit;\\n}\\n\\nbody {\\n  font-family: 'Open sans', sans-serif;\\n  padding-bottom: 50px;\\n  \\n  &:after {\\n    content:'';\\n    position: fixed;\\n    left: 0;\\n    top: 0;\\n    z-index: -2;\\n    opacity: .2;\\n    width: 100%;\\n    height: 100%;\\n    background-attachment: fixed;\\n    background-size: cover;\\n    background-repeat: no-repeat;\\n  }\\n  \\n  &:before {\\n    content:'';\\n    position: fixed;\\n    left: 0;\\n    top: 0;\\n    z-index: -1;\\n    opacity: .2;\\n    width: 100%;\\n    height: 100%;\\n    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);\\n  }\\n  \\n  &.cc-bg {\\n  background: linear-gradient(45deg, #cb60b3 0%,#71117d 50%,#39296b 100%);   \\n    &:after {\\n          background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/bg-cc-form.jpg);\\n    }\\n  }\\n  \\n  &.ec-bg {\\n  background: linear-gradient(45deg,#a3caeb 0%,#528ec4 50%,#01578a 100%);   \\n    &:after {\\n      background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/world.png);\\n      opacity: .1;\\n      background-size: auto;\\n      background-position: center center;\\n    }\\n  }\\n  \\n  &.pp-bg {\\n    background: linear-gradient(45deg, #fff 0%,#cfcfcf 80%,#aaa 100%);\\n    &:after {\\n          background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/bg-pp.png);\\n          background-repeat: repeat;\\n          background-size: auto;\\n          opacity: .7;\\n    }\\n    \\n    h1, #choosen-paymenttype {\\n      color: #000;\\n    }\\n  }\\n  \\n}\\n\\nh1 {\\n  font-weight: 100;\\n  color: #fff;\\n  text-transform: uppercase;\\n  letter-spacing: 1;\\n  text-align: center;\\n  font-size: 16px;\\n  margin: 20px 0 5px 0;\\n}\\n\\n#choosen-paymenttype {\\n  text-align: center;\\n  color: #fff;\\n  margin: 0;\\n  font-size: 12px;\\n  \\n}\\n\\nul.payment-types {\\n  list-style-type: none;\\n  margin: 0;\\n  padding: 0;\\n  \\n  li.paymenttype {\\n    margin-bottom: 30px;    \\n  }\\n}\\n\\n.unselected-left,\\n.unselected-right {\\n  &:hover .shadow {\\n    box-shadow: 0 25px 40px rgba(14,21,47,0.4), 0 8px 20px rgba(14,21,47,0.4);\\n  }\\n}\\n\\n.selected form {\\n  max-height: 800px !important;\\n  opacity: 1;\\n}\\n\\n@media only screen and (min-width: 1080px) {\\n  \\n  ul.payment-types {\\n    width: 1040px;\\n    min-height: 600px;\\n    margin: 0 auto;\\n    position: relative;\\n    -webkit-transform-origin: 0 0;\\n    transform-origin: 0 0;\\n  }\\n  \\n  li.paymenttype {\\n    position: absolute;\\n    width: 300px;\\n    transition: transform .5s ease-in;\\n    \\n    &.selected {\\n      width: 440px;\\n    }\\n  }\\n  \\n  .unselected-left,\\n  .unselected-right {\\n    .box {\\n      transform: scale(.75);\\n    }\\n    \\n    .card {\\n      cursor: pointer;\\n    }\\n  }\\n  \\n  .cc.selected {\\n    transform: translate3d(300px,0,0);\\n  }\\n  \\n  .cc.unselected-left {\\n    transform: translate3d(0,0,0);\\n  }\\n  \\n  .cc.unselected-right {\\n    transform: translate3d(740px,0,0);\\n  }\\n  \\n  .pp.selected {\\n    transform: translate3d(300px,0,0);\\n  }\\n  \\n  .pp.unselected-left {\\n    transform: translate3d(0,0,0);\\n  }\\n  \\n  .pp.unselected-right {\\n    transform: translate3d(740px,0,0);\\n  }\\n  \\n  .ec.selected {\\n     transform: translateX(300px); \\n  }\\n  \\n  .ec.unselected-right {\\n     transform: translate3d(740px,0,0); \\n  }\\n  \\n  .ec.unselected-left {\\n     transform: translate3d(0,0,0); \\n  }\\n \\n}\\n\\nheader {\\n  position: relative;\\n  height: 200px;\\n}\\n\\n.card {\\n  position: absolute;\\n  left: 50%;\\n  transform: translateX(-50%);\\n  top: 50px;\\n  width: 300px;\\n  height: 188px;\\n  border-radius: 16px;\\n  perspective: 1000px;\\n  transition: transform .5s ease-in;\\n  z-index: 5;\\n  \\n  .shine {\\n    position: absolute;\\n    top: 0; \\n    left: 0; \\n    right: 0; \\n    bottom: 0;\\n    border-radius: 16px;\\n    background: linear-gradient(135deg, rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 60%);\\n    z-index: 5;\\n  }\\n  .card-bg {\\n    z-index: 2;\\n  }\\n  \\n  .shadow {\\n    position: absolute;\\n    top: 0; \\n    left: 5%;\\n    width: 90%;\\n    height: 100%;\\n    transition: all 0.2s ease-out;\\n    box-shadow: 0 8px 30px rgba(14,21,47,0.6);\\n    z-index: 1;\\n    border-radius: 16px;\\n  }\\n  \\n  .flipper {\\n    transition: 0.75s;\\n\\t  transform-style: preserve-3d;\\n    position: relative;\\n    width: 300px;\\n    height: 188px;\\n  }\\n  \\n  &.flipped .flipper {\\n    transform: rotateY(180deg);\\n  }\\n  \\n  .front, \\n  .back,\\n  .card-bg,\\n  .card-content {\\n    width: 100%;\\n    height: 100%;\\n    position: absolute;\\n    left: 0;\\n    top: 0;\\n    position: absolute;\\n  }\\n  \\n  .card-content {\\n    text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.5);\\n    color: #b0b0b0;\\n    font-family: 'Droid Serif', serif;\\n    z-index: 4;\\n    \\n    span {\\n      left: 0;\\n      top: 0;\\n      display: block;\\n      position: absolute;\\n      width: 100%;\\n      overflow: hidden;\\n      color: #7a1a86;\\n      padding-left: 2px;\\n      white-space: nowrap;\\n    }\\n    \\n    span + span {\\n      color: #a545b1;\\n      height: 7px;\\n      overflow: hidden;\\n    }\\n    \\n    strong {\\n      font-weight: normal;\\n    }\\n    \\n    em {\\n      text-transform: uppercase;\\n      position: absolute;\\n      font-style: normal;\\n      font-size: 9px !important;\\n      text-shadow: none;\\n      font-family: Open sans, sans-serif;\\n      color: rgba(255,255,255,.6);\\n    }\\n    \\n    .glow {\\n      animation: glow .5s;\\n    }\\n  }\\n  \\n  .front,\\n  .back {\\n    backface-visibility: hidden;\\n    box-shadow: 0 4px 8px rgba(10,10,10,0.25);\\n    border-radius: 16px;\\n  }\\n  \\n  .front {\\n    z-index: 2;\\n\\t  transform: rotateY(0deg);\\n  }\\n  \\n  .back {\\n    z-index: 1;\\n\\t  transform: rotateY(180deg);\\n    \\n    .card-content {\\n       opacity: .7;\\n       text-shadow: -1px -1px 0px rgba(0,0,0,0.5), 1px 1px 0px rgba(255,255,255,0.3);\\n       transform: rotateY(180deg);\\n      \\n      span + span {\\n        color: transparent;\\n      }\\n    }\\n  }\\n  \\n  .ccv {\\n    position: absolute;\\n    right: 15px;\\n    height: 20px;\\n    width: 30px;\\n    top: 52px;\\n    font-size: 14px;\\n    \\n    strong {\\n      font-weight: normal;\\n      font-style: italic;\\n    }\\n    \\n    em {\\n      position: absolute; \\n      white-space: nowrap;\\n      font-size: 8px;\\n      left: -60px;\\n    }\\n  }\\n  \\n  .credit-card-type {\\n    position: absolute;\\n    right: 20px;\\n    top: 20px;\\n    background-color: rgba(255,255,255,.4);\\n    width: 50px;\\n    height: 30px;\\n    border-style: solid;\\n    border-color: rgba(255,255,255,0);\\n    border-width: 2px;\\n    background-repeat: no-repeat;\\n    background-size: contain;\\n    background-position: center center;\\n    \\n    &.amex {\\n      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/amex.svg);\\n      background-color: #fff;\\n      \\n    }\\n    \\n    &.visa {\\n      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/visa.svg);\\n      background-color: #fff;\\n    }\\n    \\n    &.mastercard {\\n      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/513985/mastercard.svg);\\n      background-color: #fff;\\n    }\\n  }\\n  \\n  .card-number {\\n    position: absolute;\\n    width: 240px;\\n    top: 100px;\\n    left: 30px;\\n    font-size: 21px;\\n    height: 21px;\\n    font-family: courier;\\n    text-align: justify;\\n  }\\n  \\n  .card-holder {\\n    em {\\n      top: -16px;\\n    }\\n    \\n    text-transform: uppercase; \\n    position: absolute;\\n    width: 240px;\\n    top: 160px;\\n    left: 20px;\\n    font-size: 14px;\\n    font-weight: 100;\\n    height: 30px;\\n    span {\\n      letter-spacing: 1px;\\n    }\\n    span + span {\\n      height: 4px;\\n    }\\n  }\\n  \\n  .validuntil {\\n    em {\\n      top: 3px;\\n      left: -36px;\\n    }\\n    font-family: courier;\\n    position: absolute;\\n    top: 128px;\\n    left: 150px;\\n    font-size: 16px;\\n    height: 16px;\\n    width: 120px;\\n    white-space: nowrap;\\n    font-family: courier;\\n    \\n    .e-month,\\n    .e-divider,\\n    .e-year {\\n      letter-spacing: 1px;\\n      display: inline-block;\\n      position: relative;\\n      float: left;\\n      margin: 0 1px;\\n      \\n      span {\\n        position: relative;\\n      }\\n      \\n      span + span {\\n        position: absolute;\\n        height: 5px;\\n      }\\n    }\\n  }\\n}\\n\\n\\n.card-bg {\\n  img {\\n    border-radius: 12px;\\n  }\\n}\\n\\nform {\\n  margin: 0 auto;\\n  max-width: 400px;\\n  min-width: 320px;\\n  border-top: 0;\\n  overflow: hidden;\\n  max-height: 0;\\n  opacity: 0;\\n  transition: opacity, max-height .5s ease-in;\\n  \\n  ul {\\n    list-style-type: square;\\n    margin: 0;\\n    padding: 0 40px 0 20px;\\n  }\\n  \\n  p,li {\\n    line-height: 1.3;\\n    font-size: 14px;\\n  }\\n  \\n  li {\\n    margin-bottom: 12px;\\n  }\\n  \\n  .form-content {\\n    border: 1px solid #ccc;\\n    padding: 70px 20px 20px 20px;\\n    background: #e4e4e4;\\n    min-height: 400px;\\n    \\n  }\\n  \\n  label {\\n    display: block;\\n    margin-bottom: 5px;\\n    font-size: 12px;\\n    line-height: 1;\\n    text-transform: uppercase;\\n    color: #666;\\n    position: relative;\\n  }\\n  \\n  .field label {\\n    top: -50px;\\n  }\\n  \\n  .field-group,\\n  .field {\\n    margin-bottom: 20px;\\n    position: relative;\\n  }\\n  \\n  .field {\\n    padding-top: 17px;\\n  }\\n  \\n  \\n  .field-group:after,\\n  .field-group:before {\\n    content: '';\\n    display: table;\\n    clear: both;\\n  }\\n  \\n  .focus-bar {\\n    display: block;\\n    width: 100%;\\n    height: 2px;\\n    margin-top: -1px;\\n    z-index: 2;\\n    pointer-events: none;\\n    position: relative;\\n    \\n    &:before,\\n    &:after {\\n      content: '';\\n      height: 2px; \\n      width: 0;\\n      bottom: 1px; \\n      position: absolute;\\n      background: rgb(225, 157, 60); \\n      transition: 0.2s ease all; \\n    }\\n    \\n    &:before {\\n      left:50%;\\n    }\\n    \\n    &:after {\\n      right:50%; \\n    }\\n  }\\n  \\n  input {\\n    width: 100%;\\n    padding: 5px;\\n    font-size: 16px;\\n    border: 1px solid #CCC;\\n    position: relative;\\n    height: 32px;\\n    \\n    &:focus {\\n      outline: none;\\n    }\\n    \\n    &:focus + .focus-bar:before,\\n    &:focus + .focus-bar:after {\\n      width: 50%;\\n    }\\n    \\n    &:focus + .focus-bar + label,\\n    &:focus + .focus-bar + label {\\n      color: #ccc;\\n    }\\n  }\\n  \\n  .expire-date {\\n    padding-top: 0;\\n    \\n    input {\\n      width: 50px;\\n    }\\n    \\n    div {\\n      float: left;\\n    }\\n    \\n    .divider {\\n      padding: 0 5px;\\n      line-height: 32px;\\n      color: #ccc;\\n      user-select: none;\\n    }\\n  }\\n  \\n  \\n  .ccv {\\n    width: 80px;\\n    float: right;\\n  }\\n  \\n  ::selection {\\n    background: rgba(253, 218, 134,.6);\\n  }\\n  \\n  ::-moz-selection {\\n    background: rgba(253, 218, 134,.6);\\n  }\\n  \\n  button {\\n    position: relative;\\n    overflow: hidden;\\n    padding: 10px;\\n    display: block;\\n    width: 80%;\\n    background: linear-gradient(rgb(253, 218, 134) 0px, rgb(225, 157, 60) 100%);\\n    color: #fff;\\n    font-size: 14px;\\n    border: 1px solid rgb(225, 157, 60);\\n    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);\\n    border-radius: 2px;\\n    margin: -20px auto 10px auto;\\n    transition: 0.75s ease border-color; \\n    \\n    span {\\n      position: relative;\\n      z-index: 2;\\n    }\\n    \\n    &:after {\\n      transform: translate(-50%,-50%);\\n      content: '';\\n      background: rgb(225, 157, 60);\\n      width: 0px;\\n      height: 0px;\\n      position: absolute;\\n      top: 50%;\\n      left: 50%;\\n      border-radius: 50%;\\n    }\\n    \\n    &:hover {\\n      background: rgb(225, 157, 60);  \\n    }\\n    \\n    &:focus {\\n      outline: none;\\n      border-color: rgb(177, 106, 2);\\n    }\\n    \\n    &:focus:after {\\n      animation: anim-out 0.75s;\\n      animation-fill-mode: forwards;\\n    }\\n  }\\n}\\n\\n.col-50 {\\n  width: 50%;\\n  float: left;\\n}\\n\\n\\n@keyframes glow {\\n  0% {\\n   text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.5); \\n  }\\n  70% {\\n    color: rgba(255,255,255,.4);\\n\\t  text-shadow: -1px 1px 8px #ffc, 1px -1px 8px rgba(255,255,255,.6);\\n    \\n  }\\n  100% {\\n   text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.5); \\n  }\\n}\\n\\n@keyframes anim-out {\\n  0% {\\n    width: 0%;\\n    height: 0px;\\n  }\\n  100% {\\n    width: 200%;\\n    height: 300px;\\n  }\\n}\",\"js\":\"(function payment() {\\n  var d = document,\\n      body = d.getElementsByTagName('body')[0],\\n\\t\\t  html = d.getElementsByTagName('html')[0],\\n      ppForm = d.getElementsByTagName('form')[0],\\n      ccForm = d.getElementsByTagName('form')[1],\\n      ecForm = d.getElementsByTagName('form')[2],\\n      cCard = d.querySelector('#cc-card'),\\n      pCard = d.querySelector('#pp-card'),\\n      eCard = d.querySelector('#ec-card'),\\n      info = d.querySelector('#choosen-paymenttype'),\\n      ccNumber = ccForm.querySelector('#cardnumber'),\\n      cNumber = d.querySelectorAll('.card-number'),\\n      ccName = ccForm.querySelector('#cardholder'),\\n      cName = d.querySelectorAll('.card-holder'),   \\n      ccMonth = ccForm.querySelector('#expires-month'),\\n      cMonth = d.querySelectorAll('.e-month'),\\n      ccYear = ccForm.querySelector('#expires-year'),\\n      cYear = d.querySelectorAll('.e-year'),\\n      ccCCV = ccForm.querySelector('#ccv'),\\n      cCCV = d.querySelector('.ccv strong'),\\n      ccCard = d.querySelectorAll('.credit-card-type'),\\n      defaultNumber = cNumber[0].getElementsByTagName('span')[0].innerHTML,\\n      defaultName = cName[0].getElementsByTagName('span')[0].innerHTML;\\n      \\n  \\n  init();\\n  \\n  function init() {\\n    var cardType, cardNumber, cardName, cardCCV;\\n    body.className = 'cc-bg';\\n    \\n    function switchPos(elm) {\\n      if (elm.classList.contains('selected')) { \\n        if (elm.getElementsByTagName('input').length) {\\n          elm.getElementsByTagName('input')[0].focus();\\n        }\\n        return;\\n      }\\n      var selected = d.querySelector('.selected');\\n     \\n      if (elm.classList.contains('unselected-left')) {\\n        selected.classList.remove('selected');\\n        selected.classList.add('unselected-left');\\n        elm.classList.add('selected');\\n        elm.classList.remove('unselected-left');\\n        if (window.matchMedia(\\\"(max-width: 1039px)\\\").matches) {\\n          setTimeout(function() {elm.scrollIntoView();}, 500);\\n        }\\n        \\n      } else if (elm.classList.contains('unselected-right')) {\\n        selected.classList.remove('selected');\\n        selected.classList.add('unselected-right');\\n        elm.classList.add('selected');\\n        elm.classList.remove('unselected-right');\\n        if (window.matchMedia(\\\"(max-width: 1039px)\\\").matches) {\\n          setTimeout(function() {elm.scrollIntoView();}, 500);\\n        }\\n      }\\n    }\\n  \\n    addEvent(pCard,'click',function() {\\n      switchPos(d.querySelector('.paymenttype.pp'));\\n      body.className = 'pp-bg';\\n      info.innerHTML = 'PayPal';\\n    });\\n    addEvent(cCard,'click',function() {\\n      switchPos(d.querySelector('.paymenttype.cc'));\\n      body.className = 'cc-bg';\\n      info.innerHTML = 'Credit Card';\\n    });\\n    addEvent(eCard,'click',function() {\\n      switchPos(d.querySelector('.paymenttype.ec'));\\n       body.className = 'ec-bg';\\n      info.innerHTML = 'Bank account';\\n    });\\n    \\n    addEvent(ccNumber, 'focus', function() {\\n      cNumber[0].classList.add('glow');\\n    });\\n    addEvent(ccNumber, 'blur', function() {\\n      cNumber[0].classList.remove('glow');\\n    });\\n    \\n    addEvent(ccName, 'focus', function() {\\n      cName[0].classList.add('glow');\\n    });\\n    addEvent(ccName, 'blur', function() {\\n      cName[0].classList.remove('glow');\\n    });\\n    \\n    addEvent(ccMonth, 'focus', function() {\\n      cMonth[0].classList.add('glow');\\n    });\\n    addEvent(ccMonth, 'blur', function() {\\n      cMonth[0].classList.remove('glow');\\n    });\\n    \\n    addEvent(ccYear, 'focus', function() {\\n      cYear[0].classList.add('glow');\\n    });\\n    addEvent(ccYear, 'blur', function() {\\n      cYear[0].classList.remove('glow');\\n    });\\n    \\n    addEvent(ccCCV, 'focus', function() {\\n      cCard.classList.add('flipped');\\n    });\\n    addEvent(ccCCV, 'blur', function() {\\n      cCard.classList.remove('flipped');\\n    });\\n    \\n    \\n    addEvent(ccNumber, 'keyup', function() {\\n      cardNumber = this.value.replace(/[^0-9\\\\s]/g,'');\\n      if (!!this.value.match(/[^0-9\\\\s]/g)) {\\n        this.value = cardNumber;\\n      }\\n      cardType = getCardType(cardNumber.replace(/\\\\s/g,''));\\n      switch(cardType) {\\n        case 'amex':\\n          parts = numSplit(cardNumber.replace(/\\\\s/g,''), [4,6,5]);\\n          ccCard[0].className = 'credit-card-type amex';\\n          break;\\n        case 'mastercard': \\n          parts = numSplit(cardNumber.replace(/\\\\s/g,''), [4,4,4,4]);\\n           ccCard[0].className = 'credit-card-type mastercard';\\n          break;\\n        case 'visa': \\n          parts = numSplit(cardNumber.replace(/\\\\s/g,''), [4,4,4,4]);\\n           ccCard[0].className = 'credit-card-type visa';\\n          break;\\n        default:\\n          parts = cardNumber.split(' ');\\n          ccCard[0].className = 'credit-card-type';\\n      }\\n      cardNumber = parts.join(' ');\\n      if (cardNumber != this.value) {\\n        this.value = cardNumber;\\n      }\\n      if (!cardNumber) {\\n        cardNumber = defaultNumber;\\n      }\\n      syncText( cNumber, cardNumber);\\n    });\\n    addEvent(ccName, 'keyup', function() {\\n      cardName = this.value.replace(/[^a-zA-Z-\\\\.\\\\s]/g,'');\\n      if (cardName != this.value) {\\n        this.value = cardName;\\n      }\\n      if (!cardName) {\\n        cardName = defaultName;\\n      }\\n      syncText( cName, cardName);\\n    });\\n    addEvent(ccMonth, 'keyup', function(ev) {\\n      ev = ev || window.event;\\n      var month = this.value.replace(/[^0-9]/g,'');\\n      if(ev.keyCode == 38) {\\n        if(!month) {month = 0;}\\n        month = parseInt(month);\\n        month++;\\n        if(month < 10) {\\n          month = '0'+month;\\n        }\\n      }\\n      if(ev.keyCode == 40) {\\n        if(!month) {month = 13;}\\n        month = parseInt(month);\\n        month--;\\n        if(month == 0) { month = 1;} \\n        if(month < 10) {\\n          month = '0'+month;\\n        }\\n        \\n      }\\n      if( parseInt(month) > 12) {\\n        month = 12;\\n      }\\n      if( parseInt(month) < 1 && month != 0) {\\n        month = '01';\\n      }\\n      if(month == '00') {\\n        month = '01';\\n      }\\n   \\n      if (month != this.value) {\\n        this.value = month;\\n      }\\n      if(month.toString().length == 2) {\\n        syncText( cMonth, month);\\n      }\\n    });\\n    addEvent(ccYear, 'keyup', function(ev) {\\n      ev = ev || window.event;\\n      var currentYear = new Date().getFullYear().toString().substr(2,2),\\n          year = this.value.replace(/[^0-9]/g,'');\\n      \\n      if(ev.keyCode == 38) {\\n        if(!year) {year = currentYear;}\\n        year = parseInt(year);\\n        year++;\\n        if(year < 10) {\\n          year = '0'+year;\\n        }\\n      }\\n      if(ev.keyCode == 40) {\\n        if(!year) {year = parseInt(currentYear) + 5;}\\n        year = parseInt(year);\\n        year--;\\n        if(year < 10) {\\n          year = '0'+year;\\n        }\\n      }\\n      \\n      if( year.toString().length == 2 && parseInt(year) < currentYear) {\\n        year = currentYear;\\n      }\\n      if (year != this.value) {\\n        this.value = year;\\n      }\\n      if (year > (parseInt(currentYear) + 5)) {\\n        year = (parseInt(currentYear) + 5);\\n        this.value = year;\\n      }\\n      \\n      \\n      if(year.toString().length == 2) {   \\n        syncText( cYear, year);\\n      }\\n    });\\n    addEvent(ccCCV, 'keyup', function() {\\n      cardCCV = this.value.replace(/[^0-9\\\\s]/g,'');\\n      if (cardCCV != this.value) {\\n        this.value = cardCCV;\\n      }\\n     cCCV.innerHTML = cardCCV;\\n    });\\n  }\\n  \\n  function syncText( elCol, text ) {\\n    var collection;\\n    for(var j=0; j < elCol.length; j++) {\\n      collection = elCol[j].querySelectorAll('span');\\n      if (!collection.length) {\\n        elCol[j].innerHTML = text;\\n      } else {\\n        for(var i=0; i < collection.length; i++) {\\n          collection[i].innerHTML = text;\\n        }\\n      }\\n    }\\n  }\\n  \\n  function numSplit(number, indexes) {\\n    var tempArr = number.split(''),\\n        parts = [];\\n    for (var i=0, l = indexes.length; i < l; i++) {\\n      if (tempArr.length) {\\n        parts.push(tempArr.splice(0,indexes[i]).join(''));   \\n      }\\n    }\\n    return parts;\\n  }\\n  \\n  function getCardType(number) {\\n    var re;\\n    // Mastercard\\n    re = new RegExp(\\\"^5[1-5]\\\");\\n    if (number.match(re) != null) {\\n      return \\\"mastercard\\\";\\n    }\\n    // AMEX\\n    re = new RegExp(\\\"^3[47]\\\");\\n    if (number.match(re) != null) {\\n        return \\\"amex\\\";\\n    }\\n    \\n    // visa\\n    var re = new RegExp(\\\"^4\\\");\\n    if (number.match(re) != null) {\\n      return \\\"visa\\\";\\n    }\\n\\n    return \\\"\\\";\\n}\\n  \\n  function addEvent(elem, event, func) {\\n    elem.addEventListener(event,func);\\n  }\\n  \\n})();\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2016-12-21T08:56:08.000Z\",\"updated_at\":\"2016-12-23T18:33:55.000Z\",\"title\":\"Payment form\",\"description\":\"A draft for a payment form/  checkout process. Testing the UI/UX for the credit card form and basic interaction to select a payment type.\",\"slug_hash\":\"yVwxGy\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01592098-4840-707d-9c47-10e6d12cea6c\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-98018b12d50424943c3d.js"}