<div class="card-form">
  <div class="card-form__inner cf">
    <div class="card-form__element" data-input-text="Credit Card Number">
      <ul class="card-form__layers">
        <li class="card-form__layer">
          <form action="">
            <div id="cc-num" class="card-form__input card-form__hosted-field" /></form>
        </li>
      </ul>
    </div>
    <div class="card-form__element half" data-input-text="CVV">
      <ul class="card-form__layers">
        <li class="card-form__layer">
          <form action="">
            <div id="cc-cvv" class="card-form__input card-form__hosted-field"/>
          </form>
        </li>
      </ul>
    </div>
    <div class="card-form__element half" data-input-text="MM/YY">
      <ul class="card-form__layers">
        <li class="card-form__layer">
          <form action="">
            <div id="cc-expiration-date" class="card-form__input card-form__hosted-field" />
          </form>
        </li>
      </ul>
    </div>
    
    <button disabled value="submit" id="submit" class=""><div>Pay</div></button>
  </div>
</div>

<!-- Load the required client component. -->
<script src="https://js.braintreegateway.com/web/3.52.1/js/client.min.js"></script>

<!-- Load Hosted Fields component. -->
<script src="https://js.braintreegateway.com/web/3.52.1/js/hosted-fields.min.js"></script>
@import "bourbon";
// Variables
$color-grey-lightest: #F7F6F5;
$color-grey-light: #C9C9C9;
$ease-out: cubic-bezier(0.44, 0.22, 0, 1);
$delay: 1000ms;
$duration: 1200ms;
// General
* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: linear-gradient(to bottom, #FFF 0%, $color-grey-lightest 100%);
}

// Card Form
.card-form {
  position: relative;
  top: 25%;
  @include transform(perspective(1000px) translate3d(0, 0, 0) rotateX(0));
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  background-image: linear-gradient(-180deg, #FAFAFA 0%, #F2F2F2 100%);
  border: 1px solid #D8D8D8;
  box-shadow: 0px 0 0 0px rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  -webkit-animation: rotate-form $duration $delay 1 forwards $ease-out;
  -moz-animation: rotate-form $duration $delay 1 forwards $ease-out;
}

.card-form__inner {
  padding: 24px;
  font-size: 0;
}

.card-form__hosted-field {
  background-color: #fff;
  height: 44px;
}

.card-form__input {
  @include transform(translate3d(0, 0, 0));
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  font-size: 16px;
  padding: 12px;
  width: 100%;
  iframe {
    @include transform(translate3d(0, 0, 0));
  }
  &:focus,
  &.braintree-hosted-fields-focused {
    border: 1px solid #83BCFF;
    box-shadow: 0px 0px 12px 0px rgba(131, 188, 255, 0.60);
    outline: none;
  }
  &.braintree-hosted-fields-invalid {
    border: 1px solid tomato;
    box-shadow: 0px 0px 12px 0px rgba(tomato, 0.60);
  }
}

.card-form__element {
  @include transform(translate3d(0, 0, 0));
  position: relative;
  margin-bottom: 12px;
  font-size: 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  -webkit-animation: explode-layers $duration $delay*2 1 forwards $ease-out;
  -moz-animation: explode-layers $duration $delay*2 1 forwards $ease-out;
  &:before,
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    opacity: 0;
  }
  &:after {
    content: attr(data-input-text);
    z-index: -2;
    padding-top: 24px;
    padding-left: 18px;
    box-sizing: border-box;
    @include transform(translate3d(0, 0, 0));
    font-family: monospace;
    background: rgba(#3a3b3c, 0.05);
    border: 1px dashed #aaa;
    color: rgba(#000, 0.5);
    -webkit-animation: explode-after $duration $delay*2 1 forwards $ease-out;
    -moz-animation: explode-after $duration $delay*2 1 forwards $ease-out;
  }
  &:before {
    content: '';
    z-index: -1;
    background: rgba(#59BD7A, 0.1);
    border: 1px solid #59BD7A;
    -webkit-animation: explode-before $duration $delay*2 1 forwards $ease-out;
    -moz-animation: explode-before $duration $delay*2 1 forwards $ease-out;
    @include transform(perspective(0) translate3d(0, 0, 0));
  }
}

.card-form__layers {
  height: 100%;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 0 0 rgba(#000, 0.15);
}

.card-form__layer {
  width: 100%;
  height: auto;
  position: relative;
  line-height: 48px;
  border-radius: 6px;
  braintreeinput {
    width: 100%;
    padding: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    &:focus {
      border: 1px solid #83BCFF;
      box-shadow: 0px 0px 12px 0px rgba(131, 188, 255, 0.60);
      outline: none;
    }
  }
}

.half {
  width: 49%;
  display: inline-block;
  margin-right: 1%;
  &:last-child {
    margin-right: 0;
    float: right;
  }
}

button#submit {
  border: 0;
  width: 100%;
  display: block;
  color: #fff;
  font-size: 16px;
  border-radius: 3px;
  padding: 0;
  
  div {
    padding: 1em 0;
    background: #000;
  }
  
  &::after {
    content: 'Pay';
    position: absolute;
    box-sizing: border-box;
    padding: 1em 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0;
    background: rgba(#3a3b3c, 0.05);
    border: 1px dashed #aaa;
    color: rgba(#000, 0.5);
  }
  
  &:not([disabled]) {
    -webkit-animation: explode-layers $duration 0s 1 forwards $ease-out;
    -moz-animation: explode-layers $duration 0s 1 forwards $ease-out; 
    &::after {
      -webkit-animation: explode-after $duration 0s 1 forwards $ease-out;
      -moz-animation: explode-after $duration 0s 1 forwards $ease-out; 
    }
  }
  
  &[disabled] div {
    background: #666;
  }
}

// Animations 
@-webkit-keyframes rotate-form {
  to {
    box-shadow: 1px 2px 0 #ccc, 3px 4px 0 #ccc;
    @include transform(translate3d(0, 0, 0) rotateX(-45deg) rotateZ(30deg));
  }
}

@-moz-keyframes rotate-form {
  to {
    box-shadow: 1px 2px 0 #ccc, 3px 4px 0 #ccc;
    @include transform(translate3d(0, 0, 0) rotateX(45deg) rotateZ(35deg));
  }
}
@-webkit-keyframes explode-submit {
  to {
    @include transform(translate3d(-19px, -50%, 0));
    border: 1px solid #BFBFBF;
  }
}

@-moz-keyframes explode-submit {
  100% {
    @include transform(translate3d(-19px, -50%, 0));
    border: 1px solid rgba(#000, 0.25);
  }
}

@-webkit-keyframes explode-layers {
  to {
    @include transform(translate3d(-38px, -100%, 0));
    border: 1px solid #BFBFBF;
  }
}

@-moz-keyframes explode-layers {
  100% {
    @include transform(translate3d(-38px, -100%, 0));
    border: 1px solid rgba(#000, 0.25);
  }
}

@-webkit-keyframes explode-before {
  to {
    opacity: 1;
    @include transform( translate3d(19px, 50%, 0));
  }
}

@-moz-keyframes explode-before {
  to {
    opacity: 1;
    @include transform( translate3d(19px, 50%, 0));
  }
}

@-webkit-keyframes explode-after {
  to {
    opacity: 1;
    @include transform(translate3d(38px, 100%, 0));
  }
}

@-moz-keyframes explode-after {
  to {
    opacity: 1;
    @include transform(translate3d(38px, 100%, 0));
  }
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}
var submit = document.querySelector('#submit');

braintree.client.create({
  authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
}, function (err, clientInstance) {
  braintree.hostedFields.create({
    client: clientInstance,
    fields: {
      number: {
        selector: '#cc-num',
        placeholder: 'Credit Card Number'
      },
      cvv: {
        selector: '#cc-cvv',
        placeholder: 'CVV'
      },
      expirationDate: {
        selector: '#cc-expiration-date',
        placeholder: 'MM/YY'
      }
    },
    styles: {
      input: {
        'font-size': '16px',
        '-webkit-font-smoothing': 'antialiased'
      }
    }
  }, function (err, hostedFieldsInstance) {
    
    hostedFieldsInstance.on('validityChange', function (event) {
      var allValid = true;
      var field, key;
      
      for (key in event.fields) {
        if (event.fields[key].isValid === false) {
          allValid = false;
          break;
        }
      }
      
      if (allValid) {
        submit.removeAttribute('disabled');
      } else {
        submit.setAttribute('disabled', 'disabled');
      }
    });
    
    submit.addEventListener('click', function () {
      if (err) {
        console.error(err);
        return;
      }

      // This is where you would submit payload.nonce to your server
      alert('Submit your nonce to your server here!');
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js