| 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>
|
|---|
| 10 | <body>
|
|---|
| 11 |
|
|---|
| 12 | <div id="app" class="transaction-container">
|
|---|
| 13 | <div class="transaction-box">
|
|---|
| 14 | <h2>Complete Your Payment</h2>
|
|---|
| 15 |
|
|---|
| 16 | <form @submit.prevent="processPayment">
|
|---|
| 17 | <div class="input-group">
|
|---|
| 18 | <label for="cardholder">Cardholder Name</label>
|
|---|
| 19 | <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
|
|---|
| 20 | </div>
|
|---|
| 21 |
|
|---|
| 22 | <div class="input-group">
|
|---|
| 23 | <label for="cardNumber">Card Number</label>
|
|---|
| 24 | <input type="text"
|
|---|
| 25 | id="cardNumber"
|
|---|
| 26 | v-model="cardNumber"
|
|---|
| 27 | maxlength="16"
|
|---|
| 28 | placeholder="1234 5678 9012 3456"
|
|---|
| 29 | required />
|
|---|
| 30 | </div>
|
|---|
| 31 |
|
|---|
| 32 | <div class="input-group">
|
|---|
| 33 | <label for="expiration">Expiration Date</label>
|
|---|
| 34 | <input type="month" id="expiration" v-model="expiration" required />
|
|---|
| 35 | </div>
|
|---|
| 36 |
|
|---|
| 37 | <div class="button-group">
|
|---|
| 38 | <button type="submit" class="pay-btn">Pay</button>
|
|---|
| 39 | <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
|
|---|
| 40 | </div>
|
|---|
| 41 | </form>
|
|---|
| 42 |
|
|---|
| 43 | <div v-if="paymentSuccess" class="success-message">
|
|---|
| 44 | ✅ Payment successful! Redirecting...
|
|---|
| 45 | </div>
|
|---|
| 46 | </div>
|
|---|
| 47 | </div>
|
|---|
| 48 |
|
|---|
| 49 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|---|
| 50 | <script>
|
|---|
| 51 |
|
|---|
| 52 | new Vue({
|
|---|
| 53 | el: '#app',
|
|---|
| 54 | data: {
|
|---|
| 55 | cardholder: '',
|
|---|
| 56 | cardNumber: '',
|
|---|
| 57 | expiration: '',
|
|---|
| 58 | amount: '',
|
|---|
| 59 | paymentSuccess: false
|
|---|
| 60 | },
|
|---|
| 61 | created(){
|
|---|
| 62 | const urlParams = new URLSearchParams(window.location.search);
|
|---|
| 63 | this.flightId = urlParams.get('flightId');
|
|---|
| 64 | this.amount = urlParams.get('amount');
|
|---|
| 65 |
|
|---|
| 66 | const user = JSON.parse(localStorage.getItem("user"));
|
|---|
| 67 | if(user){
|
|---|
| 68 | this.userId = user.id;
|
|---|
| 69 | }
|
|---|
| 70 | },
|
|---|
| 71 | methods: {
|
|---|
| 72 | processPayment() {
|
|---|
| 73 | const paymentDate = new Date().toISOString().split('T')[0];
|
|---|
| 74 | const transaction = {
|
|---|
| 75 | transaction_date:paymentDate,
|
|---|
| 76 | payment_status:'SUCCESS',
|
|---|
| 77 | amount:this.amount,
|
|---|
| 78 | userId:this.userId,
|
|---|
| 79 | bookingId:this.bookingId
|
|---|
| 80 | };
|
|---|
| 81 |
|
|---|
| 82 | axios.post('api/payments', transaction)
|
|---|
| 83 | .then(response => {
|
|---|
| 84 | console.log("Payment successful");
|
|---|
| 85 | this.paymentSuccess = true;
|
|---|
| 86 | setTimeout(() => window.location.href = '/flights',2000);
|
|---|
| 87 | })
|
|---|
| 88 | .catch(error => console.error("Payment failed", error));
|
|---|
| 89 | },
|
|---|
| 90 | cancelPayment() {
|
|---|
| 91 | window.location.href = '/flights'; // Redirecting to flight search on cancel
|
|---|
| 92 | },
|
|---|
| 93 | validateForm() {
|
|---|
| 94 | return (
|
|---|
| 95 | this.cardholder.trim().length > 0 &&
|
|---|
| 96 | this.cardNumber.length === 16 &&
|
|---|
| 97 | this.expiration.length > 0
|
|---|
| 98 | );
|
|---|
| 99 | }
|
|---|
| 100 | }
|
|---|
| 101 | });
|
|---|
| 102 | </script>
|
|---|
| 103 |
|
|---|
| 104 | </body>
|
|---|
| 105 | </html>
|
|---|
