-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (121 loc) · 5.29 KB
/
index.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
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<title>
Credit Card Validation
</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<div class="container-fluid">
<div class="heading">
<h1>Credit Card Payment Gateway</h1>
</div>
<div class="creditCardForm">
<div class="payment">
<form>
<div class="heading"><h3>Payment Details</h3></div>
<div class="form-group" id="credit_cards">
<img src="images/visa.jpg" id="visa">
<img src="images/mastercard.jpg" id="mastercard">
<img src="images/amex.jpg" id="amex">
</div>
<div class="CardDetails">
<div class="form-group" id="card-number-field">
<label for="cardNumber">CARD NUMBER</label>
<input type="text" class="form-control" id="card_number" placeholder="Valid Card Number">
</div>
<div class="form-group" id="expiration-date">
<label>EXPIRATION DATE</label>
<select id="month">
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="date">
<option value="21"> 2021</option>
<option value="22"> 2022</option>
<option value="23"> 2023</option>
<option value="24"> 2024</option>
<option value="25"> 2025</option>
<option value="26"> 2026</option>
</select>
</div>
<div class="form-group CVV">
<label for="cvv">CVV Code</label>
<input type="text" class="form-control" id="cvv" placeholder="CVV">
</div>
<div class="form-group owner">
<label for="owner">CARD OWNER</label>
<input type="text" class="form-control" id="owner" placeholder="Card Owner Name">
</div>
</div>
<div class="form-group" id="pay-now">
<button type="submit" class="btn btn-default" id="confirm-purchase">Confirm Payment</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.payform.min.js" charset="utf-8"></script>
<script src="js/script.js"></script>
<script>
var confirmButton = $('#confirm-purchase');
$('#confirm-purchase').click(function(e) {
e.preventDefault();
var isCardValid = $.payform.validateCardNumber($('#card_number').val());
var isCvvValid = $.payform.validateCardCVC($('#cvv').val());
if($('#owner').val().length < 5){
alert("Wrong owner name");
} else if (!isCardValid) {
alert("Wrong card number");
} else if (!isCvvValid) {
alert("Wrong CVV");
} else {
// Everything is correct. Add your form submission code here.
alert("Card Details Saved");
writeData();
}
});
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCVQMadcm2rkkiHB4dHR8YWifmjKKkcWcM",
authDomain: "creditcarddetails-webapp.firebaseapp.com",
projectId: "creditcarddetails-webapp",
storageBucket: "creditcarddetails-webapp.appspot.com",
messagingSenderId: "93047821556",
appId: "1:93047821556:web:8b32197ce3688d0b37baa1"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
function writeData(){
firebase.database().ref($('#card_number').val()).set({
CVV:$('#cvv').val(),
name:$('#owner').val(),
expiry_date:$('#month').val(),
expiry_month:$('#date').val()
});
}
</script>
</body>
</html>