sync with main branch

rtCamp · Dec 14, 2023 · 26bf2db · 26bf2db
2 parents 8e55c87 + 23bee54
commit 26bf2db
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 2 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,8 @@
 protocol=http # http or https
 domain-a=localhost # domain-aaa.com
+domain-a-background=bg-green-100
 domain-b=localhost # domain-bbb.com
+domain-b-background=bg-blue-100
 domain-c=localhost # domain-ccc.com
+domain-c-background=bg-red-100
 port=8080 # port to listen on
diff --git a/app.js b/app.js
@@ -35,6 +35,20 @@ app.use((req, res, next) => {
 	res.locals.domainC = process.env['domain-c'];
 	res.locals.port = process.env.port;
 	res.locals.isPortPresent = req.get('host').includes(':');
+	res.locals.currentDomain = req.get( 'host' );
+	switch ( res.locals.currentDomain ) {
+		case res.locals.domainA:
+			res.locals.backgroundColor = process.env['domain-a-background'];
+			break;
+		case res.locals.domainB:
+			res.locals.backgroundColor = process.env['domain-b-background'];
+			break;
+		case res.locals.domainC:
+			res.locals.backgroundColor = process.env['domain-c-background'];
+			break;
+		default:
+			res.locals.backgroundColor = 'bg-gray-100';
+	}
 	next();  // Proceed to the next middleware or route handler
 });
 
@@ -46,7 +60,13 @@ demoTypes.forEach(demoType => {
 });
 
 // Mount routes for different scenarios
-const scenarios = ['ecommerce', 'single-sign-on', 'analytics', 'embedded-video', 'create-account', 'third-party-auth', 'payment-flow', 'content-delivery-networks', 'recommendations'];
+const scenarios = [
+	'ecommerce',
+	'single-sign-on',
+	'analytics',
+	'embedded-video',
+	'payment-gateway',
+];
 scenarios.forEach(scenario => {
 	const scenarioRoutes = require(`./scenarios/${scenario}/routes`);
 	app.use(`/${scenario}`, scenarioRoutes);  // Mount the routes on a path specific to the scenario

diff --git a/common/header.ejs b/common/header.ejs
@@ -6,4 +6,4 @@
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100 flex flex-col min-h-screen">
+<body class="<%= backgroundColor %> flex flex-col min-h-screen">
diff --git a/common/index.ejs b/common/index.ejs
@@ -24,6 +24,10 @@
                 class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
                 🔐 Single Sign-On
             </a>
+            <a href="/payment-gateway"
+            class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+                💳 Payment Gateway
+            </a>
         </div>
     </section>
 <h2 class="text-3xl font-bold mb-4 text-center mt-4">API Demos</h2>

diff --git a/scenarios/payment-gateway/checkout.ejs b/scenarios/payment-gateway/checkout.ejs
@@ -0,0 +1,15 @@
+<%- include(commonPath + '/header.ejs') %>
+
+<div class="container mx-auto py-8">
+    <div class="bg-white rounded-lg p-8 shadow-lg w-full max-w-lg mx-auto text-center">
+        <h1 class="text-3xl font-bold mb-4">Checkout</h1>
+        <div class="bg-gray-100 p-4 rounded-lg mb-4">
+            <p class="text-lg">Item: <%= item %> - $<%= price %></p>
+        </div>
+        <div class="overflow-hidden">
+            <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/payment-gateway/payment-form" class="w-full h-96" frameborder="0"></iframe>
+        </div>
+    </div>
+</div>
+
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/scenarios/payment-gateway/payment-form.ejs b/scenarios/payment-gateway/payment-form.ejs
@@ -0,0 +1,22 @@
+<%- include(commonPath + '/header.ejs') %>
+
+<div class="container mx-auto py-8">
+    <div class="bg-inherit rounded-lg p-8 w-full max-w-lg mx-auto text-center">
+        <h1 class="text-3xl font-bold mb-4"><%= title %></h1>
+
+        <% if (typeof message !== 'undefined' && message) { %>
+            <p class="text-lg font-bold mb-4 <%= status ? 'text-green-500' : 'text-red-500' %>"><%- message %></p>
+        <% } else { %>
+
+            <form method="post">
+                <div class="mb-4">
+                    <label for="cardNumber" class="block text-left mb-2">Card Number (Use 4242424242424242 for demo):</label>
+                    <input id="cardNumber" name="cardNumber" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" autocomplete="cc-number" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
+                </div>
+                <input type="submit" value="Submit Payment" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
+            </form>
+        <% } %>
+    </div>
+</div>
+
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/scenarios/payment-gateway/routes.js b/scenarios/payment-gateway/routes.js
@@ -0,0 +1,51 @@
+const express = require( 'express' );
+const path = require( 'path' );
+const router = express.Router();
+
+
+router.get( '/', ( req, res ) => {
+	res.render( path.join( __dirname, 'checkout' ), {
+		title: 'Payment Gateway Demo',
+		item: "Virtual Badge for testing the site",
+		price: 10,
+	} );
+} );
+router.get( '/payment-form', ( req, res ) => {
+	const sessionId = req.cookies.session_id;
+
+	if ( !sessionId ) {
+		res.cookie( 'session_id', 'some_random_session_id', {
+			maxAge: 900000,
+			httpOnly: true,
+			domain: res.locals.domainC,
+			sameSite: "none",
+			secure: true
+		} );
+	}
+	res.render( path.join( __dirname, 'payment-form' ), {
+		title: 'Payment Gateway Form',
+	} );
+} );
+router.post( '/payment-form', ( req, res ) => {
+	const sessionId = req.cookies.session_id;
+	const cardNumber = req.body.cardNumber;
+
+	let message = '';
+	let status = 0;
+
+	if (sessionId && ( cardNumber === '4242424242424242' || cardNumber === '4242-4242-4242-4242' )) {
+		status = 1;
+		message = 'Payment successful!';
+	} else if (!sessionId) {
+		message = 'Payment failed! Session not valid.';
+	} else {
+		message = 'Invalid card number. <br/>Please use 4242424242424242 for demo purchases.';
+	}
+
+	res.render( path.join( __dirname, 'payment-form' ), {
+		title: 'Payment Gateway Result',
+		message: message,
+		status: status,
+	} );
+} );
+module.exports = router;