<div class="bfwc-new-payment-method-container">
  <div class="panel">
    <header class="panel__header">
      <h1>Card Payment</h1>
    </header>

    <div class="panel__content">
      <div class="textfield--float-label card--number-float">
        <label class="hosted-field--label" for="bfwc-card-number">
				<span class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
						viewBox="0 0 24 24">
						<path d="M0 0h24v24H0z" fill="none" />
						<path
							d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" /></svg>
				</span>Card Number</label>
        <div id="bfwc-card-number" class="hosted-field"><span class="bfwc-card-type"></span></div>
      </div>

      <div class="textfield--float-label exp--date-float">
        <label class="hosted-field--label" for="bfwc-expiration-date">
				<span class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
						viewBox="0 0 24 24">
						<path
							d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" /></svg>
				</span> Exp Date</label>
        <div id="bfwc-expiration-date" class="hosted-field"></div>
      </div>
      <div class="textfield--float-label cvv--float">
        <label class="hosted-field--label" for="bfwc-cvv">
				<span class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
						viewBox="0 0 24 24">
							<path
							d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></svg>
				</span> CVV
				</label>
        <div id="bfwc-cvv" class="hosted-field"></div>
      </div>
      <div class="textfield--float-label postal--float">
        <label class="hosted-field--label" for="bfwc-postal-code">
					<span class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
							viewBox="0 0 24 24">
		    					<path
								d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /></svg>
					</span>Postal
				</label>
        <div id="bfwc-postal-code" class="hosted-field"></div>
      </div>
      <div class="textfield--float-label save--card-float">
        <label class="hosted-field--label" for="bfwc-card-number">
					<span class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">>
						    <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8.9 6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H8.9V6zM18 20H6V10h12v10z"/>
						</svg>
					</span>Save
				</label>
        <div class="hosted-field">
          <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>
  </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";

/*--------------------
GENERAL
--------------------*/
/*@import url(https://fonts.googleapis.com/css?family=Roboto);*/
body.bfwc-body *, *:before, *:after {
	box-sizing: inherit;
}


/*--------------------
PANEL FORM
--------------------*/
body.bfwc-body .panel {
	background: #fff;
	width: 100%;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
  box-sizing: border-box;
}

body.bfwc-body .panel__header {
	background: #3F51B5;
	color: #fff;
}

body.bfwc-body .panel__header h1 {
	color: #fff !important;
	font-size: 1.5em;
}

body.bfwc-body .panel__header, .panel__footer {
	padding: 1em 2em;
}

body.bfwc-body .panel__footer {
	background: #f3f3f3;
}

body.bfwc-body .panel__content {
	padding: 1em 2em;
	overflow: hidden;
}

body.bfwc-body .panel .panel__content .textfield--float-label{
	width: 50%;
	float: left;
	display: inline-block;
}

body.bfwc-body .panel .panel__content .textfield--float-label:last-child:nth-child(odd){
	width: 100%;
}

body.bfwc-body .small-container .panel__content .textfield--float-label {
	width: 100%;
	float: left;
	display: inline-block;
}

body.bfwc-body .small-container .panel {
	width: 100%;
}

body.bfwc-body .hosted-field--label {
	transform: translateY(0.4em);
	font-size: 1.125em;
	line-height: 32px;
	transition: all .15s ease-out;
	display: block;
	width: 100%;
	font-weight: 400;
	overflow: hidden;
	margin-bottom: 0.5em; &. label-float { height : 33px;
	margin-bottom: -1px;
	transform: translate(0, 0);
	font-size: 12px;
	line-height: 15px;
	text-overflow: ellipsis;
	color: #2196F3;
	transition: all .15s ease-out
}

&
.filled { @extend .label-float;
	color: rgba(0, 0, 0, .54);
}

&
.invalid { @extend .label-float;
	color: #F44336;
}

}
body.bfwc-body span.icon {
	position: relative;
	top: 0.2em;
	margin-right: 0.2em;
}

body.bfwc-body svg {
	fill: #333;
}

body.bfwc-body .panel .panel__content .hosted-field {
	height: 32px;
	margin-bottom: 1em;
	display: block;
	background-color: transparent;
	color: rgba(0, 0, 0, .87);
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, .26);
	outline: 0;
	width: 100%;
	font-size: 16px;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
	position: relative;
}

/*--------------------
BT HOSTED FIELDS SPECIFIC 
--------------------*/
body.bfwc-body .panel .panel__content .braintree-hosted-fields-focused,
body.bfwc-body .panel .panel__content .braintree-hosted-fields-valid {
	border-bottom: 2px solid #3F51B5;
	transition: all 200ms ease;
}

body.bfwc-body .panel .panel__content .braintree-hosted-fields-invalid {
	border-bottom: 2px solid #E91E63;
	transition: all 200ms ease;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type{
	position: absolute;
	top: 50%;
	transform: translatey(-50%);
	-webkit-transform: translatey(-50%);
	-ms-transform: translatey(-50%);
	right: 5px;
	width: 44px;
	height: 28px;
    background-image: url('https://wordpress.paymentplugins.com/woo-payment-gateway/assets/payment-method-sprites.png');
}
@media (max-width: 375px){
	body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type{
		top: 30px;
		transform: translatey(0%);
		-webkit-transform: translatey(0%);
		-ms-transform: translatey(0%);
		background-image: url('../../img/payment-method-sprites.png');
	}
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.visa{
	background-size: 86px auto;
	background-position: 0 -429px;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.master-card{
	background-size: 86px auto;
	background-position: 0 -317px;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.discover{
	background-size: 84px auto;
	background-position: 0 -199px;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.diners-club{
	background-size: 110px auto;
	background-position: 0 -230px;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.maestro{
	background-size: 86px auto;
	background-position: 0 -289px;
}
body.bfwc-body .panel .panel__content .hosted-field .bfwc-card-type.american-express{
	background-size: 86px auto;
	background-position: 0 -399px;
}
body.bfwc-body .panel .panel__content .textfield--float-label input[type="checkbox"]{
	display: none;
}
body.bfwc-body .panel .panel__content .textfield--float-label input[type="checkbox"] + label.bfwc-save-label
{
	position: relative;
	display: inline-block !important;
}
body.bfwc-body .panel .panel__content .textfield--float-label input[type="checkbox"]:checked + label:before{
	position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 15px;
    content: "";
    opacity: 1;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 2px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 70%;
    transition: all ease-in 0.3s;
}
body.bfwc-body .panel .panel__content .textfield--float-label input[type="checkbox"] + label:after{
	border: 1px solid rgba(0, 0, 0, .26) !important;
    border-radius: 4px;
    display: inline-block;
    content: "";
    top: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    z-index: 0;
    cursor: pointer;
    transition: all ease-in 0.3s;
}
body.bfwc-body .panel .panel__content .textfield--float-label input[type="checkbox"]:checked + label:after
{
	 background-color: #3F51B5;
}
/*---------------------
Media Queries
----------------------*/
@media ( max-width : 600px) {
	
	body.bfwc-body .panel {
		width: 100%;
	}
	body.bfwc-body .textfield--float-label {
		width: 100%;
		float: none;
		display: inline-block;
	}
}
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":"roboto, verdana, sans-serif"
                }
              },
              fields: {
                number: {
                  selector: '#bfwc-card-number',
                  placeholder: '4111 1111 1111 1111'
                },
                cvv: {
                  selector: '#bfwc-cvv',
                  placeholder: '123'
                },
                expirationDate: {
                  selector: '#bfwc-expiration-date',
                  placeholder: 'MM/YY'
                },
              postalCode: {
                selector: '#bfwc-postal-code',
                placeholder: '11111'
              }
            }
          },
          function(err, hostedFieldsInstance) {
            if (err) {
              return;
            }
            hostedFieldsInstance.on("cardTypeChange", bfwcCardTypeChange);
          });
    }
  });

function bfwcCardTypeChange(event) {
  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-new-payment-method-container').width() < 345) {
    $('.bfwc-new-payment-method-container').addClass('small-container');
  } else {
    $('.bfwc-new-payment-method-container').removeClass('small-container');
  }
}

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

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js