Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
Cannot retrieve contributors at this time
| <!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 # </th> | |
| <th width="15%"> Purchased 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> |