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