<div class="bfwc-new-payment-method-container">
    <div class="classic-form-container">
	<div class="card-number-wrapper field-container">
		<span class="field-label">Card Number</span>
		<div id="bfwc-card-number" class="hosted-field">
			<span class="bfwc-card-type"></span>
		</div>
		<span class="bfwc-error"></span>
	</div>
	<div class="form-group-wrapper multi-fields">
		<div class="exp-date-field field-container">
			<span class="field-label">Exp Date</span>
			<div id="bfwc-expiration-date" class="hosted-field">
			</div>
			<span class="bfwc-error"></span>
		</div>
			<div class="cvv-field field-container">
				<span class="field-label">CVV</span>
				<div id="bfwc-cvv" class="hosted-field">
				</div>
				<span class="cvv-image"></span>
				<span class="bfwc-error"></span>
			</div>

	</div>

			<div class="form-group-wrapper multi-fields">
		
				<div class="postal-field field-container">
					<span class="field-label">Postal Code></span>
					<div id="bfwc-postal-code" class="hosted-field">
					</div>
					<span class="bfwc-error"></span>
				</div>
		
				<div class="save-card-field field-container">
					<span class="field-label active">Save</span>
					<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";
.bfwc-new-payment-method-container{
  padding: 10px
}
body.bfwc-body .classic-form-container {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
}
body.bfwc-body .classic-form-container *{
	box-sizing: border-box;
}

body.bfwc-body .classic-form-container .card-number-wrapper {
	width: 100%;
	max-height: 4.5em;
	background: #fff;
	border-top: solid 1px #DEE2E5;
	position: relative;
	transition: background-color 131ms linear;
}

body.bfwc-body .classic-form-container .form-group-wrapper {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	background: #fff;
	border-top: solid 1px #DEE2E5;
	margin-top: -1px;
	width: 100%;
	position: relative;
	border-top: solid 1px #DEE2E5;
}
body.bfwc-body .classic-form-container div.form-group-wrapper:nth-child(even){
	border-top: solid 1px #DEE2E5;
	border-bottom: solid 1px #DEE2E5;
}
body.bfwc-body .classic-form-container div.form-group-wrapper:last-child{
	border-bottom: solid 1px #DEE2E5;
}
body.bfwc-body .classic-form-container .hosted-field {
	height: 4.5em;
	padding: 0px 10px;
	padding-top: 18px;
}
@media screen and (max-width: 375px){
	body.bfwc-body .classic-form-container div.form-group-wrapper .field-container{
		width: 100%;
	}
	body.bfwc-body .classic-form-container div.form-group-wrapper .field-container{
		border-top: solid 1px #DEE2E5;
		border-left: none !important;
	}
	body.bfwc-body .classic-form-container div.form-group-wrapper{
		border: none !important;
	}
	body.bfwc-body .classic-form-container div.form-group-wrapper:last-child{
		border-bottom: solid 1px #DEE2E5 !important;
	}
}
body.bfwc-body .classic-form-container .bfwc-postal-field{
	width: 100%;
}

body.bfwc-body .classic-form-container .cvv-field {
	max-height: 4.5em;
	position: relative;
	transition: background-color 131ms linear;
}


body.bfwc-body .classic-form-container .cvv-field,
body.bfwc-body .classic-form-container .save-card-field {
	width: 50%;
	height: 4.5em;
	transition: background-color 131ms linear;
}
body.bfwc-body .classic-form-container .exp-date-field,
body.bfwc-body .classic-form-container .postal-field {
	max-height: 4.5em;
	width: 50%;
	transition: background-color 131ms linear;
}
body.bfwc-body .classic-form-container .form-group-wrapper .field-container{
	position: relative;
}
body.bfwc-body .classic-form-container .form-group-wrapper .field-container:last-child:nth-child(even){
	border-left: solid 1px #DEE2E5;
}
body.bfwc-body .classic-form-container .save-card-field{
	position: relative;
}
body.bfwc-body .classic-form-container .card-number-wrapper.active,
body.bfwc-body .classic-form-container .exp-date-field.active, 
body.bfwc-body .classic-form-container .cvv-field.active,
body.bfwc-body .classic-form-container .postal-field.active {
	background-color: #f9f9f9;
}

body.bfwc-body .small-container .classic-form-container .exp-date-field,
body.bfwc-body .small-container .classic-form-container .cvv-field {
	margin-top: -1px;
	border-right: none;
	width: 100%;
	border-left: none;
}
/**** small container styles ****/
body.bfwc-body .small-container .classic-form-container div.form-group-wrapper .field-container{
		width: 100%;
}
body.bfwc-body .small-container .classic-form-container div.form-group-wrapper .field-container{
	border-top: solid 1px #DEE2E5;
	border-left: none !important;
}
body.bfwc-body .small-container .classic-form-container div.form-group-wrapper{
	border: none !important;
}
body.bfwc-body .small-container .classic-form-container div.form-group-wrapper:last-child{
	border-bottom: solid 1px #DEE2E5 !important;
}
/**** ****/

body.bfwc-body .classic-form-container .field-label {
	opacity: 0;
	position: absolute;
	top: 18px;
	left: 10px;
	font-size: 12px;
	position: absolute;
	transition: transform 111ms ease-out, opacity 211ms ease-out, top 111ms ease-out;
}

body.bfwc-body .classic-form-container .field-label.active {
	opacity: 1;
	transform: translate3d(0, -6px, 0);
	/* top: 10px; */
}

body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type {
	position: absolute;
	top: 68%;
	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');
}

body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.visa {
	background-size: 86px auto;
	background-position: 0 -429px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.master-card {
	background-size: 86px auto;
	background-position: 0 -317px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.discover {
	background-size: 84px auto;
	background-position: 0 -199px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.diners-club {
	background-size: 110px auto;
	background-position: 0 -230px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.maestro {
	background-size: 86px auto;
	background-position: 0 -289px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.american-express {
	background-size: 86px auto;
	background-position: 0 -399px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.jcb {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .classic-form-container .card-number-wrapper .hosted-field .bfwc-card-type.unionpay {
	background-size: 86px auto;
	background-position: 0 -261px;
}
body.bfwc-body .classic-form-container .form-group-wrapper .cvv-image {
	opacity: 0;
	position: absolute;
	background-image: url('https://wordpress.paymentplugins.com/woo-payment-gateway/assets/payment-method-sprites.png');
	background-size: 86px auto;
	background-position: 0 -693px;
	width: 48px;
	height: 28px;
	background-color: #fff;
	margin-top: -14px;
	top: 50%;
	right: 14px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 1px;
}

body.bfwc-body .classic-form-container .form-group-wrapper .cvv-image-ax {
	opacity: 0;
	position: absolute;
	background-image: url('../../img/payment-method-sprites.png');
	background-size: 86px auto;
	background-position: 0 -345px;
	width: 48px;
	height: 28px;
	background-color: #fff;
	margin-top: -14px;
	top: 50%;
	right: 14px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 1px;
}

body.bfwc-body .classic-form-container .form-group-wrapper .cvv-image.active,
body.bfwc-body .classic-form-container .form-group-wrapper .cvv-image-ax.active {
	opacity: 1;
}

body.bfwc-body .classic-form-container span.bfwc-error{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0px;
	z-index: 99999999;
}

body.bfwc-body .classic-form-container .card-number-wrapper.has-warning .bfwc-error,
body.bfwc-body .classic-form-container .field-container.has-warning .bfwc-error {
	height: 2px;
	color: #D0021B;
	border-bottom: 2px solid red;
	animation: invalidBarAnimation 800ms linear;
}
body.bfwc-body .classic-form-container .field-container.has-warning span.field-label{
	color: #D0021B;
	animation: cardFieldAnimation 800ms linear;
}
body.bfwc-body .classic-form-container .has-warning .hosted-field iFrame,
	.classic-form-container .has-warning .hosted-field {
	animation: cardFieldAnimation 800ms linear both;
}
body.bfwc-body .classic-form-container .form-group-wrapper .save-card-field input[type="checkbox"]{
	display: none;
}
body.bfwc-body .classic-form-container .form-group-wrapper .save-card-field label.bfwc-save-label{
	display: inline-block !important;
	position: relative !important;
  	margin-top: 35px;
	padding: 0px 10px;
}
body.bfwc-body .classic-form-container .form-group-wrapper .save-card-field input[type="checkbox"]:checked + label.bfwc-save-label:before{
	position: absolute;
    top: 1px;
    left: 11px;
    width: 8px;
    height: 15px;
    content: "";
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-radius: 2px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 70%;
    transform-origin: 100% 70%;
    transition: all ease-in 0.3s;
}
body.bfwc-body .classic-form-container .form-group-wrapper .save-card-field label.bfwc-save-label:after{
	content: "";
	display: inline-block;
	border: 1px solid #DEE2E5;
 	width: 20px;
    height: 20px;
    background-color: transparent;
    z-index: 0;
    cursor: pointer;
    transition: all ease-in 0.3s;
	
}

@keyframes invalidBarAnimation{
	0%, 40%, 60%, 100%{transform: translate3d(0, 2px, 0);-webkit-transform: translate3d(0, 2px, 0);}
	10%, 30%, 70%{transform: translate3d(0, 3px, 0);-webkit-transform: translate3d(0, 3px, 0);}
	20%, 80%{transform: translate3d(0, 4px, 0);-webkit-transform: translate3d(0, 4px, 0);}
	50%{transform: translate3d(0, 0px, 0);-webkit-transform: translate3d(0, 0px, 0);}
}

@-webkit-keyframes cardFieldAnimation {
    0% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    2.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15.08904, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15.08904, 0, 0, 1)
    }
    4.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.21434, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.21434, 0, 0, 1)
    }
    6.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.99348, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.99348, 0, 0, 1)
    }
    8.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.00956, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.00956, 0, 0, 1)
    }
    12.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.66853, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.66853, 0, 0, 1)
    }
    14.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.83555, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.83555, 0, 0, 1)
    }
    16.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    18.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.25163, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.25163, 0, 0, 1)
    }
    20.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.13224, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.13224, 0, 0, 1)
    }
    22.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.09762, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.09762, 0, 0, 1)
    }
    25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    27.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.25685, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.25685, 0, 0, 1)
    }
    29.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.72429, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.72429, 0, 0, 1)
    }
    31.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.64428, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.64428, 0, 0, 1)
    }
    33.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    35.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.19798, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.19798, 0, 0, 1)
    }
    37.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.44611, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.44611, 0, 0, 1)
    }
    39.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .87282, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .87282, 0, 0, 1)
    }
    41.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    43.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.63591, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.63591, 0, 0, 1)
    }
    45.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.76762, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.76762, 0, 0, 1)
    }
    47.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.46331, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.46331, 0, 0, 1)
    }
    50% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    52.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .33755, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .33755, 0, 0, 1)
    }
    54.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .40747, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .40747, 0, 0, 1)
    }
    56.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .24593, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .24593, 0, 0, 1)
    }
    58.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    60.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.17918, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.17918, 0, 0, 1)
    }
    62.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.21629, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.21629, 0, 0, 1)
    }
    64.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.13055, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.13055, 0, 0, 1)
    }
    66.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    68.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .09511, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .09511, 0, 0, 1)
    }
    70.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .11481, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .11481, 0, 0, 1)
    }
    72.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0693, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0693, 0, 0, 1)
    }
    75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    77.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.05049, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.05049, 0, 0, 1)
    }
    79.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.06094, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.06094, 0, 0, 1)
    }
    81.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.03678, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.03678, 0, 0, 1)
    }
    83.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    85.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0268, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0268, 0, 0, 1)
    }
    87.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .03235, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .03235, 0, 0, 1)
    }
    89.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .01953, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .01953, 0, 0, 1)
    }
    91.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    93.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01423, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01423, 0, 0, 1)
    }
    95.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01717, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01717, 0, 0, 1)
    }
    97.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01036, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01036, 0, 0, 1)
    }
    100% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
}

@keyframes cardFieldAnimation {
    0% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    2.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15.08904, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 15.08904, 0, 0, 1)
    }
    4.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.21434, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.21434, 0, 0, 1)
    }
    6.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.99348, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.99348, 0, 0, 1)
    }
    8.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    10.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.00956, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -8.00956, 0, 0, 1)
    }
    12.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.66853, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.66853, 0, 0, 1)
    }
    14.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.83555, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.83555, 0, 0, 1)
    }
    16.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    18.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.25163, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.25163, 0, 0, 1)
    }
    20.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.13224, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.13224, 0, 0, 1)
    }
    22.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.09762, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.09762, 0, 0, 1)
    }
    25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    27.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.25685, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.25685, 0, 0, 1)
    }
    29.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.72429, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.72429, 0, 0, 1)
    }
    31.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.64428, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.64428, 0, 0, 1)
    }
    33.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    35.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.19798, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.19798, 0, 0, 1)
    }
    37.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.44611, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.44611, 0, 0, 1)
    }
    39.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .87282, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .87282, 0, 0, 1)
    }
    41.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    43.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.63591, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.63591, 0, 0, 1)
    }
    45.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.76762, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.76762, 0, 0, 1)
    }
    47.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.46331, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.46331, 0, 0, 1)
    }
    50% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    52.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .33755, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .33755, 0, 0, 1)
    }
    54.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .40747, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .40747, 0, 0, 1)
    }
    56.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .24593, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .24593, 0, 0, 1)
    }
    58.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    60.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.17918, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.17918, 0, 0, 1)
    }
    62.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.21629, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.21629, 0, 0, 1)
    }
    64.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.13055, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.13055, 0, 0, 1)
    }
    66.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    68.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .09511, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .09511, 0, 0, 1)
    }
    70.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .11481, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .11481, 0, 0, 1)
    }
    72.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0693, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0693, 0, 0, 1)
    }
    75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    77.083333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.05049, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.05049, 0, 0, 1)
    }
    79.166667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.06094, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.06094, 0, 0, 1)
    }
    81.25% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.03678, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.03678, 0, 0, 1)
    }
    83.333333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    85.416667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0268, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .0268, 0, 0, 1)
    }
    87.5% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .03235, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .03235, 0, 0, 1)
    }
    89.583333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .01953, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, .01953, 0, 0, 1)
    }
    91.666667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
    93.75% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01423, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01423, 0, 0, 1)
    }
    95.833333% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01717, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01717, 0, 0, 1)
    }
    97.916667% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01036, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -.01036, 0, 0, 1)
    }
    100% {
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }
}
jQuery(document).ready(function($) {

  $('body').addClass('bfwc-body');

  setInterval(updateContainerCSS, 1000);
  
  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'
            },
            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);
          hostedFieldsInstance.on('validityChange', validityChange);
           hostedFieldsInstance.on('focus', onFocus);
          
          hostedFieldsInstance.on('notEmpty', notEmpty);
           hostedFieldsInstance.on('empty', empty);
          
        });
      }
    });

  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');
  }

});

validityChange = function(event) {
  var field = event.fields[event.emittedBy];
  if (field.isValid) {
    $(field.container).parent().removeClass('has-warning')
      .addClass('has-success');
  } else if (field.isPotentiallyValid) {
    $(field.container).parent().removeClass(
      'has-warning has-success');
  } else {
    $(field.container).parent().addClass('has-warning');
  }
}

updateContainerCSS = function(e){
				if($('.bfwc-new-payment-method-container').width() < 545){
					$('.bfwc-new-payment-method-container').addClass('small-container');
				}
			}

onFocus = function(event) {
				var field = event.fields[event.emittedBy];
				if (event.emittedBy === 'cvv') {
					if (event.cards.length === 1) {
						if (event.cards[0].code.size === 3) {
							$(field.container).next('span').addClass(
									'cvv-image active');
						} else {
							$(field.container).next('span').addClass(
									'cvv-image-ax active');
						}
					} else {
						$(field.container).next('span').addClass(
								'cvv-image active');
					}

				} else {
					if(event.fields['cvv']){
						$(event.fields['cvv'].container).next('span').attr('class', 'cvv-image');
						$(field.container).parent('div').addClass('active');
					}
				}
			}

notEmpty = function(event) {
				for ( var key in event.fields) {
					var field = event.fields[key];
					if (field.isEmpty) {
						$(field.container).prev().removeClass('active');
					} else {
						$(field.container).prev().addClass('active');
					}
				}
			};

empty = function(event) {
				var field = event.fields[event.emittedBy];
				$(field.container).prev().removeClass('active');
			}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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