<div class="container">
  <div class="row">
    <div class="form-group col-xs-8">
      <label class="control-label">Card Number</label>
      <!--  Hosted Fields div container -->
      <div class="form-control" id="bfwc-card-number"><span class="bfwc-card-type"></span></div>
      <span class="helper-text"></span>
    </div>
    <div class="form-group col-xs-4">
      <div class="row">
        <label class="control-label col-xs-12">Exp Date</label>
        <div class="col-xs-6">
          <div class="form-control" id="bfwc-expiration-month"></div>
        </div>
        <div class="col-xs-6">
          <!--  Hosted Fields div container -->
          <div class="form-control" id="bfwc-expiration-year"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-6">
      <label class="control-label">CVV</label>
      <div class="form-control" id="bfwc-cvv"></div>
    </div>
    <div class="form-group col-xs-6">
      <label class="control-label">Postal</label>
      <div class="form-control" id="bfwc-postal-code"></div>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-6">
      <label class="save-card-label">Save</label>
      <input type="checkbox" id="bfwc_save_credit_card" name="bfwc_save_credit_card">
      <label class="bfwc-save-label" for="bfwc_save_credit_card"></label>
    </div>
  </div>
</div>
<script src="https://js.braintreegateway.com/web/3.6.3/js/client.js"></script>
<script src="https://js.braintreegateway.com/web/3.6.3/js/hosted-fields.js">

@CHARSET "ISO-8859-1";
.container{
  margin: 10px 10px;
}
.panel {
	width: 80%;
	margin: 2em auto;
}

.bootstrap-basic {
	background: white;
}

.panel-body {
	width: 90%;
	margin: 2em auto;
}

.helper-text {
	color: #8A6D3B;
	font-size: 12px;
	margin-top: 5px;
	height: 12px;
	display: block;
}

/* Braintree Hosted Fields styling classes*/
#braintree-hostedfields-container .form-group .braintree-hosted-fields-focused,
.form-group .braintree-hosted-fields-focused,
.form-group .braintree-hosted-fields-focused.braintree-hosted-fields-valid,
#braintree-hostedfields-container .form-group .braintree-hosted-fields-focused.braintree-hosted-fields-invalid,
.form-group .braintree-hosted-fields-focused.braintree-hosted-fields-invalid{
	border: 1px solid #0275d8 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(102, 175, 233, .6) !important;
}
#braintree-hostedfields-container .form-group .braintree-hosted-fields-invalid,
.form-group .braintree-hosted-fields-invalid{
	border: 1px solid #8a6d3b !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(100, 100, 0, .6) !important;
}
#braintree-hostedfields-container .form-group .braintree-hosted-fields-valid,
.form-group .braintree-hosted-fields-valid{
	border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
body.bfwc-body .small-container .row .form-group {
	width: 100%;
}
body.bfwc-body #bfwc-card-number{
	position: relative;
}
body.bfwc-body .row .form-group .bfwc-card-type{
	position: absolute;
	right: 5px;
	width: 44px;
	height: 28px;
	top: 50%;
	transform: translatey(-50%);
	-webkit-transform: translatey(-50%);
	-ms-transform: translatey(-50%);
	background-image: url('https://wordpress.paymentplugins.com/woo-payment-gateway/assets/payment-method-sprites.png');
}
body.bfwc-body .row .form-group .bfwc-card-type.visa {
	background-size: 86px auto;
	background-position: 0 -429px;
}
body.bfwc-body .row .form-group .bfwc-card-type.master-card {
	background-size: 86px auto;
	background-position: 0 -317px;
}
body.bfwc-body .row .form-group .bfwc-card-type.discover {
	background-size: 84px auto;
	background-position: 0 -199px;
}
body.bfwc-body .row .form-group .bfwc-card-type.diners-club {
	background-size: 110px auto;
	background-position: 0 -230px;
}
body.bfwc-body .row .form-group .bfwc-card-type.maestro {
	background-size: 86px auto;
	background-position: 0 -289px;
}
body.bfwc-body .row .form-group .bfwc-card-type.american-express {
	background-size: 86px auto;
	background-position: 0 -399px;
}
body.bfwc-body .row .form-group .bfwc-card-type.jcb {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .row .form-group .bfwc-card-type.unionpay {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .row .form-group .save-card-label{
	display: block;
}
body.bfwc-body .row .form-group:last-child:nth-child(odd) {
	width: 100%;
}

body.bfwc-body .row .form-group input[type="checkbox"]{
	display: none;
}
body.bfwc-body .row .form-group input[type="checkbox"] + label.bfwc-save-label
{
	position: relative;
	display: inline-block !important;
}
body.bfwc-body .row .form-group input[type="checkbox"]:checked + label.bfwc-save-label:before{
	position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 15px;
    content: "";
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #0275d8;
    border-bottom: 2px solid #0275d8;
    border-radius: 2px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
body.bfwc-body .row .form-group input[type="checkbox"] + label.bfwc-save-label:after{
	background-color: #fff;
	border: 1px solid #ccc !important;
    border-radius: 4px;
    display: inline-block;
    content: "";
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 0;
    cursor: pointer;
}
body.bfwc-body .row .form-group input[type="checkbox"]:checked + label.bfwc-save-label:after{
	border: 1px solid #0275d8 !important;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(102, 175, 233, .6) !important;
}
@media ( max-width : 670px) {
	.bfwc-body .form-group {
		width: 100% !important;
	}
}

jQuery(document).ready(function($) {
  $('body').addClass('bfwc-body');
  setInterval(checkContainerSize, 1000);
  
  braintree.client.create({
      authorization: "sandbox_g42y39zw_348pk9cgf3bgyw2b"
    },
    function(err, clientInstance) {
      if (clientInstance) {
        braintree.hostedFields.create({
          client: clientInstance,
          styles: {
            'input': {
              'color': '#000',
              'font-size': '16px',
              'font-family': 'helvetica, tahoma, calibri, sans-serif'
            }
          },
          fields: {
            number: {
              selector: '#bfwc-card-number',
              placeholder: '4111 1111 1111 1111'
            },
            cvv: {
              selector: '#bfwc-cvv',
              placeholder: '123'
            },
            expirationMonth: {
              selector: '#bfwc-expiration-month',
              placeholder: 'MM'
            },
            expirationYear: {
              selector: '#bfwc-expiration-year',
              placeholder: 'YY'
            },
            postalCode: {
              selector: '#bfwc-postal-code',
              placeholder: '11111'
            }
          }
        }, function(err, hostedFieldsInstance) {
          if (err) {
            return;
          }
          hostedFieldsInstance.on("cardTypeChange", bfwcCardTypeChange);
        });
      }
    });

  function bfwcCardTypeChange(event) {
    debugger;
    if (event.cards.length === 1) {
      $('.bfwc-card-type').addClass(event.cards[0].type);
      window.current_card_type = event.cards[0].type;
    } else {
      $('.bfwc-card-type').removeClass(window.current_card_type);
    }
  }
  
  function checkContainerSize(){
    if($('.bfwc-card-form').width() < 345){
     $('.bfwc-card-form').addClass('bfwc-small-form');
    }else{
      $('.bfwc-card-form').removeClass('bfwc-small-form');
    }
  }

  $.fn.braintreeInvalidField = function() {
    $(this).addClass('braintree-hosted-fields-invalid');
  }

});