forked from Midtrans/midtrans-java
-
Notifications
You must be signed in to change notification settings - Fork 0
/
check-out.html
117 lines (113 loc) · 5.17 KB
/
check-out.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns="http://www.w3.org/1999/html">
<head th:replace="~{layout :: common_header}">
<title>Midtrans Snap JAVA Springboot Demo</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<!-- Begin page content -->
<main role="main" class="container" style="padding-top: 30px">
<h2 class="mt-5">Midtrans SNAP Demo</h2>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Sendal Karet Rumahan</h6>
<small class="text-muted">Ukuran 7</small>
</div>
<span class="text-muted">Rp.15.0000</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Mantel Hujan</h6>
<small class="text-muted">Ukuran XL</small>
</div>
<span class="text-muted">Rp.200.000</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Sarung Tangan Karet</h6>
<small class="text-muted">1Pack Isi 17Pcs</small>
</div>
<span class="text-muted">Rp.50.000</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (Rp)</span>
<strong>Rp.265.000</strong>
</li>
</ul>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing & Shipping Address</h4>
<form class="needs-validation" method="post" novalidate>
<div class="row">
<div class="col-md-3">
<label for="firstName">First name</label></br>
<h5><label id="firstName" th:text="${result.customer_details.first_name}" ></label></h5>
</div>
<div class="col-md-3">
<label for="lastName">Last name</label></br>
<h5><label id="lastName" th:text="${result.customer_details.last_name}" ></label></h5>
</div>
</div>
<div class="mb-3">
<label for="email">Email</label></br>
<h5><label id="email" th:text="${result.customer_details.billing_address.email}" ></label></h5>
</div>
<div class="mb-3">
<label for="address">Address</label></br>
<h5><label id="address" th:text="${result.customer_details.billing_address.address}"></label></h5>
</div>
<hr class="mb-4">
</form>
<button id="pay-button" class="btn btn-primary btn-lg btn-block">Payment!</button>
<hr class="mb-4">
<code>
<pre><div id="result-json">JSON result will appear here after payment:<br></div></pre>
</code>
<hr class="mb-4">
</div>
</div>
</main>
<div th:replace="~{layout :: body_bottom_scripts}"/>
<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js"
th:attr="data-client-key=${clientKey}"></script>
<script th:inline="javascript">
var payButton = document.getElementById('pay-button');
payButton.onclick = function (event) {
var token = [[${transactionToken}]];
var redirectUrl = [[${redirectURL}]];
if (token == null) {
window.location.href = redirectUrl;
} else {
snap.pay(token, {
// Optional
onSuccess: function(result){
/* You may add your own js here, this is just example */ document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
console.log("OnSuccess : "+ JSON.stringify(result, null, 2));
},
// Optional
onPending: function(result){
/* You may add your own js here, this is just example */ document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
console.log("OnPending : "+ JSON.stringify(result, null, 2));
},
// Optional
onError: function(result){
/* You may add your own js here, this is just example */ document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
},
onClose: function (result) {
console.log("OnClose : "+ JSON.stringify(result, null, 2));
}
});
return false;
}
};
</script>
</body>
</html>