Skip to content

Commit 611a935

Browse files
bcaudillobcaudillo
authored
updated ui w/ forter's api
1 parent b4cc157 commit 611a935

File tree

1 file changed

+76
-59
lines changed

1 file changed

+76
-59
lines changed

‎index.html‎

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,46 @@
1414
<!-- Segment Analytics with OneTrust Consent Wrapper -->
1515
<script src="https://cdn.jsdelivr.net/npm/@segment/analytics-consent-wrapper-onetrust@latest/dist/umd/analytics-onetrust.umd.js"></script>
1616
<script>
17-
!function(){var i="analytics",analytics=window[i]=window[i]||[];
18-
if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");
19-
else{analytics.invoked=!0;
20-
analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group",
21-
"track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware",
22-
"addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];
23-
analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);
24-
var n=Array.prototype.slice.call(arguments);
25-
n.unshift(e);analytics.push(n);return analytics}};
26-
for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}
27-
analytics.load=function(key,n){var t=document.createElement("script");
28-
t.type="text/javascript";t.async=!0;
29-
t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";
30-
var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);
31-
analytics._loadOptions=n};
32-
analytics._writeKey="sdszlGyPuPhBGVdS1hp32Vs5ncjaGzAi";
33-
withOneTrust(analytics, { consentModel: () => 'opt-in'}).load("sdszlGyPuPhBGVdS1hp32Vs5ncjaGzAi", {
34-
integrations: {
35-
"Segment.io": {
36-
deliveryStrategy: {
37-
strategy: "batching",
38-
config: { size: 10 }
17+
!function(){
18+
var i="analytics",analytics=window[i]=window[i]||[];
19+
if(!analytics.initialize)if(analytics.invoked)window.console&&console.error("Segment snippet included twice.");
20+
else {
21+
analytics.invoked=!0;
22+
analytics.methods=[
23+
"trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group",
24+
"track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware",
25+
"addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"
26+
];
27+
analytics.factory=function(e){ return function(){
28+
if(window[i].initialized) return window[i][e].apply(window[i],arguments);
29+
var n=Array.prototype.slice.call(arguments);
30+
n.unshift(e);
31+
analytics.push(n);
32+
return analytics;
33+
}};
34+
for(var n=0;n<analytics.methods.length;n++){
35+
var key=analytics.methods[n];
36+
analytics[key]=analytics.factory(key);
3937
}
38+
analytics.load=function(key,n){
39+
var t=document.createElement("script");
40+
t.type="text/javascript"; t.async=!0;
41+
t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";
42+
var r=document.getElementsByTagName("script")[0];
43+
r.parentNode.insertBefore(t,r);
44+
analytics._loadOptions=n;
45+
};
46+
analytics._writeKey="sdszlGyPuPhBGVdS1hp32Vs5ncjaGzAi";
47+
withOneTrust(analytics, { consentModel: () => 'opt-in'}).load("sdszlGyPuPhBGVdS1hp32Vs5ncjaGzAi", {
48+
integrations: {
49+
"Segment.io": {
50+
deliveryStrategy: { strategy: "batching", config: { size: 10 } }
51+
}
52+
}
53+
});
54+
analytics.page();
4055
}
41-
}
42-
});
43-
analytics.page();
44-
}}();
56+
}();
4557
</script>
4658

4759
<!-- Enhanced Styling -->
@@ -122,8 +134,8 @@
122134
}
123135
</style>
124136
</head>
125-
<body>
126137

138+
<body>
127139
<div class="container">
128140
<h2>Checkout</h2>
129141
<form id="checkoutForm">
@@ -139,7 +151,7 @@ <h2>Checkout</h2>
139151
<label>Credit Card Number</label>
140152
<input type="text" id="ccNumber" required>
141153

142-
<label>Expiration Date</label>
154+
<label>Expiration Date (MM/YY)</label>
143155
<input type="text" id="ccExpiry" required>
144156

145157
<label>CVV</label>
@@ -152,53 +164,58 @@ <h2>Checkout</h2>
152164
</div>
153165

154166
<script>
155-
const forterAPI = "https://api.forter.com/v2"; // Forter API base URL
156-
const merchantID = "your-merchant-id"; // Replace with real merchant ID
167+
const forterAPI = "https://b95c1af980bc.api.forter-secure.com/v3/managed/orders";
168+
const siteID = "b95c1af980bc";
169+
const apiKey = "d765d808055979d41f3a77cd29a10da6a637255a:";
157170
const orderStatusDiv = document.getElementById("orderStatus");
158171

159172
document.getElementById("checkoutForm").addEventListener("submit", async function(event) {
160173
event.preventDefault();
161174

175+
// Get form values
176+
const fullName = document.getElementById("fullName").value;
177+
const email = document.getElementById("email").value;
178+
const address = document.getElementById("address").value;
179+
const ccNumber = document.getElementById("ccNumber").value;
180+
const ccExpiry = document.getElementById("ccExpiry").value;
181+
const ccCVV = document.getElementById("ccCVV").value;
182+
183+
const orderId = `ORDER-${Math.floor(Math.random() * 1000000)}`;
184+
const timestamp = Math.floor(Date.now() / 1000);
185+
162186
const orderData = {
163-
fullName: document.getElementById("fullName").value,
164-
email: document.getElementById("email").value,
165-
shippingAddress: document.getElementById("address").value,
166-
paymentDetails: {
167-
ccNumber: document.getElementById("ccNumber").value,
168-
ccExpiry: document.getElementById("ccExpiry").value,
169-
ccCVV: document.getElementById("ccCVV").value
170-
}
187+
authorizationStep: "PRE_AUTHORIZATION",
188+
orderId: orderId,
189+
checkoutTime: timestamp,
190+
orderType: "WEB",
191+
totalAmount: { amountUSD: "99.95" },
192+
cartItems: [
193+
{ basicItemData: { category: "Apparel and accessories", name: "White GenericBrand handbag", price: { amountUSD: "99.95" }, productId: "Ag54352R7768kkO", quantity: 1, type: "TANGIBLE" }}
194+
],
195+
connectionInformation: { customerIP: "10.0.0.127", userAgent: navigator.userAgent },
196+
payment: [{ creditCard: { bin: ccNumber.substring(0, 6), lastFourDigits: ccNumber.slice(-4), nameOnCard: fullName }}]
171197
};
172198

173199
try {
174-
// Step 1: Create Order in Forter
175-
const orderResponse = await fetch(`${forterAPI}/orders`, {
200+
const orderResponse = await fetch(`${forterAPI}/${orderId}`, {
176201
method: "POST",
177-
headers: {
178-
"Content-Type": "application/json",
179-
"Authorization": "Bearer your-api-key"
202+
headers: {
203+
"Content-Type": "application/json",
204+
"Authorization": `Basic ${btoa(apiKey)}`,
205+
"api-version": "2.2",
206+
"x-forter-siteid": siteID
180207
},
181-
body: JSON.stringify({ merchantId: merchantID, orderData })
208+
body: JSON.stringify(orderData)
182209
});
183210

184-
const orderResult = await orderResponse.json();
185-
if (orderResult.status === "approved") {
186-
orderStatusDiv.innerHTML = "✅ Order Approved! Checking order status...";
187-
orderStatusDiv.className = "status success";
188-
189-
// Step 2: Check Order Status
190-
setTimeout(() => checkOrderStatus(orderResult.orderId), 3000);
191-
} else {
192-
orderStatusDiv.innerHTML = "❌ Order Declined!";
193-
orderStatusDiv.className = "status error";
194-
}
211+
const result = await orderResponse.json();
212+
orderStatusDiv.innerHTML = result.status === "approved" ? "✅ Order Approved!" : "❌ Order Declined!";
213+
analytics.track("Order Submitted", orderData);
195214
} catch (error) {
196-
console.error("Order Processing Error:", error);
197-
orderStatusDiv.innerHTML = "⚠️ Error processing your order.";
198-
orderStatusDiv.className = "status error";
215+
console.error("Error:", error);
216+
orderStatusDiv.innerHTML = "⚠️ Error processing order.";
199217
}
200218
});
201219
</script>
202-
203220
</body>
204221
</html>

0 commit comments

Comments
 (0)