<%
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", -1);
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="/WEB-INF/shopizer-tags.tld" prefix="sm" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<style>
/* Uses Bootstrap stylesheets for styling, see linked CSS*/
body {
background-color: #fff;
}
.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-hosted-fields-focused {
border: 1px solid #0275d8;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.braintree-hosted-invalid {
/*border: 1px solid #ff0000 !important;*/
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,0,.6);
}
.braintree-hosted-fields-focused.focused-invalid {
border: 1px solid #ff0000 !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,0,.6);
}
@media (max-width: 670px) {
.btn {
white-space: normal;
}
}
</style>
<script type="text/javascript">
function populateData(div, data, defaultValue) {
$.each(data, function() {
div.append($('<option/>').val(this).text(this));
});
if(defaultValue && (defaultValue!=null && defaultValue!='')) {
div.val(defaultValue);
}
}
</script>
<script src="<c:url value="/resources/js/jquery.creditCardValidator.js" />"></script>
<script>$.ajax({url: "<c:url value="/shop/reference/creditCardDates.html"/>",type: "GET",success: function(data){populateData($('#expiration-year-select'), data, '${order.payment['creditcard_card_expirationyear']}'); }})</script>
<script>$.ajax({url: "<c:url value="/shop/reference/monthsOfYear.html"/>",type: "GET",success: function(data){populateData($('#expiration-month-select'),data, '${order.payment['creditcard_card_expirationmonth']}'); }})</script>
<script src="https://js.braintreegateway.com/web/3.27.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.27.0/js/hosted-fields.min.js"></script>
<!--<div style="display:none;">-->
<!-- Bootstrap inspired Braintree Hosted Fields example -->
<div id="creditCardBoxBraintree" class="panel panel-default bootstrap-basic credit-card-box-v2">
<form class="panel-body">
<div class="row" style="margin-left:15px !important;margin-right:5px !important;margin-top:15px !important;margin-bottom:15px !important">
<div class="panel-heading display-table">
<img class="img-responsive pull-right cc-image"
src="<c:url value="/resources/img/payment/icons/american-express-straight-32px.png"/>">
<img class="img-responsive pull-right cc-image"
src="<c:url value="/resources/img/payment/icons/mastercard-straight-32px.png"/>">
<img class="img-responsive pull-right cc-image"
src="<c:url value="/resources/img/payment/icons/visa-straight-32px.png"/>">
</div>
</div>
<div class="row" style="margin-left:5px !important;margin-right:5px !important;margin-top:15px !important;margin-bottom: 0px !important">
<div class="form-group col-sm-12">
<label for="cardNumber"><s:message
code="label.payment.creditcard.cardnumber"
text="Card number" /><span class="required">*</span></label>
<s:message code="NotEmpty.order.creditcard.cardnumber"
text="Card number is required"
var="msgCardNumber" />
<!-- Hosted Fields div container -->
<div class="form-control" id="creditcard_card_number" name="payment['creditcard_card_number']" autocomplete="off"></div>
<span class="helper-text"></span>
</div>
</div>
<div class="row" style="margin-left:5px !important;margin-right:5px !important;margin-top:0px !important;margin-bottom:0px !important">
<div class="form-group col-sm-6">
<!-- Hosted Fields div container -->
<label for="expiryMonth"><s:message
code="label.payment.creditcard.cardexpiry.month"
text="Card expiry month" /><span class="required">*</span></label>
<!--<select id="expiration-month-select" name="payment['creditcard_card_expirationmonth']" class="input-small form-control form-control-25"></select>-->
<div class="form-control" id="expiration-month" style=""></div>
<span class="helper-text"></span>
</div>
<div class="form-group col-sm-6">
<!-- Hosted Fields div container -->
<label for="expiryYear"><s:message
code="label.payment.creditcard.cardexpiry.year"
text="Card expiry year" /><span class="required">*</span></label>
<!--<select id="expiration-year-select" name="payment['creditcard_card_expirationyear']" class="input-medium form-control form-control"></select>-->
<div class="form-control" id="expiration-year" style=""></div>
<span class="helper-text"></span>
</div>
</div>
<div class="row" style="margin-left:5px !important;margin-right:5px !important;margin-top:0px !important;margin-bottom:0px !important">
<div class="form-group col-sm-6">
<label class="control-label"><s:message code="label.payment.creditcard.cardcvv" text="Card validation number" /></label>
<s:message code="NotEmpty.order.creditcard.cvv" text="Credit card validation digit is required" var="msgCardCvv"/>
<!-- Hosted Fields div container -->
<div class="form-control" id="cvv" name="payment['creditcard_card_cvv']"></div>
</div>
<div class="form-group col-sm-6">
<label class="control-label"><s:message code="label.generic.postalcode" text="Card owner postal code" /></label>
<!-- Hosted Fields div container -->
<div class="form-control" id="postal-code"></div>
</div>
</div>
<%-- <button value="submit" style="margin-bottom:0px !important" id="submit" class="btn btn-success btn-lg center-block">Pay with <span id="card-type">Card</span></button>
<br/> --%>
</form>
</div>
<!--</div>-->
<script type="text/javascript">
var hfInstance = null;
var client = null;
$( document ).ready(function() {
<!-- replace generic payment box -->
//$( "#creditCardBox" ).replaceWith( $( "#creditCardBoxBraintree" ) );
var $form = $('#checkoutForm');
$form.find('button').prop('disabled', false);
braintree.client.create({
authorization: '<c:out value="${requestScope.paymentMethod.informations.integrationKeys['tokenization_key']}" escapeXml="false"/>'
}, function (err, clientInstance) {
if (err) {
console.error(err);
return;
}
client = clientInstance;
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px',
'font-family': 'helvetica, tahoma, calibri, sans-serif',
'color': '#3a3a3a'
},
':focus': {
'color': 'black'
}
},
fields: {
number: {
selector: '#creditcard_card_number',
placeholder: ''
},
cvv: {
selector: '#cvv',
placeholder: ''
},
expirationMonth: {
selector: '#expiration-month',
placeholder: 'MM'
},
expirationYear: {
selector: '#expiration-year',
placeholder: 'YY'
},
postalCode: {
selector: '#postal-code',
placeholder: ''
}
}
}, function (err, hostedFieldsInstance) {
if (err) {
console.error(err);
return;
}
hfInstance = hostedFieldsInstance;
//$('#expiration-year').val($('#expiration-year-select').val().substring(2, 4));
//$('#expiration-month').val($('#expiration-month-select').val());
//console.log('CC expiry year ' + $('#expiration-year').val());
//console.log('CC expiry month ' + $('#expiration-month').val());
hostedFieldsInstance.on('validityChange', function (event) {
var field = event.fields[event.emittedBy];
$form.find('button').prop('disabled', false);
//console.log('Validity change ' + event.emittedBy);
if (field.isValid) {
console.log('Field valid ' + event.emittedBy);
if (event.emittedBy === 'expirationMonth' || event.emittedBy === 'expirationYear') {
console.log('Field type ' + event.emittedBy);
if (!event.fields.expirationMonth.isValid || !event.fields.expirationYear.isValid) {
return;
}
} else if (event.emittedBy === 'number') {
$('#creditcard_card_number').next('span').text('');
} else {
console.log(event.emittedBy);
}
// Remove any previously applied error or warning classes
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
// Apply styling for a valid field
$(field.container).parents('.form-group').addClass('has-success');
} else if (field.isPotentiallyValid) {
// Remove styling from potentially valid fields
$(field.container).parents('.form-group').removeClass('has-warning');
$(field.container).parents('.form-group').removeClass('has-success');
if (event.emittedBy === 'number') {
$('#creditcard_card_number').next('span').text('');
}
if (event.emittedBy === 'expirationMonth') {
$('#expiration-month').next('span').text('');
}
if (event.emittedBy === 'expirationYear') {
$('#expiration-year').next('span').text('');
}
} else {
console.log('Field invalid ' + event.emittedBy);
// Add styling to invalid fields
$(field.container).parents('.form-group').addClass('has-warning');
if (event.emittedBy === 'expirationMonth') {
$form.find('button').prop('disabled', true);
$('#expiration-month').next('span').text(getOrderValidationMessage('invalid_expiry_month'));
}
if (event.emittedBy === 'expirationYear') {
$form.find('button').prop('disabled', true);
$('#expiration-year').next('span').text(getOrderValidationMessage('invalid_expiry_year'));
}
// Add helper text for an invalid card number
if (event.emittedBy === 'number') {
$form.find('button').prop('disabled', true);
$('#creditcard_card_number').next('span').text(getOrderValidationMessage('invalid_number'));
}
}
//$('#expiration-year').val($('#expiration-year-select').val().substring(2, 4));
//$('#expiration-month').val($('#expiration-month-select').val());
//console.log('CC expiry year ' + $('#expiration-year').val());
//console.log('CC expiry month ' + $('#expiration-month').val());
});
hostedFieldsInstance.on('cardTypeChange', function (event) {
// Handle a field's change, such as a change in validity or credit card type
if (event.cards.length === 1) {
$('#card-type').text(event.cards[0].niceType);
} else {
$('#card-type').text('Card');
}
//$('#expiration-year').val($('#expiration-year-select').val().substring(2, 4));
//$('#expiration-month').val($('#expiration-month-select').val());
//console.log('CC expiry year ' + $('#expiration-year').val());
//console.log('CC expiry month ' + $('#expiration-month').val());
});
/* $('#expiration-year-select').on('change', function() {
var $option = $(this).find('option:selected');
var value = $option.val();
$('#expiration-year').val(value);
$('#expiration-month').val($('#expiration-month-select').val());
console.log('CC expiry year ' + $('#expiration-year').val());
console.log('CC expiry month ' + $('#expiration-month').val());
}) */
/* $('#expiration-month-select').on('change', function() {
var $option = $(this).find('option:selected');
var value = $option.val();
$('#expiration-year').val($('#expiration-year-select').val().substring(2, 4));
$('#expiration-month').val(value);
console.log('CC expiry year ' + $('#expiration-year').val());
console.log('CC expiry month ' + $('#expiration-month').val());
}) */
/* $('#submit').submit(function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (err, payload) {
if (err) {
$form.find('button').prop('disabled', false);
alert('Error ' + err);
log(err);
return;
}
var token = payload.nonce;
// Insert the token into the form so it gets submitted to the server
var tokenField = '<input type="hidden" name="payment[\'paymentToken\']" value="' + token +'" /><input type="hidden" name="payment[\'null_creditcard\']" value="null_creditcard"/>';
$form.append(tokenField);
log(tokenField);
alert('PaymentToken ' + token);
// and submit
//$form.get(0).submit();
// This is where you would submit payload.nonce to your server
//alert('Submit your nonce to your server here!');
});
}); */
});
});
});
function initBraintreePayment(div, data, defaultValue) {
var $form = $('#checkoutForm');
$form.find('button').prop('disabled', true);
//console.log('expiryMonth ' + $('.expirationMonth').val());
// console.log('expiryYear ' + $('.expirationYear').val());
hfInstance.tokenize(function (err, payload) {
if (err) {
hideSMLoading('#pageContainer');
console.log(err.message);
showResponseErrorMessage(getOrderValidationMessage('error_creditcard'));
$form.find('button').prop('disabled', false);
log(err);
return;
}
var token = payload.nonce;
// Insert the token into the form so it gets submitted to the server
var tokenField = '<input type="hidden" name="payment[\'paymentToken\']" value="' + token +'" /><input type="hidden" name="payment[\'null_creditcard\']" value="null_creditcard"/>';
$form.append(tokenField);
log(tokenField);
//alert('PaymentToken ' + token);
// and submit
hideSMLoading('#pageContainer');
$form.submit();
});
}
</script>
<div class="control-group">
<label class="control-label"><s:message code="label.payment.creditcard.usecredicard" text="Use Credit Card"/></label>
<div class="controls">
<jsp:include page="/pages/shop/common/checkout/selectedPayment.jsp" />
</div>
</div>