source: src/main/resources/static/TransactionPage.html

Last change on this file was de83113, checked in by ste08 <sjovanoska@…>, 4 months ago

Signup,Login,FlightSearch,Booking and Payment working!
  • Property mode set to 100644
File size: 10.1 KB
RevLine 
[57e58a3]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Complete Your Payment</title>
7 <link rel="stylesheet" href="/css/main.css">
8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9</head>
[9868304]10<style>
11 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
[57e58a3]12
13
[9868304]14 * {
15 margin: 0;
16 padding: 0;
17 box-sizing: border-box;
18 font-family: 'Poppins', sans-serif
19 }
[57e58a3]20
[9868304]21 .container {
22 margin: 10px auto;
23 padding: 150px;
24 padding-top:10px;
25 }
[57e58a3]26
[9868304]27 .container .card {
28 width: 100%;
29 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
30 background: #fff;
31 border-radius: 0px;
32 }
33
34 body {
35 background: #eee
36 }
37
38
39 .container .card .img-box {
40 width: 80px;
41 height: 50px;
42 }
43
44 .container .card img {
45 width: 100%;
46 object-fit: fill;
47 }
48
49 .container .card .number {
50 font-size: 24px;
51 }
52
53 .container .card-body .btn.btn-primary .fab.fa-cc-paypal {
54 font-size: 32px;
55 color: #3333f7;
56 }
57
58 .fab.fa-cc-amex {
59 color: #1c6acf;
60 font-size: 32px;
61 }
62
63 .fab.fa-cc-mastercard {
64 font-size: 32px;
65 color: red;
66 }
67
68 .fab.fa-cc-discover {
69 font-size: 32px;
70 color: orange;
71 }
72
73 .c-green {
74 color: green;
75 }
[57e58a3]76
[9868304]77 .box {
78 height: 40px;
79 width: 50px;
80 display: flex;
81 align-items: center;
82 justify-content: center;
83 background-color: #ddd;
84 }
85
86 .btn.btn-primary.payment {
87 background-color: #1c6acf;
88 color: white;
89 border-radius: 0px;
90 height: 50px;
91 display: flex;
92 align-items: center;
93 justify-content: center;
94 margin-top: 24px;
95 }
96
97
98 .form__div {
99 height: 50px;
100 position: relative;
101 margin-bottom: 24px;
102 }
103
104 .form-control {
105 width: 100%;
106 height: 45px;
107 font-size: 14px;
108 border: 1px solid #DADCE0;
109 border-radius: 0;
110 outline: none;
111 padding: 2px;
112 background: none;
113 z-index: 1;
114 box-shadow: none;
115 }
116
117 .form__label {
118 position: absolute;
119 left: 16px;
120 top: 10px;
121 background-color: #fff;
122 color: #80868B;
123 font-size: 16px;
124 transition: .3s;
125 text-transform: uppercase;
126 }
127
128 .form-control:focus+.form__label {
129 top: -8px;
130 left: 12px;
131 color: #1A73E8;
132 font-size: 12px;
133 font-weight: 500;
134 z-index: 10;
135 }
136
137 .form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
138 top: -8px;
139 left: 12px;
140 font-size: 12px;
141 font-weight: 500;
142 z-index: 10;
143 }
144 .input-group{
145 align-content: center;
146 padding-left: 500px;
147 padding-top:10px;
148 }
149 .button-group{
150 display:flex;
151 gap:10px;
152 }
153 .pay-btn,
154 .cancel-btn {
155 padding: 10px 20px;
156 font-size: 16px;
157 cursor: pointer;
158 border: none;
159 border-radius: 5px;
160 }
161
162 .pay-btn {
163 background-color: #4CAF50; /* Green background for the pay button */
164 color: white;
165 }
166
167 .cancel-btn {
168 background-color: #f44336; /* Red background for the cancel button */
169 color: white;
170 }
171</style>
172<body>
173
174<div id="app" class="container">
175 <div class="row">
176 <div class="col-lg-4 mb-lg-0 mb-3">
177 <div class="card p-3">
178 <div class="img-box">
179 <img src="https://www.freepnglogos.com/uploads/visa-logo-download-png-21.png" alt="">
180 </div>
181 <div class="number">
182 <label class="fw-bold" for="">**** **** **** 1060</label>
183 </div>
184 <div class="d-flex align-items-center justify-content-between">
185 <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
186 <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
187 </div>
188 </div>
189 </div>
190 <div class="col-lg-4 mb-lg-0 mb-3">
191 <div class="card p-3">
192 <div class="img-box">
193 <img src="https://www.freepnglogos.com/uploads/mastercard-png/file-mastercard-logo-svg-wikimedia-commons-4.png"
194 alt="">
195 </div>
196 <div class="number">
197 <label class="fw-bold">**** **** **** 1060</label>
198 </div>
199 <div class="d-flex align-items-center justify-content-between">
200 <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
201 <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
202 </div>
203 </div>
204 </div>
205 <div class="col-lg-4 mb-lg-0 mb-3">
206 <div class="card p-3">
207 <div class="img-box">
208 <img src="https://www.freepnglogos.com/uploads/discover-png-logo/credit-cards-discover-png-logo-4.png"
209 alt="">
210 </div>
211 <div class="number">
212 <label class="fw-bold">**** **** **** 1060</label>
213 </div>
214 <div class="d-flex align-items-center justify-content-between">
215 <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
216 <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
217 </div>
218 </div>
219 </div>
220 <div class="col-12 mt-4">
221 <div class="card p-3">
222 <p class="mb-0 fw-bold h4">Payment Methods</p>
223 </div>
224 </div>
[57e58a3]225 </div>
[9868304]226 <form class="submit" @submit.prevent="processPayment">
227 <div class="input-group">
228 <label for="cardholder">Cardholder Name</label>
229 <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
230 </div>
231
232 <div class="input-group">
233 <label for="cardNumber">Card Number</label>
234 <input type="text"
235 id="cardNumber"
236 v-model="cardNumber"
237 maxlength="16"
238 placeholder="1234 5678 9012 3456"
239 required />
240 </div>
241
242 <div class="input-group">
243 <label for="expiration">Expiration Date</label>
244 <input type="month" id="expiration" v-model="expiration" required />
245 </div>
[57e58a3]246
[9868304]247 <div class="button-group">
248 <button type="submit" class="pay-btn">Pay</button>
249 <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
250 </div>
251 </form>
[57e58a3]252 </div>
253
254<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
255<script>
256
257 new Vue({
258 el: '#app',
259 data: {
[3d60932]260 bookingId: '',
[57e58a3]261 cardholder: '',
262 cardNumber: '',
263 expiration: '',
264 amount: '',
[de83113]265 paymentSuccess: false,
266 flightId:'',
267 userId:''
[57e58a3]268 },
269 methods: {
270 processPayment() {
271 const paymentDate = new Date().toISOString().split('T')[0];
272 const transaction = {
273 transaction_date:paymentDate,
274 payment_status:'SUCCESS',
[de83113]275 amount:Number(this.amount) || null,
276 userId:Number(this.userId) || null,
277 bookingId:Number(this.bookingId) || null
[57e58a3]278 };
[3d60932]279 console.log(transaction);
[57e58a3]280 axios.post('api/payments', transaction)
281 .then(response => {
[3d60932]282 console.log(response.data);
[57e58a3]283 this.paymentSuccess = true;
[de83113]284 this.updateBooking();
[57e58a3]285 setTimeout(() => window.location.href = '/flights',2000);
286 })
287 .catch(error => console.error("Payment failed", error));
288 },
[de83113]289 updateBooking() {
290 const booking = {
291 bookingDate: new Date().toISOString().split('T')[0],
292 flightId:this.flightId,
293 payment_status:'SUCCESS',
294 total_cost:Number(this.amount) || null,
295 userId:Number(this.userId) || null,
296 bookingId:Number(this.bookingId) || null
297 };
298 console.log(booking);
299 axios.put(`api/flights/${this.bookingId}`, booking)
300 .then(response => {
301 console.log(response.data);
302 })
303 .catch(error => console.error("Booking update failed", error));
304 },
[57e58a3]305 cancelPayment() {
[de83113]306 window.location.href = '/flights';
[57e58a3]307 },
308 validateForm() {
309 return (
310 this.cardholder.trim().length > 0 &&
311 this.cardNumber.length === 16 &&
312 this.expiration.length > 0
313 );
314 }
[de83113]315 },
316 mounted(){
317 const params = new URLSearchParams(window.location.search);
318 this.userId = params.get("userId");
319 this.bookingId = params.get("bookingId");
320 this.flightId = params.get("flightId");
321 this.amount=params.get("amount");
[57e58a3]322 }
323 });
324</script>
325
326</body>
327</html>
Note: See TracBrowser for help on using the repository browser.