Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
131 lines (121 sloc) 6.55 KB
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<head>
<title>Braintree Demo | Carey Development Demos</title>
<meta content="This demo shows how to integrate Braintree with Spring Boot" name="description" />
<object th:include="fragments/head :: head" th:remove="tag"></object>
<link th:href="@{/assets/global/plugins/datatables/datatables.min.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css}" rel="stylesheet" type="text/css" />
</head>
<body class="page-container-bg-solid">
<div th:include="fragments/topmenuheader :: header"></div>
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-head" style="background-color:#eff3f8;padding-top:40px">
<div class="container">
<div class="row" style="margin-bottom:30px">
<div class="col-md-12">
<div th:if="${errorDetails}" class="note note-danger" id="serverSideErrorDiv">
<h4 class="block">Error</h4>
<div id="serverSideErrorText" th:text="${errorDetails}"></div>
</div>
<div class="note note-danger" id="errorDiv" style="display:none">
<h4 class="block">Error</h4>
<div id="errorText"></div>
</div>
<div class="portlet light portlet-fit portlet-datatable ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-shopping-cart font-green"></i>
<span class="caption-subject font-green sbold uppercase" style="position:relative;top:2px"> Checkout </span>
</div>
</div>
<div class="portlet-body">
<div class="table-container">
<form id="payment-form" method="post" action="/checkouts">
<table class="table table-striped table-bordered table-hover table-checkable" id="datatable_orders">
<thead>
<tr role="row" class="heading">
<th width="15%"> Order&nbsp;# </th>
<th width="15%"> Purchased&nbsp;On </th>
<th width="55%"> Product </th>
<th width="15%"> Price </th>
</tr>
</thead>
<tbody>
<tr role="row" class="filter">
<td>12345678</td>
<td>01/01/2018</td>
<td>Blue Light Saber</td>
<td>
<div class="margin-bottom-5">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon1">$</span>
<input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" maxlength="6" name="amount" id="amount" th:value="${amount != null} ? ${amount} : '10.00'" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="bt-drop-in-wrapper">
<div id="bt-dropin"></div>
</div>
<input type="hidden" id="nonce" name="payment_method_nonce" />
<button type="submit" class="btn green" style="margin-top:15px">Test Payment</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div th:include="fragments/homefooter :: footer"></div>
<script src="https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
var form = document.querySelector('#payment-form');
var client_token = [[${clientToken}]];
braintree.dropin.create({
authorization: client_token,
container: '#bt-dropin',
paypal: {
flow: 'vault'
}
}, function (createErr, instance) {
form.addEventListener('submit', function (event) {
event.preventDefault();
$('#errorDiv').hide();
$('#serverSideErrorDiv').hide();
instance.requestPaymentMethod(function (err, payload) {
if (err) {
console.log('Error', err);
showError(err);
return;
}
// Add the nonce to the form and submit
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
});
function showError(err) {
var message = String(err);
$('#errorText').html(message);
$('#errorDiv').show();
}
/*]]>*/
</script>
<script th:src="@{/javascript/demo.js}"></script>
<script th:src="@{/assets/global/scripts/datatable.js}" type="text/javascript"></script>
<script th:src="@{/assets/global/plugins/datatables/datatables.min.js}" type="text/javascript"></script>
<script th:src="@{/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js}" type="text/javascript"></script>
</body>
</html>