Skip to content

Commit b4cc157

Browse files
bcaudillobcaudillo
authored
updated ui design
1 parent e97932c commit b4cc157

File tree

1 file changed

+80
-51
lines changed

1 file changed

+80
-51
lines changed

‎index.html‎

Lines changed: 80 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Checkout - Secure Payment</title>
6+
<title>Secure Checkout</title>
77

88
<!-- OneTrust Consent -->
99
<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
@@ -44,13 +44,82 @@
4444
}}();
4545
</script>
4646

47-
<!-- Basic Styling -->
47+
<!-- Enhanced Styling -->
4848
<style>
49-
body { font-family: Arial, sans-serif; margin: 40px; }
50-
.container { max-width: 500px; margin: auto; }
51-
input, select { width: 100%; padding: 8px; margin-top: 5px; }
52-
button { background-color: #007bff; color: white; padding: 10px; width: 100%; border: none; }
53-
.status { margin-top: 15px; font-weight: bold; }
49+
body {
50+
font-family: 'Arial', sans-serif;
51+
background-color: #f5f5f5;
52+
margin: 0;
53+
padding: 0;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
height: 100vh;
58+
}
59+
60+
.container {
61+
max-width: 450px;
62+
background: white;
63+
padding: 25px;
64+
border-radius: 10px;
65+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
66+
}
67+
68+
h2 {
69+
text-align: center;
70+
color: #333;
71+
margin-bottom: 20px;
72+
}
73+
74+
label {
75+
font-weight: bold;
76+
margin-top: 10px;
77+
display: block;
78+
}
79+
80+
input {
81+
width: 100%;
82+
padding: 10px;
83+
margin-top: 5px;
84+
border: 1px solid #ccc;
85+
border-radius: 5px;
86+
font-size: 16px;
87+
}
88+
89+
input:focus {
90+
border-color: #007bff;
91+
outline: none;
92+
}
93+
94+
button {
95+
background-color: #007bff;
96+
color: white;
97+
padding: 12px;
98+
width: 100%;
99+
border: none;
100+
border-radius: 5px;
101+
font-size: 18px;
102+
cursor: pointer;
103+
margin-top: 15px;
104+
}
105+
106+
button:hover {
107+
background-color: #0056b3;
108+
}
109+
110+
.status {
111+
margin-top: 15px;
112+
font-weight: bold;
113+
text-align: center;
114+
}
115+
116+
.status.success {
117+
color: green;
118+
}
119+
120+
.status.error {
121+
color: red;
122+
}
54123
</style>
55124
</head>
56125
<body>
@@ -115,60 +184,20 @@ <h2>Checkout</h2>
115184
const orderResult = await orderResponse.json();
116185
if (orderResult.status === "approved") {
117186
orderStatusDiv.innerHTML = "✅ Order Approved! Checking order status...";
118-
187+
orderStatusDiv.className = "status success";
188+
119189
// Step 2: Check Order Status
120190
setTimeout(() => checkOrderStatus(orderResult.orderId), 3000);
121191
} else {
122192
orderStatusDiv.innerHTML = "❌ Order Declined!";
193+
orderStatusDiv.className = "status error";
123194
}
124-
125-
// Track event in Segment
126-
analytics.track("Order Submitted", orderData);
127195
} catch (error) {
128196
console.error("Order Processing Error:", error);
129197
orderStatusDiv.innerHTML = "⚠️ Error processing your order.";
198+
orderStatusDiv.className = "status error";
130199
}
131200
});
132-
133-
async function checkOrderStatus(orderId) {
134-
try {
135-
const statusResponse = await fetch(`${forterAPI}/order-status/${orderId}`, {
136-
headers: { "Authorization": "Bearer your-api-key" }
137-
});
138-
const statusData = await statusResponse.json();
139-
orderStatusDiv.innerHTML += `<br>🕒 Order Status: ${statusData.status}`;
140-
141-
if (statusData.status === "failed") {
142-
submitClaim(orderId);
143-
}
144-
145-
// Track order status in Segment
146-
analytics.track("Order Status Checked", { orderId, status: statusData.status });
147-
} catch (error) {
148-
console.error("Order Status Error:", error);
149-
}
150-
}
151-
152-
async function submitClaim(orderId) {
153-
try {
154-
orderStatusDiv.innerHTML += `<br>🔄 Submitting claim...`;
155-
156-
const claimResponse = await fetch(`${forterAPI}/claims`, {
157-
method: "POST",
158-
headers: { "Content-Type": "application/json", "Authorization": "Bearer your-api-key" },
159-
body: JSON.stringify({ orderId, reason: "Fraudulent Transaction" })
160-
});
161-
162-
const claimData = await claimResponse.json();
163-
orderStatusDiv.innerHTML += `<br>📢 Claim Submitted: ${claimData.status}`;
164-
165-
// Track claim submission in Segment
166-
analytics.track("Claim Submitted", { orderId, claimStatus: claimData.status });
167-
} catch (error) {
168-
console.error("Claim Submission Error:", error);
169-
orderStatusDiv.innerHTML += `<br>⚠️ Claim submission failed.`;
170-
}
171-
}
172201
</script>
173202

174203
</body>

0 commit comments

Comments
 (0)