<div class="bfwc-new-payment-method-container">
  <div class="simple-form">
    <div class="form-group">
      <label>Card Number</label>
      <div id="bfwc-card-number" class="hosted-field"><span class="bfwc-card-type"></span></div>
    </div>
    <div class="form-group">
      <label>Exp Date</label>
      <div id="bfwc-expiration-date" class="hosted-field"></div>
    </div>
    <div class="form-group">
      <label>CVV</label>
      <div id="bfwc-cvv" class="hosted-field"></div>
    </div>
    <div class="form-group">
      <label>Postal Code</label>
      <div id="bfwc-postal-code" class="hosted-field"></div>
    </div>
    <div class="form-group">
      <label>Save</label>
      <div class="hosted-field save-card-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>
<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";

body.bfwc-body .simple-form {
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 1.5rem;
	margin-bottom: 0.75rem;
}

body.bfwc-body .simple-form .form-group {
	width: 100%;
  margin-bottom: 5px;
}
body.bfwc-body .simple-form .form-group:last-child{
  margin-bottom: 0;
}
body.bfwc-body .simple-form .form-group label {
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	margin-bottom: 6px;
	font-weight: 400;
}
body.bfwc-body .simple-form .form-group #bfwc-card-number{
	position: relative;
}
body.bfwc-body .simple-form .form-group .hosted-field {
	height: 50px;
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	display: inline-block;
	box-shadow: none;
	font-weight: 600;
	font-size: 14px;
	border-radius: 6px;
	border: 1px solid #dddddd;
	line-height: 20px;
	background: #fcfcfc;
	background: linear-gradient(to right, white 50%, #fcfcfc 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all 300ms ease-in-out;
}
body.bfwc-body .simple-form .form-group .hosted-field.save-card-field{
	border: none;
	padding: 0px;
}
body.bfwc-body .simple-form .hosted-field.braintree-hosted-fields-invalid {
	border: 1px solid #ed574a !important;
}
body.bfwc-body .simple-form .hosted-field.braintree-hosted-fields-valid {
	border: 1px solid #64d18a;
}
body.bfwc-body .simple-form .hosted-field.braintree-hosted-fields-focused {
	border: 1px solid #64d18a;
	border-radius: 1px;
	background-position: left bottom;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type{
	position: absolute;
	top: 50%;
	-webkit-transform: translatey(-50%);
	-ms-transform: translatey(-50%);
	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: 320px){
	body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type{
		top: 50px;
		-webkit-transform: translatey(0%);
		-ms-transform: translatey(0%);
		transform: translatey(0%);
	}
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.visa {
	background-size: 86px auto;
	background-position: 0 -429px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.master-card {
	background-size: 86px auto;
	background-position: 0 -317px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.discover {
	background-size: 84px auto;
	background-position: 0 -199px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.diners-club {
	background-size: 110px auto;
	background-position: 0 -230px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.maestro {
	background-size: 86px auto;
	background-position: 0 -289px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.american-express {
	background-size: 86px auto;
	background-position: 0 -399px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.jcb {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .simple-form .form-group .hosted-field .bfwc-card-type.unionpay {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .simple-form .form-group .hosted-field.save-card-field{
	background: transparent;
}
body.bfwc-body .simple-form .form-group .hosted-field.save-card-field input[type="checkbox"]{
	display: none;
}
body.bfwc-body .simple-form .form-group .hosted-field input[type="checkbox"] + label.bfwc-save-label{
	display: inline-block !important;
	position: relative;
}

body.bfwc-body .simple-form .form-group .hosted-field input[type="checkbox"] + label.bfwc-save-label:after{
	display: inline-block;
	background-color: #fff;
	content: "";
	border: 1px solid #dddddd;
	width: 20px;
	height: 20px;
	border-radius: 6px;
    cursor: pointer;
    transition: all ease-in 0.3s;
}
body.bfwc-body .simple-form .form-group .hosted-field input[type="checkbox"]:checked + label.bfwc-save-label:after{
	background-color: #64d18a;
}
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":{"font-size":"16px", "font-family":"courier, monospace"}, ".valid":{"color":"rgb(94, 189, 128)"}, "@media screen and (max-width: 375px)":{"input":{"font-size":"14px"}}
          },
          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-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');
  }

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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