printing configuration output

app/static/css/application.css

@@ -903,28 +903,28 @@ a:hover {
 	} */
 
 :root {
-  --background-color: #00112c;
-  --font-options: "Segoe UI", sans-serif, Helvetica, Arial;
-  --background-color: #00112c;
-  --dropin-width: 500px;
-  --dropin-font: 17px;
-  --button-edges: 10px;
-  --body-edges: 10px;
-  --border-off: 1px solid #e6e9eb;
-  --active-background: #f7f8f9;
-  --bg-color: white;
-  --dropin-color: #f7f8f9;
-  --dropin-tab-color: white;
-  --main-green: #0abf53;
-  --main-grey: #f3f5f9;
-  --main-text: #00112c;
-  --secondary-text: #ffffff;
-  --main-font: "Roboto", sans-serif;
-  --text-align: left;
-  --text-bold: normal;
-  --text-italic: normal;
-  --small-text: 12px;
-  --payButton-width: 100%;
+	--background-color: #00112c;
+	--font-options: "Segoe UI", sans-serif, Helvetica, Arial;
+	--background-color: #00112c;
+	--dropin-width: 500px;
+	--dropin-font: 17px;
+	--button-edges: 10px;
+	--body-edges: 10px;
+	--border-off: 1px solid #e6e9eb;
+	--active-background: #f7f8f9;
+	--bg-color: white;
+	--dropin-color: #f7f8f9;
+	--dropin-tab-color: white;
+	--main-green: #0abf53;
+	--main-grey: #f3f5f9;
+	--main-text: #00112c;
+	--secondary-text: #ffffff;
+	--main-font: "Roboto", sans-serif;
+	--text-align: left;
+	--text-bold: normal;
+	--text-italic: normal;
+	--small-text: 12px;
+	--payButton-width: 100%;
 	--payments-spacing: 0px 0;
 	--paymentselected-margin: 8px 0;
 	--selectedBody-edges: 12px;
@@ -1119,3 +1119,23 @@ a:hover {
 .form-control-range {
   width: 50%;
 }
+/* 
+:not(pre)>code[class*=language-], pre[class*=language-] {
+    background: #00112c !important;
+} */
+
+pre {
+	outline: 1px solid #ccc;
+	padding: 5px;
+	margin: 5px;
+	background: #00112c;
+	color: #078F3E;
+}
+.string { 
+	color: white; 
+}
+.number { color: #0abf53; }
+.boolean { color: #0088FF; }
+.null { color: magenta; }
+.key { color: #A5AFBD; }
+

app/static/js/adyen-implementation.js

@@ -406,11 +406,9 @@ async function initCheckout() {
 			}
 
 		};
-		console.log(configuration)
-		document.getElementById("configCode").innerHTML = String(configuration);
-
-
-		console.log(openFirst)
+		// cloning configuration object to filter and log
+		const cloneConfig = Object.assign({}, configuration)
+		logConfig(cloneConfig);
 
 		const checkout = await AdyenCheckout(configuration);
 		checkout.create('dropin', {
@@ -432,6 +430,23 @@ async function initCheckout() {
 	}
 }
 
+// logging configuration object to UI
+function logConfig(cloneConfig) {
+	console.log(cloneConfig);
+	// let filteredConfig = loggedConfig
+
+	delete cloneConfig.paymentMethodsResponse;
+	cloneConfig.clientKey = "***"
+	cloneConfig.paymentMethodsConfiguration.paypal.merchantId = "***"
+	
+	let finalConfig = {"configuration": cloneConfig}
+	let stringConfig = JSON.stringify(finalConfig, null, 2);
+
+	console.log(stringConfig)
+
+	document.getElementById("configCode").innerHTML = syntaxHighlight(stringConfig);
+}
+
 /*function filterUnimplemented(pm) {
 	pm.paymentMethods = pm.paymentMethods.filter((it) =>
 		[
@@ -738,6 +753,30 @@ function showPaypal() {
 	}
 }
 
+//JSON highlight code styling
+function output(inp) {
+    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
+}
+
+function syntaxHighlight(json) {
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+                cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
 
 initCheckout();
 

app/templates/component.html

@@ -44,6 +44,10 @@
       integrity="sha384-Dm1w8jaVOWA8rxpzkxA41DIyw5VlBjpoMTPfAijlfepYGgLKF+hke3NKeU/KTX7t"
       crossorigin="anonymous"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
+    />
 
     <title>Checkout Create</title>
   </head>
@@ -1022,7 +1026,7 @@
                   role="tabpanel"
                   aria-labelledby="save-tab"
                 >
-                  <p id="configCode"></p>
+                  <pre id="configCode"><code id="configCode" class="configCode"></code></pre>
                 </div>
               </div>
             </div>
@@ -1036,6 +1040,14 @@
       integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"
       crossorigin="anonymous"
     ></script>
+    <script>
+    $.getJSON('https://api.github.com/users/trevorsenior?callback=?', 
+    function(data) {
+        var jsonString = JSON.stringify(data, null, 4);
+        $('#configCode').text(jsonString);
+        prettyPrint(); //apply syntax highlighting to to JSON
+    });
+  </script>
 
     <!-- data from front-end -->
     <script id="client-key" type="application/json">
@@ -1081,6 +1093,8 @@
       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
       crossorigin="anonymous"
     ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
+
   </body>
 </html>