diff --git a/app/static/css/application.css b/app/static/css/application.css
index cfa03fb..f7220d3 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -15,6 +15,15 @@ body {
   box-sizing: border-box;
 }
 
+a {
+  color: var(--main-text);
+}
+
+.nav-link.active {
+  background-color: var(--main-green) !important;
+  color: var(--main-grey) !important;
+}
+
 a,
 u {
   text-decoration: none;
@@ -47,6 +56,8 @@ a:hover {
 
 .row {
   height: 100%;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .dropIn-UI {
@@ -553,6 +564,8 @@ a:hover {
   padding: 0 0 0 12px;
   position: relative;
   width: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 @media (min-width: 768px) {
@@ -698,8 +711,10 @@ a:hover {
   height: 0%;
   background-color: rgb(6, 6, 46);
   color: var(--main-grey);
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
 .test-cards-display {
@@ -733,6 +748,7 @@ a:hover {
   -moz-perspective: 600px;
   perspective: 600px;
   background: rgb(6, 6, 46);
+  margin: 1rem auto;
 }
 
 .card__part {
@@ -925,13 +941,13 @@ a:hover {
   --text-italic: normal;
   --small-text: 12px;
   --payButton-width: 100%;
-	--payments-spacing: 0px 0;
-	--paymentselected-margin: 8px 0;
-	--selectedBody-edges: 12px;
-	--topedges-left: 12px;
-	--topedges-right: 12px;
-	--bottomedges-left: 12px;
-	--bottomedges-right: 12px;
+  --payments-spacing: 0px 0;
+  --paymentselected-margin: 8px 0;
+  --selectedBody-edges: 12px;
+  --topedges-left: 12px;
+  --topedges-right: 12px;
+  --bottomedges-left: 12px;
+  --bottomedges-right: 12px;
 }
 
 .card-visited .card__back {
@@ -960,40 +976,39 @@ a:hover {
 } */
 
 .adyen-checkout__button.adyen-checkout__button--pay {
-	width: var(--payButton-width) !important;
-	margin-right: auto;
-    margin-left: auto;
-	display: flex;
-    justify-content: center;
-	background: var(--background-color) !important;
-  	border-radius: var(--button-edges) !important;
+  width: var(--payButton-width) !important;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  justify-content: center;
+  background: var(--background-color) !important;
+  border-radius: var(--button-edges) !important;
 }
 
 .form-group {
-  width: 250px;
+  width: 9rem;
   /* Full-width */
   height: 35px;
   /* Specified height */
 }
 
 .adyen-checkout__payment-method {
-	width: var(--dropin-width) !important;
-	font-size: var(--dropin-font) !important;
-	font-family: var(--font-options) !important;
-	text-align: var(--text-align) !important;
-	border-radius: var(--body-edges) !important;
-	border: var(--border-off) !important;
-	background: var(--dropin-tab-color) !important;
-	font-weight: var(--text-bold) !important;
-	margin: var(--payments-spacing) !important;
+  width: var(--dropin-width) !important;
+  font-size: var(--dropin-font) !important;
+  font-family: var(--font-options) !important;
+  text-align: var(--text-align) !important;
+  border-radius: var(--body-edges) !important;
+  border: var(--border-off) !important;
+  background: var(--dropin-tab-color) !important;
+  font-weight: var(--text-bold) !important;
+  margin: var(--payments-spacing) !important;
 }
 
-.adyen-checkout__payment-methods-list li:nth-child(2){
-	border-top-left-radius: var(--topedges-left) !important;
-	border-top-right-radius: var(--topedges-right) !important;
+.adyen-checkout__payment-methods-list li:nth-child(2) {
+  border-top-left-radius: var(--topedges-left) !important;
+  border-top-right-radius: var(--topedges-right) !important;
 }
 
-
 .adyen-checkout__payment-methods-list li:last-child {
   border-bottom-left-radius: var(--bottomedges-left) !important;
   border-bottom-right-radius: var(--bottomedges-right) !important;
@@ -1004,28 +1019,15 @@ a:hover {
 }
 
 .adyen-checkout__payment-method--selected {
-	background: var(--dropin-color) !important;
-	margin: var(--paymentselected-margin) !important;
-	border-radius: var(--selectedBody-edges) !important;
-
+  background: var(--dropin-color) !important;
+  margin: var(--paymentselected-margin) !important;
+  border-radius: var(--selectedBody-edges) !important;
 }
 
 .adyen-checkout__payment-method__radio {
   /* Radio button in payment method header */
 }
 
-.checkout .col {
-  background: var(--bg-color) !important;
-}
-
-.panel-footer {
-  margin-left: 40px;
-}
-
-.panel-body {
-  background: white;
-}
-
 .adyen-checkout__payment-method__name {
   font-weight: var(--text-bold) !important;
   font-style: var(--text-italic) !important;
@@ -1117,7 +1119,7 @@ a:hover {
 
 .form-control-file,
 .form-control-range {
-  width: 50%;
+  /* width: 50%; */
 }
 /* 
 :not(pre)>code[class*=language-], pre[class*=language-] {
@@ -1125,18 +1127,60 @@ a:hover {
 } */
 
 pre {
-	outline: 1px solid #ccc;
-	padding: 5px;
-	margin: 5px;
-	background: #00112c;
-	color: #078F3E;
+  outline: 1px solid #ccc;
+  padding: 5px;
+  margin: 5px;
+  background: #00112c;
+  color: #078f3e;
 }
-.string { 
-	color: white; 
+.string {
+  color: white;
+}
+.number {
+  color: #0abf53;
+}
+.boolean {
+  color: #0088ff;
+}
+.null {
+  color: magenta;
+}
+.key {
+  color: #a5afbd;
 }
-.number { color: #0abf53; }
-.boolean { color: #0088FF; }
-.null { color: magenta; }
-.key { color: #A5AFBD; }
 
+.form-control-range::before {
+  background-color: red;
+  color: red;
+  background: red;
+}
 
+.panel-collapse .collapse .show {
+  width: 5000px !important;
+}
+
+.copyBtnsStyle {
+  font-family: var(--main-font);
+  background: var(--main-text);
+  border-radius: 10px;
+  color: var(--main-grey);
+  font-size: 0.9rem;
+  padding: 0;
+}
+
+.copyText {
+  margin: auto;
+}
+
+@media (max-width: 1500px) {
+  /* screen width (or the .grid) needs to be at least 500px wide, in order to display the .sidebar, because min-width of 200px is exactly 40% of 500px, so display it when 500px and more, but hide it when less */
+  .config-UI {
+    display: none;
+  }
+  .dropIn-UI {
+    width: 100%;
+    display: flex;
+    margin: 0%;
+    padding: 0;
+  }
+}
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index 38ee326..be53cad 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -1,12 +1,11 @@
-const clientKey = JSON.parse(document.getElementById('client-key').innerHTML);
-const storedCountry = document.getElementById('country-code');
-const payMethodsFE = document.getElementById('pay-methods')
+const clientKey = JSON.parse(document.getElementById("client-key").innerHTML)
+const storedCountry = document.getElementById("country-code")
 // let country = "GB";
-let countrySettings = "NL";
+let countrySettings = "NL"
 
 // Used to retrieve country value from url
-const urlCountryParams = new URLSearchParams(window.location.search);
-const countryURL = urlCountryParams.get('country');
+const urlCountryParams = new URLSearchParams(window.location.search)
+const countryURL = urlCountryParams.get("country")
 console.log(countryURL)
 
 // global configuration variables
@@ -19,87 +18,88 @@ let hideCVC = false
 let placeholderData = false
 
 // identify checkout div and create new empty div to replace with
-const oldDiv = document.getElementById("dropin-container");
-const newDiv = document.createElement('div');
-
+const oldDiv = document.getElementById("dropin-container")
+const newDiv = document.createElement("div")
 
 const flagUrlMap = {
-	"NL": {
-		"src": "https://ca-test.adyen.com/ca/adl/img/flags/nl.svg",
-		"total": "€40.00",
-		"currency": "EUR",
-		"href": "{{ url_for('checkout', integration=method, country=NL) }}"
-	},
-	"GB": {
-		"src": "https://ca-test.adyen.com/ca/adl/img/flags/gb.svg",
-		"total": "£40.00",
-		"currency": "GBP",
-		"href": "{{ url_for('checkout', integration=method, country=GB) }}"
-	},
-	"US": {
-		"src": "https://ca-test.adyen.com/ca/adl/img/flags/us.svg",
-		"total": "$40.00",
-		"currency": "USD",
-		"href": "{{ url_for('checkout', integration=method, country=US) }}"
-	}
+  NL: {
+    src: "https://ca-test.adyen.com/ca/adl/img/flags/nl.svg",
+    total: "€40.00",
+    currency: "EUR",
+    href: "{{ url_for('checkout', integration=method, country=NL) }}",
+  },
+  GB: {
+    src: "https://ca-test.adyen.com/ca/adl/img/flags/gb.svg",
+    total: "£40.00",
+    currency: "GBP",
+    href: "{{ url_for('checkout', integration=method, country=GB) }}",
+  },
+  US: {
+    src: "https://ca-test.adyen.com/ca/adl/img/flags/us.svg",
+    total: "$40.00",
+    currency: "USD",
+    href: "{{ url_for('checkout', integration=method, country=US) }}",
+  },
 }
 
 const testCardBrandsMap = {
-	"visa": {
-		"src": "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg",
-		"cardNumber": "4111 1111 1111 1111",
-		"expiry": "03/30",
-		"cvc": "737"
-	},
-	"mc": {
-		"src": "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/mc.svg",
-		"cardNumber": "2222 4107 4036 0010",
-		"expiry": "03/30",
-		"cvc": "737"
-	},
-	"amex": {
-		"src": "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/amex.svg",
-		"cardNumber": "3700 0000 0000 002",
-		"expiry": "03/30",
-		"cvc": "7373"
-	}
+  visa: {
+    src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/visa.svg",
+    cardNumber: "4111 1111 1111 1111",
+    expiry: "03/30",
+    cvc: "737",
+  },
+  mc: {
+    src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/mc.svg",
+    cardNumber: "2222 4107 4036 0010",
+    expiry: "03/30",
+    cvc: "737",
+  },
+  amex: {
+    src: "https://checkoutshopper-live.adyen.com/checkoutshopper/images/logos/amex.svg",
+    cardNumber: "3700 0000 0000 002",
+    expiry: "03/30",
+    cvc: "7373",
+  },
 }
 
-
 // Country dropdown changes the flag image and reloads the dropin with new country values
 function changeSelect(el) {
-	document.getElementById('flag_img').src = flagUrlMap[el.value].src;
-	const country = el.value;
-	countrySettings = getCountryData(country)
-	console.log(countrySettings)
-	if (document.getElementById("dropin-container") && document.getElementById("placeholderData").checked == true) {
-		placeholderData = {
-			holderName: "Jane Doe",
-			billingAddress: {
-				street: countrySettings.street,
-				postalCode: countrySettings.postalCode,
-				city: countrySettings.city,
-				country: countrySettings.countryCode,
-				stateOrProvince: countrySettings.stateOrProvince,
-				houseNumberOrName: countrySettings.houseNumberOrName
-			}
-		}
-		// document.getElementById("placeholderData").checked = false
-		// placeholderData = false
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container");
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	} else if (document.getElementById("dropin-container")) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container");
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
+  document.getElementById("flag_img").src = flagUrlMap[el.value].src
+  const country = el.value
+  countrySettings = getCountryData(country)
+  console.log(countrySettings)
+  if (
+    document.getElementById("dropin-container") &&
+    document.getElementById("placeholderData").checked == true
+  ) {
+    placeholderData = {
+      holderName: "Jane Doe",
+      billingAddress: {
+        street: countrySettings.street,
+        postalCode: countrySettings.postalCode,
+        city: countrySettings.city,
+        country: countrySettings.countryCode,
+        stateOrProvince: countrySettings.stateOrProvince,
+        houseNumberOrName: countrySettings.houseNumberOrName,
+      },
+    }
+    // document.getElementById("placeholderData").checked = false
+    // placeholderData = false
+    const oldDiv = document.getElementById("dropin-container")
+    const newDiv = document.createElement("div")
+    oldDiv.replaceWith(newDiv)
+    newDiv.setAttribute("id", "dropin-container")
+    newDiv.setAttribute("class", "payment p-5")
+    initCheckout()
+  } else if (document.getElementById("dropin-container")) {
+    const oldDiv = document.getElementById("dropin-container")
+    const newDiv = document.createElement("div")
+    oldDiv.replaceWith(newDiv)
+    newDiv.setAttribute("id", "dropin-container")
+    newDiv.setAttribute("class", "payment p-5")
+    initCheckout()
+  }
 }
 
 // function openFirstPayment() {
@@ -119,334 +119,357 @@ function changeSelect(el) {
 // }
 
 // Funtion to toggle first payment method open
-document.getElementById('firstPayBox').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		openFirst = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		openFirst = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
+document
+  .getElementById("firstPayBox")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      openFirst = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      openFirst = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // Function to add billing address
-document.getElementById('billAdd').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		billAdd = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		billAdd = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
-
+document
+  .getElementById("billAdd")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      billAdd = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      billAdd = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // Function to show only saved payment methods
-document.getElementById('onlyStored').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		onlyStored = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		onlyStored = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
+document
+  .getElementById("onlyStored")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      onlyStored = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      onlyStored = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // function to show holder name field
-document.getElementById('holderName').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		holderName = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		holderName = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
-
+document
+  .getElementById("holderName")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      holderName = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      holderName = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // Funtion to show all payment methods
-document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		showPayMethod = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		showPayMethod = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
+document
+  .getElementById("showPayMethod")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      showPayMethod = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      showPayMethod = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // Funtion to hide or show cvc
-document.getElementById('hideCVC').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		hideCVC = true
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		hideCVC = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
+document
+  .getElementById("hideCVC")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      hideCVC = true
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      hideCVC = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 // Funtion for including placeholder data
-document.getElementById('placeholderData').parentNode.addEventListener('click', function (event) {
-	// the value of `this` here is the element the event was fired on.
-	// In this situation, it's the element with the ID of 'approval'.
-	if (this.querySelector('input').checked) {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		placeholderData = {
-			holderName: "Jane Doe",
-			billingAddress: {
-				street: countrySettings.street,
-				postalCode: countrySettings.postalCode,
-				city: countrySettings.city,
-				country: countrySettings.countryCode,
-				stateOrProvince: countrySettings.stateOrProvince,
-				houseNumberOrName: countrySettings.houseNumberOrName
-			}
-		}
-		console.log(countrySettings)
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-	else {
-		const oldDiv = document.getElementById("dropin-container");
-		const newDiv = document.createElement('div');
-		placeholderData = false
-		oldDiv.replaceWith(newDiv)
-		newDiv.setAttribute("id", "dropin-container")
-		newDiv.setAttribute("class", "payment p-5")
-		initCheckout()
-	}
-})
+document
+  .getElementById("placeholderData")
+  .parentNode.addEventListener("click", function (event) {
+    // the value of `this` here is the element the event was fired on.
+    // In this situation, it's the element with the ID of 'approval'.
+    if (this.querySelector("input").checked) {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      placeholderData = {
+        holderName: "Jane Doe",
+        billingAddress: {
+          street: countrySettings.street,
+          postalCode: countrySettings.postalCode,
+          city: countrySettings.city,
+          country: countrySettings.countryCode,
+          stateOrProvince: countrySettings.stateOrProvince,
+          houseNumberOrName: countrySettings.houseNumberOrName,
+        },
+      }
+      console.log(countrySettings)
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    } else {
+      const oldDiv = document.getElementById("dropin-container")
+      const newDiv = document.createElement("div")
+      placeholderData = false
+      oldDiv.replaceWith(newDiv)
+      newDiv.setAttribute("id", "dropin-container")
+      newDiv.setAttribute("class", "payment p-5")
+      initCheckout()
+    }
+  })
 
 const countryVariables = [
-	{
-		countryCode: "NL",
-		currency: "EUR",
-		locale: "en_NL",
-		city: "Amsterdam",
-		postalCode: "1011DJ",
-		street: "Simon Carmiggeltstraat",
-		houseNumberOrName: "6 - 50"
-	},
-	{
-		countryCode: "GB",
-		currency: "GBP",
-		locale: "en_GB",
-		city: "London",
-		postalCode: "W1T3HE",
-		street: "Wells Mews",
-		houseNumberOrName: "12 13"
-	},
-	{
-		countryCode: "US",
-		currency: "USD",
-		locale: "en_US",
-		city: "New York City",
-		postalCode: "10003",
-		street: "71 5th Avenue",
-		stateOrProvince: "NY",
-		houseNumberOrName: "Floor 11"
-	}
+  {
+    countryCode: "NL",
+    currency: "EUR",
+    locale: "en_NL",
+    city: "Amsterdam",
+    postalCode: "1011DJ",
+    street: "Simon Carmiggeltstraat",
+    houseNumberOrName: "6 - 50",
+  },
+  {
+    countryCode: "GB",
+    currency: "GBP",
+    locale: "en_GB",
+    city: "London",
+    postalCode: "W1T3HE",
+    street: "Wells Mews",
+    houseNumberOrName: "12 13",
+  },
+  {
+    countryCode: "US",
+    currency: "USD",
+    locale: "en_US",
+    city: "New York City",
+    postalCode: "10003",
+    street: "71 5th Avenue",
+    stateOrProvince: "NY",
+    houseNumberOrName: "Floor 11",
+  },
 ]
 if (storedCountry) {
-	const selectedCountry = JSON.parse(storedCountry.innerHTML);
-	countrySettings = getCountryData(selectedCountry)
+  const selectedCountry = JSON.parse(storedCountry.innerHTML)
+  countrySettings = getCountryData(selectedCountry)
 }
 if (countryURL) {
-	const selectedCountry = countryURL
-	countrySettings = getCountryData(selectedCountry)
+  const selectedCountry = countryURL
+  countrySettings = getCountryData(selectedCountry)
 }
 
 function getCountryData(countrySettings) {
-	return countryVariables.find((locality) => locality.countryCode === countrySettings)
+  return countryVariables.find(
+    (locality) => locality.countryCode === countrySettings
+  )
 }
 
 async function initCheckout() {
-	try {
-		const paymentMethodsResponse = await callServer("/api/getPaymentMethods", countrySettings, payMethods);
-		console.log(countrySettings)
-		console.log(payMethods)
-		let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
-		console.log(prettyResponse)
-		console.log(openFirst);
-		let configuration = {
-			paymentMethodsResponse: paymentMethodsResponse,
-			clientKey,
-			locale: countrySettings.locale || "en_NL",
-        	countryCode: countrySettings.countryCode || "NL",
-			environment: "test",
-			showPayButton: true,
-			paymentMethodsConfiguration: {
-				ideal: {
-					showImage: true
-				},
-				card: {
-					hasHolderName: holderName,
-					holderNameRequired: true,
-					hideCVC: hideCVC,
-					// brands: ['mc','visa','amex'],
-					name: "Credit or debit card",
-					data: {
-						holderName: placeholderData.holderName,
-						billingAddress: placeholderData.billingAddress 
-					},
-					enableStoreDetails: true,
-					billingAddressRequired: billAdd,
-					amount: {
-						value: 4000,
-						currency: countrySettings.currency || "EUR"
-					}
-				},
-				storedCard: {
-					hideCVC: hideCVC
-				},
-				paypal: {
-					amount: {
-						currency: countrySettings.currency || "EUR",
-						value: 4000
-					},
-					//commit: false,
-					environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
-					countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production.
-					showPayButton: true,
-					merchantId: "AD74FQNVXQY5E"
-					//subtype: "redirect"
-				}
-			},
-			onSubmit: (state, dropin) => {
+  try {
+    const paymentMethodsResponse = await callServer(
+      "/api/getPaymentMethods",
+      countrySettings
+    )
+    console.log(countrySettings)
+    let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
+    console.log(prettyResponse)
+    console.log(openFirst)
+    let configuration = {
+      paymentMethodsResponse: paymentMethodsResponse,
+      clientKey,
+      locale: countrySettings.locale || "en_NL",
+      countryCode: countrySettings.countryCode || "NL",
+      environment: "test",
+      showPayButton: true,
+      paymentMethodsConfiguration: {
+        ideal: {
+          showImage: true,
+        },
+        card: {
+          hasHolderName: holderName,
+          holderNameRequired: true,
+          hideCVC: hideCVC,
+          // brands: ['mc','visa','amex'],
+          name: "Credit or debit card",
+          data: {
+            holderName: placeholderData.holderName,
+            billingAddress: placeholderData.billingAddress,
+          },
+          enableStoreDetails: true,
+          billingAddressRequired: billAdd,
+          amount: {
+            value: 4000,
+            currency: countrySettings.currency || "EUR",
+          },
+        },
+        storedCard: {
+          hideCVC: hideCVC,
+        },
+        paypal: {
+          amount: {
+            currency: countrySettings.currency || "EUR",
+            value: 4000,
+          },
+          //commit: false,
+          environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
+          countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production.
+          showPayButton: true,
+          merchantId: "AD74FQNVXQY5E",
+          //subtype: "redirect"
+        },
+      },
+      onSubmit: (state, dropin) => {
+        if (state.isValid) {
+          handleSubmission(
+            state,
+            dropin,
+            "/api/initiatePayment",
+            countrySettings
+          )
+        }
+      },
+      onAdditionalDetails: (state, dropin) => {
+        handleSubmission(state, dropin, "/api/submitAdditionalDetails")
+      },
+      onDisableStoredPaymentMethod: (
+        storedPaymentMethodId,
+        resolve,
+        reject
+      ) => {
+        // handleSubmission(state, dropin, "/api/disable");
+      },
+    }
+    // cloning configuration object to filter and log
+    const cloneConfig = Object.assign({}, configuration)
+    logConfig(cloneConfig)
 
-				if (state.isValid) {
-					handleSubmission(state, dropin, "/api/initiatePayment", countrySettings, payMethods);
-				}
-			},
-			onAdditionalDetails: (state, dropin) => {
-				handleSubmission(state, dropin, "/api/submitAdditionalDetails");
-			},
-			onDisableStoredPaymentMethod: (storedPaymentMethodId, resolve, reject) => {
-				// handleSubmission(state, dropin, "/api/disable");
-			}
-
-		};
-		// cloning configuration object to filter and log
-		const cloneConfig = Object.assign({}, configuration)
-		logConfig(cloneConfig);
-
-		const checkout = await AdyenCheckout(configuration);
-		checkout.create('dropin', {
-			showRemovePaymentMethodButton: true,
-			openFirstPaymentMethod: openFirst,
-			showStoredPaymentMethods: onlyStored,
-			showPaymentMethods: showPayMethod,
-			onDisableStoredPaymentMethod: (storedPaymentMethodId, resolve, reject) => {
-				callServer("/api/disable", { "storedPaymentMethodId": storedPaymentMethodId });
-				resolve()
-				reject()
-			}
-		})
-			.mount("#dropin-container");
-
-	} catch (error) {
-		console.error(error);
-		alert("Error occurred. Look at console for details");
-	}
+    const checkout = await AdyenCheckout(configuration)
+    checkout
+      .create("dropin", {
+        showRemovePaymentMethodButton: true,
+        openFirstPaymentMethod: openFirst,
+        showStoredPaymentMethods: onlyStored,
+        showPaymentMethods: showPayMethod,
+        onDisableStoredPaymentMethod: (
+          storedPaymentMethodId,
+          resolve,
+          reject
+        ) => {
+          callServer("/api/disable", {
+            storedPaymentMethodId: storedPaymentMethodId,
+          })
+          resolve()
+          reject()
+        },
+      })
+      .mount("#dropin-container")
+  } catch (error) {
+    console.error(error)
+    alert("Error occurred. Look at console for details")
+  }
 }
 
 // logging configuration object to UI
 function logConfig(cloneConfig) {
-	console.log(cloneConfig);
-	// let filteredConfig = loggedConfig
+  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);
+  delete cloneConfig.paymentMethodsResponse
+  cloneConfig.clientKey = "***"
+  cloneConfig.paymentMethodsConfiguration.paypal.merchantId = "***"
 
-	console.log(stringConfig)
+  let finalConfig = { configuration: cloneConfig }
+  let stringConfig = JSON.stringify(finalConfig, null, 2)
 
-	document.getElementById("configCode").innerHTML = syntaxHighlight(stringConfig);
+  console.log(stringConfig)
+
+  document.getElementById("configCode").innerHTML =
+    syntaxHighlight(stringConfig)
 }
 
 /*function filterUnimplemented(pm) {
@@ -470,221 +493,217 @@ function logConfig(cloneConfig) {
 	return pm;
 }*/
 
-
 // Event handlers called when the shopper selects the pay button,
 // or when additional information is required to complete the payment
-async function handleSubmission(state, dropin, url, countrySettings, payMethods) {
-	try {
-		//keeping the country data for the /payments call
-		const mergedData = {
-			...state.data,
-			...countrySettings,
-			...payMethods
-		}
-		const res = await callServer(url, mergedData);
-		let prettyResponse = JSON.stringify(res, null, 2)
-		console.log(prettyResponse)
-		handleServerResponse(res, dropin);
-	} catch (error) {
-		console.error(error);
-		alert("Error occurred. Look at console for details");
-	}
+async function handleSubmission(state, dropin, url, countrySettings) {
+  try {
+    //keeping the country data for the /payments call
+    const mergedData = {
+      ...state.data,
+      ...countrySettings,
+    }
+    const res = await callServer(url, mergedData)
+    let prettyResponse = JSON.stringify(res, null, 2)
+    console.log(prettyResponse)
+    handleServerResponse(res, dropin)
+  } catch (error) {
+    console.error(error)
+    alert("Error occurred. Look at console for details")
+  }
 }
 
 // Calls your server endpoints
-async function callServer(url, data, payMethods) {
-	const res = await fetch(url, {
-		method: "POST",
-		body: data ? JSON.stringify(data) : "",
-		headers: {
-			"Content-Type": "application/json"
-		}
-	});
-	return await res.json();
+async function callServer(url, data) {
+  const res = await fetch(url, {
+    method: "POST",
+    body: data ? JSON.stringify(data) : "",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  return await res.json()
 }
 
-const successDiv = document.querySelector('.successDiv')
+const successDiv = document.querySelector(".successDiv")
 successDiv.style.display = "none"
-const errorDiv = document.querySelector('.errorDiv')
+const errorDiv = document.querySelector(".errorDiv")
 errorDiv.style.display = "none"
 
 // Handles responses sent from your server to the client
 function handleServerResponse(res, dropin) {
-	if (res.action) {
-		dropin.handleAction(res.action);
-	} else {
-		switch (res.resultCode) {
-			case "Authorised":
-				let currentDiv = document.getElementById("dropin-container");
-				successDiv.style.display = ""
-				currentDiv.style.display = "none"
-				// window.location.href = "/result/success";
-				break;
-			case "Pending":
-			case "Received":
-				window.location.href = "/result/pending";
-				break;
-			case "Refused":
-				let thisDiv = document.getElementById("dropin-container");
-				errorDiv.style.display = ""
-				thisDiv.style.display = "none"
-				// window.location.href = "/result/failed";
-				break;
-			default:
-				window.location.href = "/result/error";
-				break;
-		}
-	}
+  if (res.action) {
+    dropin.handleAction(res.action)
+  } else {
+    switch (res.resultCode) {
+      case "Authorised":
+        let currentDiv = document.getElementById("dropin-container")
+        successDiv.style.display = ""
+        currentDiv.style.display = "none"
+        // window.location.href = "/result/success";
+        break
+      case "Pending":
+      case "Received":
+        window.location.href = "/result/pending"
+        break
+      case "Refused":
+        let thisDiv = document.getElementById("dropin-container")
+        errorDiv.style.display = ""
+        thisDiv.style.display = "none"
+        // window.location.href = "/result/failed";
+        break
+      default:
+        window.location.href = "/result/error"
+        break
+    }
+  }
 }
 
 function restartDropin() {
-	const currentDiv = document.getElementById("dropin-container");
-	currentDiv.style.display = ""
-	const newDiv = document.createElement('div');
-	currentDiv.replaceWith(newDiv)
-	newDiv.setAttribute("id", "dropin-container");
-	newDiv.setAttribute("class", "payment p-5")
-	newDiv.style.display = ""
-	successDiv.style.display = "none"
-	errorDiv.style.display = "none"
-	// oldDiv = newDiv
-	initCheckout()	
+  const currentDiv = document.getElementById("dropin-container")
+  currentDiv.style.display = ""
+  const newDiv = document.createElement("div")
+  currentDiv.replaceWith(newDiv)
+  newDiv.setAttribute("id", "dropin-container")
+  newDiv.setAttribute("class", "payment p-5")
+  newDiv.style.display = ""
+  successDiv.style.display = "none"
+  errorDiv.style.display = "none"
+  // oldDiv = newDiv
+  initCheckout()
 }
 
 // Test cards JS
-// function copyToClipboard() {
-// 	// Get the text field
-// 	let copyPAN = document.getElementById('cardNumber').textContent;
-// 	console.log(copyPAN)
+function copyToClipboard() {
+  // Get the text field
+  let copyPAN = document.getElementById("cardNumber").textContent
+  console.log(copyPAN)
 
-// 	// Select the text field
-// 	// copyPAN.select();
-// 	// copyPAN.setSelectionRange(0, 99999); // For mobile devices
+  // Select the text field
+  // copyPAN.select();
+  // copyPAN.setSelectionRange(0, 99999); // For mobile devices
 
-// 	// Copy the text inside the text field
-// 	navigator.clipboard.write(copyPAN);
+  // Copy the text inside the text field
+  navigator.clipboard.write(copyPAN)
 
-// 	// Alert the copied text
-// 	alert("Copied the text: " + copyPAN);
-// }
-let r = document.querySelector(':root');
+  // Alert the copied text
+  alert("Copied the text: " + copyPAN)
+}
+let r = document.querySelector(":root")
 
 // Colour picker changes button color
 function setDynamicCSS() {
-	colorVal = document.getElementById("buttonColorPick").value;
-	r.style.setProperty('--background-color', colorVal);
-	updateStyleCode();
+  colorVal = document.getElementById("buttonColorPick").value
+  r.style.setProperty("--background-color", colorVal)
+  updateStyleCode()
 }
 
 function backgroundColor() {
-	let bgVal = document.getElementById("bgColorPick").value;
-	r.style.setProperty('--bg-color', bgVal);
+  let bgVal = document.getElementById("bgColorPick").value
+  r.style.setProperty("--bg-color", bgVal)
 }
 
 function dropinColor() {
-	let dropinColor = document.getElementById("dropinColorPick").value;
-	r.style.setProperty('--dropin-color', dropinColor);
-	updateStyleCode();
-
+  let dropinColor = document.getElementById("dropinColorPick").value
+  r.style.setProperty("--dropin-color", dropinColor)
+  updateStyleCode()
 }
 
 function dropinTabColor() {
-	let dropinTabColor = document.getElementById("dropinTabColorPick").value;
-	r.style.setProperty('--dropin-tab-color', dropinTabColor);
-	updateStyleCode();
+  let dropinTabColor = document.getElementById("dropinTabColorPick").value
+  r.style.setProperty("--dropin-tab-color", dropinTabColor)
+  updateStyleCode()
 }
 
 function textColor() {
-	let textColor = document.getElementById("textColorPick").value;
-	r.style.setProperty('--text-color', textColor);
-	updateStyleCode();
+  let textColor = document.getElementById("textColorPick").value
+  r.style.setProperty("--text-color", textColor)
+  updateStyleCode()
 }
 
-
-function buttonEdges () {
-	let edgeValue = document.getElementById('buttonEdges').value
-	let pixelVal = edgeValue + 'px'
-	r.style.setProperty('--button-edges', pixelVal);
-	updateStyleCode();
+function buttonEdges() {
+  let edgeValue = document.getElementById("buttonEdges").value
+  let pixelVal = edgeValue + "px"
+  r.style.setProperty("--button-edges", pixelVal)
+  updateStyleCode()
 }
 
-function bodyEdges () {
-	let bodyEdgeValue = document.getElementById('bodyEdges').value
-	let bodyPixelVal = bodyEdgeValue + 'px'
-	r.style.setProperty('--body-edges', bodyPixelVal);
-	r.style.setProperty('--selectedBody-edges', bodyPixelVal);
-	r.style.setProperty('--topedges-left', bodyPixelVal);
-	r.style.setProperty('--topedges-right', bodyPixelVal);
-	r.style.setProperty('--bottomedges-left', bodyPixelVal);
-	r.style.setProperty('--bottomedges-right', bodyPixelVal);
-	updateStyleCode();
+function bodyEdges() {
+  let bodyEdgeValue = document.getElementById("bodyEdges").value
+  let bodyPixelVal = bodyEdgeValue + "px"
+  r.style.setProperty("--body-edges", bodyPixelVal)
+  r.style.setProperty("--selectedBody-edges", bodyPixelVal)
+  r.style.setProperty("--topedges-left", bodyPixelVal)
+  r.style.setProperty("--topedges-right", bodyPixelVal)
+  r.style.setProperty("--bottomedges-left", bodyPixelVal)
+  r.style.setProperty("--bottomedges-right", bodyPixelVal)
+  updateStyleCode()
 }
 
-
 // Funtion to remove borders
-document.getElementById('noBorder').parentNode.addEventListener('click', function (event) {
-	if (this.querySelector('input').checked) {
-		r.style.setProperty('--border-off', "0")
-		updateStyleCode();
-	}
-	else {
-		r.style.setProperty('--border-off', null)
-		updateStyleCode();
-	}
-})
+document
+  .getElementById("noBorder")
+  .parentNode.addEventListener("click", function (event) {
+    if (this.querySelector("input").checked) {
+      r.style.setProperty("--border-off", "0")
+      updateStyleCode()
+    } else {
+      r.style.setProperty("--border-off", null)
+      updateStyleCode()
+    }
+  })
 
-function resetDynamicCSS () {
-	r.style.setProperty('--background-color', null);
-	r.style.setProperty('--dropin-width', null);
-	r.style.setProperty('--body-edges', null);
-	r.style.setProperty('--selectedBody-edges', null);
-	r.style.setProperty('--topedges-left', null);
-	r.style.setProperty('--topedges-right', null);
-	r.style.setProperty('--bottomedges-left', null);
-	r.style.setProperty('--bottomedges-right', null);
-	r.style.setProperty('--button-edges', null);
-	r.style.setProperty('--bg-color', null);
-	r.style.setProperty('--dropin-color', null);
-	r.style.setProperty('--dropin-tab-color', null);
-	r.style.setProperty('--dropin-font', null)
-	r.style.setProperty('--text-color', null);
-	r.style.setProperty('--text-bold', null);
-	r.style.setProperty('--text-italic', null);
-	r.style.setProperty('--text-align', null);
-	r.style.setProperty('--payButton-width', null);
-	r.style.setProperty('--payments-spacing', null);
-	r.style.setProperty('--paymentselected-margin', null);
-	r.style.setProperty('--font-options', null);
+function resetDynamicCSS() {
+  r.style.setProperty("--background-color", null)
+  r.style.setProperty("--dropin-width", null)
+  r.style.setProperty("--body-edges", null)
+  r.style.setProperty("--selectedBody-edges", null)
+  r.style.setProperty("--topedges-left", null)
+  r.style.setProperty("--topedges-right", null)
+  r.style.setProperty("--bottomedges-left", null)
+  r.style.setProperty("--bottomedges-right", null)
+  r.style.setProperty("--button-edges", null)
+  r.style.setProperty("--bg-color", null)
+  r.style.setProperty("--dropin-color", null)
+  r.style.setProperty("--dropin-tab-color", null)
+  r.style.setProperty("--dropin-font", null)
+  r.style.setProperty("--text-color", null)
+  r.style.setProperty("--text-bold", null)
+  r.style.setProperty("--text-italic", null)
+  r.style.setProperty("--text-align", null)
+  r.style.setProperty("--payButton-width", null)
+  r.style.setProperty("--payments-spacing", null)
+  r.style.setProperty("--paymentselected-margin", null)
+  r.style.setProperty("--font-options", null)
 }
 
-function dropinWidth () {
-	let widthValue = document.getElementById("changeWidth").value
-	let widthpx = widthValue + 'px'
-	r.style.setProperty('--dropin-width', widthpx);
-	console.log(widthpx)
-	updateStyleCode()
+function dropinWidth() {
+  let widthValue = document.getElementById("changeWidth").value
+  let widthpx = widthValue + "px"
+  r.style.setProperty("--dropin-width", widthpx)
+  console.log(widthpx)
+  updateStyleCode()
 }
 
-function payButtonWidth () {
-	let payWidthValue = document.getElementById("payButtonWidth").value
-	let payWidthpx = payWidthValue + 'px'
-	r.style.setProperty('--payButton-width', payWidthpx);
-	updateStyleCode();
+function payButtonWidth() {
+  let payWidthValue = document.getElementById("payButtonWidth").value
+  let payWidthpx = payWidthValue + "px"
+  r.style.setProperty("--payButton-width", payWidthpx)
+  updateStyleCode()
 }
 
-function paymentsSpacing () {
-	let paymentSpacingValue = document.getElementById("paymentsSpacing").value
-	let paymentSpacingpx = paymentSpacingValue + 'px'
-	r.style.setProperty('--payments-spacing', paymentSpacingpx);
-	r.style.setProperty('--paymentselected-margin', paymentSpacingpx);
-	updateStyleCode();
+function paymentsSpacing() {
+  let paymentSpacingValue = document.getElementById("paymentsSpacing").value
+  let paymentSpacingpx = paymentSpacingValue + "px"
+  r.style.setProperty("--payments-spacing", paymentSpacingpx)
+  r.style.setProperty("--paymentselected-margin", paymentSpacingpx)
+  updateStyleCode()
 }
 
-function fontWidth () {
-	let fontValue = document.getElementById("fontSize").value
-	let fontpx = fontValue + 'px'
-	r.style.setProperty('--dropin-font', fontpx);
-	updateStyleCode();
+function fontWidth() {
+  let fontValue = document.getElementById("fontSize").value
+  let fontpx = fontValue + "px"
+  r.style.setProperty("--dropin-font", fontpx)
+  updateStyleCode()
 }
 
 // Copy to clipboard function
@@ -694,63 +713,64 @@ function fontWidth () {
 // }
 
 function turnCard() {
-	document.getElementById("card").classList.add('card-visited');
-	// cardDiv.setAttribute("class", "card-visited")
+  document.getElementById("card").classList.add("card-visited")
+  // cardDiv.setAttribute("class", "card-visited")
+}
+function resetCard() {
+  if (document.getElementById("card").classList.contains("card-visited")) {
+    document.getElementById("card").classList.remove("card-visited")
+  }
 }
- function resetCard() {
-	if (document.getElementById("card").classList.contains('card-visited')) {
-		document.getElementById("card").classList.remove('card-visited');
-	}
- }
 
 function changeTestCard(brandValue) {
-	document.getElementById('brand_img').src = testCardBrandsMap[brandValue.value].src;
-	document.getElementById('cardNumber').innerText = testCardBrandsMap[brandValue.value].cardNumber;
-	document.getElementById('cvc').innerText = testCardBrandsMap[brandValue.value].cvc
+  document.getElementById("brand_img").src =
+    testCardBrandsMap[brandValue.value].src
+  document.getElementById("cardNumber").innerText =
+    testCardBrandsMap[brandValue.value].cardNumber
+  document.getElementById("cvc").innerText =
+    testCardBrandsMap[brandValue.value].cvc
 }
 
 function positionText() {
-	let positionValue = document.getElementById("positionText").value
-	r.style.setProperty('--text-align', positionValue);
-	updateStyleCode();
+  let positionValue = document.getElementById("positionText").value
+  r.style.setProperty("--text-align", positionValue)
+  updateStyleCode()
 }
 
 function makeBold() {
-
-	if (document.getElementById("makeBold").classList.contains("bold-active")) {
-		document.getElementById("makeBold").classList.remove("bold-active")
-		r.style.setProperty('--text-bold', null)
-		updateStyleCode();
-	}
-	else {
-		document.getElementById("makeBold").classList.add("bold-active")
-		r.style.setProperty('--text-bold', "bold")
-		updateStyleCode();
-	}
+  if (document.getElementById("makeBold").classList.contains("bold-active")) {
+    document.getElementById("makeBold").classList.remove("bold-active")
+    r.style.setProperty("--text-bold", null)
+    updateStyleCode()
+  } else {
+    document.getElementById("makeBold").classList.add("bold-active")
+    r.style.setProperty("--text-bold", "bold")
+    updateStyleCode()
+  }
 }
 
-//makie text italic 
+//makie text italic
 function makeItalic() {
-
-	if (document.getElementById("makeItalic").classList.contains("italic-active")) {
-		document.getElementById("makeItalic").classList.remove("italic-active")
-		r.style.setProperty('--text-italic', null)
-		updateStyleCode();
-	}
-	else {
-		document.getElementById("makeItalic").classList.add("italic-active")
-		r.style.setProperty('--text-italic', "italic")
-		updateStyleCode();
-	}
+  if (
+    document.getElementById("makeItalic").classList.contains("italic-active")
+  ) {
+    document.getElementById("makeItalic").classList.remove("italic-active")
+    r.style.setProperty("--text-italic", null)
+    updateStyleCode()
+  } else {
+    document.getElementById("makeItalic").classList.add("italic-active")
+    r.style.setProperty("--text-italic", "italic")
+    updateStyleCode()
+  }
 }
-// document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event); 
-//drop down selector for the different font styles 
+// document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event);
+//drop down selector for the different font styles
 //document.getElementById("font_select").parentNode.addEventListener('change', function() {
- function changeFont() {
-    r.style.setProperty('--font-options', null);
-	let fontValue = document.getElementById("font_select").value
-	r.style.setProperty('--font-options', fontValue);
-	updateStyleCode();
+function changeFont() {
+  r.style.setProperty("--font-options", null)
+  let fontValue = document.getElementById("font_select").value
+  r.style.setProperty("--font-options", fontValue)
+  updateStyleCode()
 }
 // document.getElementById('placeholderData').parentNode.addEventListener('click', function (event) {
 //hiding payment methods functions
@@ -777,26 +797,40 @@ function blockPaypal() {
 		payMethods.push("paypal");
 	}
 }
+function showPaypal() {
+  const paypalState = document.getElementById("showPaypal").checked
+  const paypalBox = document.querySelector(
+    ".adyen-checkout__payment-method--paypal"
+  )
+  if (paypalState == true) {
+    paypalBox.style.display = ""
+  } else {
+    paypalBox.style.display = "none"
+  }
+}
 
 //JSON highlight code styling
 
 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';
+  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"
         }
-        return '<span class="' + cls + '">' + match + '</span>';
-    });
+      } else if (/true|false/.test(match)) {
+        cls = "boolean"
+      } else if (/null/.test(match)) {
+        cls = "null"
+      }
+      return '<span class="' + cls + '">' + match + "</span>"
+    }
+  )
 }
 
 // // CSS printing
@@ -812,78 +846,79 @@ function syntaxHighlight(json) {
 // let paymentCont = document.getElementById('dropin-container');
 // console.log(window.getComputedStyle(paymentCont, null));
 
-
-function updateStyleCode () {
-	let cssjson = {
-		".adyen-checkout__payment-method": {
-			'width': getComputedStyle(r).getPropertyValue('--dropin-width'),
-			'font-size': getComputedStyle(r).getPropertyValue('--dropin-font'),
-			'font-family': getComputedStyle(r).getPropertyValue('--font-options'),
-			'text-align': getComputedStyle(r).getPropertyValue('--text-align'),
-			'border-radius': getComputedStyle(r).getPropertyValue('--body-edges'),
-			'border': getComputedStyle(r).getPropertyValue('--border-off'),
-			'background': getComputedStyle(r).getPropertyValue('--dropin-tab-color'),
-			'font-weight': getComputedStyle(r).getPropertyValue('--text-bold'),
-			'margin': getComputedStyle(r).getPropertyValue('--payments-spacing')
-		},
-		".adyen-checkout__button.adyen-checkout__button--pay": {
-			'width': getComputedStyle(r).getPropertyValue('--payButton-width'),
-			'background': getComputedStyle(r).getPropertyValue('--background-color'),
-			'border-radius': getComputedStyle(r).getPropertyValue('--button-edges')
-		},
-		".adyen-checkout__payment-methods-list li:nth-child(2)": {
-			'border-top-left-radius': getComputedStyle(r).getPropertyValue('--topedges-left'),
-			'border-top-right-radius': getComputedStyle(r).getPropertyValue('--topedges-right')
-		},
-		".adyen-checkout__payment-methods-list li:last-child": {
-			'border-bottom-left-radius': getComputedStyle(r).getPropertyValue('--bottomedges-left'),
-			'border-bottom-right-radius': getComputedStyle(r).getPropertyValue('--bottomedges-right')
-		},
-		".adyen-checkout__dropin": {
-			'text-align': getComputedStyle(r).getPropertyValue('--text-align')
-		},
-		'.adyen-checkout__payment-method--selected': {
-			'background': getComputedStyle(r).getPropertyValue('--dropin-color'),
-			'margin': getComputedStyle(r).getPropertyValue('--paymentselected-margin'),
-			'border-radius': getComputedStyle(r).getPropertyValue('--selectedBody-edges')
-		},
-		'.adyen-checkout__payment-method__name': {
-			'font-weight': getComputedStyle(r).getPropertyValue('--text-bold'),
-			'font-style': getComputedStyle(r).getPropertyValue('--text-italic'),
-			'color': getComputedStyle(r).getPropertyValue('--text-color')
-		},
-		'.adyen-checkout__label__text': {
-			'font-weight': getComputedStyle(r).getPropertyValue('--text-bold'),
-			'font-style': getComputedStyle(r).getPropertyValue('--text-italic'),
-			'color': getComputedStyle(r).getPropertyValue('--text-color')
-		},
-		'.adyen-checkout__checkbox__label': {
-			'font-weight': getComputedStyle(r).getPropertyValue('--text-bold'),
-			'font-style': getComputedStyle(r).getPropertyValue('--text-italic'),
-			'color': getComputedStyle(r).getPropertyValue('--text-color')
-		},
-		'.adyen-checkout__button__text': {
-			'font-weight': getComputedStyle(r).getPropertyValue('--text-bold'),
-			'font-style': getComputedStyle(r).getPropertyValue('--text-italic'),
-			'color': getComputedStyle(r).getPropertyValue('--text-color')
-		}
-	}
-	var styleStr = "";
-    for(var i in cssjson){
-        styleStr += i + " {\n"
-        for(var j in cssjson[i]){
-            styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"     
-        }
-        styleStr += "}\n" 
+function updateStyleCode() {
+  let cssjson = {
+    ".adyen-checkout__payment-method": {
+      width: getComputedStyle(r).getPropertyValue("--dropin-width"),
+      "font-size": getComputedStyle(r).getPropertyValue("--dropin-font"),
+      "font-family": getComputedStyle(r).getPropertyValue("--font-options"),
+      "text-align": getComputedStyle(r).getPropertyValue("--text-align"),
+      "border-radius": getComputedStyle(r).getPropertyValue("--body-edges"),
+      border: getComputedStyle(r).getPropertyValue("--border-off"),
+      background: getComputedStyle(r).getPropertyValue("--dropin-tab-color"),
+      "font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
+      margin: getComputedStyle(r).getPropertyValue("--payments-spacing"),
+    },
+    ".adyen-checkout__button.adyen-checkout__button--pay": {
+      width: getComputedStyle(r).getPropertyValue("--payButton-width"),
+      background: getComputedStyle(r).getPropertyValue("--background-color"),
+      "border-radius": getComputedStyle(r).getPropertyValue("--button-edges"),
+    },
+    ".adyen-checkout__payment-methods-list li:nth-child(2)": {
+      "border-top-left-radius":
+        getComputedStyle(r).getPropertyValue("--topedges-left"),
+      "border-top-right-radius":
+        getComputedStyle(r).getPropertyValue("--topedges-right"),
+    },
+    ".adyen-checkout__payment-methods-list li:last-child": {
+      "border-bottom-left-radius":
+        getComputedStyle(r).getPropertyValue("--bottomedges-left"),
+      "border-bottom-right-radius": getComputedStyle(r).getPropertyValue(
+        "--bottomedges-right"
+      ),
+    },
+    ".adyen-checkout__dropin": {
+      "text-align": getComputedStyle(r).getPropertyValue("--text-align"),
+    },
+    ".adyen-checkout__payment-method--selected": {
+      background: getComputedStyle(r).getPropertyValue("--dropin-color"),
+      margin: getComputedStyle(r).getPropertyValue("--paymentselected-margin"),
+      "border-radius": getComputedStyle(r).getPropertyValue(
+        "--selectedBody-edges"
+      ),
+    },
+    ".adyen-checkout__payment-method__name": {
+      "font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
+      "font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
+      color: getComputedStyle(r).getPropertyValue("--text-color"),
+    },
+    ".adyen-checkout__label__text": {
+      "font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
+      "font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
+      color: getComputedStyle(r).getPropertyValue("--text-color"),
+    },
+    ".adyen-checkout__checkbox__label": {
+      "font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
+      "font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
+      color: getComputedStyle(r).getPropertyValue("--text-color"),
+    },
+    ".adyen-checkout__button__text": {
+      "font-weight": getComputedStyle(r).getPropertyValue("--text-bold"),
+      "font-style": getComputedStyle(r).getPropertyValue("--text-italic"),
+      color: getComputedStyle(r).getPropertyValue("--text-color"),
+    },
+  }
+  var styleStr = ""
+  for (var i in cssjson) {
+    styleStr += i + " {\n"
+    for (var j in cssjson[i]) {
+      styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"
     }
-	// let stringCSS = JSON.stringify(css, null, 2);
-	document.getElementById("cssCode").innerHTML = styleStr;
+    styleStr += "}\n"
+  }
+  // let stringCSS = JSON.stringify(css, null, 2);
+  document.getElementById("cssCode").innerHTML = styleStr
 }
-updateStyleCode();
-
-
-
-initCheckout();
-
-
+updateStyleCode()
 
+initCheckout()
diff --git a/app/templates/component.html b/app/templates/component.html
index f516619..34f6fdc 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -15,6 +15,8 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
     />
+
+    <!-- hello -->
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
       rel="stylesheet"
@@ -45,8 +47,10 @@
       crossorigin="anonymous"
     />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
-
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css"
+    />
 
     <title>Checkout Create</title>
   </head>
@@ -76,18 +80,31 @@
           <!-- Hidden status page to show on completion -->
           <div class="status-container successDiv" id="successDiv">
             <div class="status">
-                <img src="{{ url_for('static', filename='img/success.svg') }}" class="status-image"/>
-                <img src="{{ url_for('static', filename='img/thank-you.svg') }}" class="status-image-thank-you"/>
-                <p class="status-message">Your order has been successfully placed.</p>
-                <a class="button" onclick="restartDropin()">Return Home</a>
+              <img
+                src="{{ url_for('static', filename='img/success.svg') }}"
+                class="status-image"
+              />
+              <img
+                src="{{ url_for('static', filename='img/thank-you.svg') }}"
+                class="status-image-thank-you"
+              />
+              <p class="status-message">
+                Your order has been successfully placed.
+              </p>
+              <a class="button" onclick="restartDropin()">Return Home</a>
             </div>
           </div>
           <div class="status-container errorDiv">
             <div class="status">
-                <p class="status-message">Error!</p>
-                <p class="status-message">Review response in console and refer to <a
-                        href="https://docs.adyen.com/development-resources/response-handling">Response handling.</a></p>
-                <a class="button" onclick="restartDropin()">Return Home</a>
+              <p class="status-message">Error!</p>
+              <p class="status-message">
+                Review response in console and refer to
+                <a
+                  href="https://docs.adyen.com/development-resources/response-handling"
+                  >Response handling.</a
+                >
+              </p>
+              <a class="button" onclick="restartDropin()">Return Home</a>
             </div>
           </div>
 
@@ -127,7 +144,7 @@
                     </div>
                     <!-- Panel footer start -->
                     <div class="panel-footer">
-                      <!-- <div id="card" class="card">
+                      <div id="card" class="card p-0 text-center">
                         <div class="card__front card__part">
                           <img
                             class="card__front-square card__square"
@@ -161,37 +178,28 @@
                             />
                           </div>
                         </div>
-                      </div> -->
+                      </div>
+
                       <!-- Under card footer -->
-                      <div class="container">
-                        <div class="row">
-                          <div class="col">
-                            <!-- load card -->
-                          </div>
-                        </div>
-                        <div class="row">
-                          <!-- copy pan -->
-                          <div class="col"></div>
-                          <p
-                            type="button"
-                            id="btn"
-                            class="btn"
-                            toggle="tooltip"
-                            data-clipboard-action="copy"
-                            data-placement="top"
-                            data-clipboard-target="p#cardNumber"
-                            onclick="resetCard()"
-                            title="Copy to clipboard"
+                      <div>
+                        <div class="row m-0">
+                          <div
+                            class="col copyBtnsStyle panCopy mr-1"
+                            onclick="copyToClipboard"
                           >
-                            copy
-                          </p>
-                          <!-- copy expiry -->
-                          <div class="col">
-                            <p>two</p>
+                            <p class="copyText">
+                              PAN <i class="bi bi-clipboard"></i>
+                            </p>
                           </div>
-                          <!-- copy cvc -->
-                          <div class="col">
-                            <p>three</p>
+                          <div class="col copyBtnsStyle expiryCopy ml-1 mr-1">
+                            <p class="copyText">
+                              EXPIRY <i class="bi bi-clipboard"></i>
+                            </p>
+                          </div>
+                          <div class="col copyBtnsStyle cvcCopy ml-1">
+                            <p class="copyText">
+                              CVC <i class="bi bi-clipboard"></i>
+                            </p>
                           </div>
                         </div>
                       </div>
@@ -276,47 +284,42 @@
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Location</p>
                     </div>
-                    <div class="row container">
-                      <!-- section description -->
-                      <div class="col-6 mb-2">
-                        <p class="textFonts">
-                          Choose your shopper location and language
-                        </p>
-                      </div>
-                      <!-- title -->
-                      <div class="col-3 mb-2">
-                        <p class="textFonts text-left ml-3">Shopper Location</p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 mb-2">
-                        <div class="country-selector textFonts">
-                          <div
-                            class="country-selector__flag"
-                            aria-hidden="true"
-                          >
-                            <img
-                              id="flag_img"
-                              src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
-                              alt="Flag icon"
-                            />
-                          </div>
-                          <select
-                            onchange="changeSelect(this)"
-                            id="country_select"
-                            class="country-selector__select"
-                            aria-label="country"
-                            autocomplete="off"
-                          >
-                            <option value="NL">Netherlands</option>
-                            <option value="GB">United Kingdom</option>
-                            <option value="US">United States</option>
-                          </select>
-                          <div class="dropdown-icon" aria-hidden="true">
-                            <img
-                              src="{{ url_for('static', filename='img/dropdown.svg') }}"
-                              alt="Dropdown caret"
-                            />
-                          </div>
+                    <!-- section description -->
+                    <div class="col-6 mb-2">
+                      <p class="textFonts">
+                        Choose your shopper location and language
+                      </p>
+                    </div>
+                    <!-- title -->
+                    <div class="col-3 mb-2">
+                      <p class="textFonts text-left ml-3">Shopper Location</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 mb-2">
+                      <div class="country-selector textFonts">
+                        <div class="country-selector__flag" aria-hidden="true">
+                          <img
+                            id="flag_img"
+                            src="https://ca-test.adyen.com/ca/adl/img/flags/nl.svg"
+                            alt="Flag icon"
+                          />
+                        </div>
+                        <select
+                          onchange="changeSelect(this)"
+                          id="country_select"
+                          class="country-selector__select"
+                          aria-label="country"
+                          autocomplete="off"
+                        >
+                          <option value="NL">Netherlands</option>
+                          <option value="GB">United Kingdom</option>
+                          <option value="US">United States</option>
+                        </select>
+                        <div class="dropdown-icon" aria-hidden="true">
+                          <img
+                            src="{{ url_for('static', filename='img/dropdown.svg') }}"
+                            alt="Dropdown caret"
+                          />
                         </div>
                       </div>
                     </div>
@@ -324,17 +327,16 @@
                   <!-- line - section end -->
                   <hr class="mt-4 mb-4" />
 
-
-                <!-- section for hiding/showing payment methods -->
-                <div class="row mt-3">
-                  <div class="col flex-fill section-title">
-                    <p class="mb-1 titleFonts">Payment Methods</p>
-                  </div>
-                  <div class="row container">
+                  <!-- section for hiding/showing payment methods -->
+                  <div class="row mt-3">
+                    <div class="col flex-fill section-title">
+                      <p class="mb-1 titleFonts">Payment Methods</p>
+                    </div>
                     <!-- section description -->
                     <div class="col-6">
                       <p class="textFonts">
-                        Choose which payment methods you would like to see at checkout
+                        Choose which payment methods you would like to see at
+                        checkout
                       </p>
                     </div>
                     <!-- title -->
@@ -343,211 +345,204 @@
                     </div>
                     <!-- toggle -->
                     <div class="col-3">
-                      <div class="custom-control custom-switch">
-                        <input type="checkbox" class="custom-control-input" id="showPaypal" data-toggle="toggle" onchange="showPaypal()" checked>
-                        <label class="custom-control-label" for="showPaypal"></label>
+                      <div class="custom-control custom-switch text-center">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="showPaypal"
+                          data-toggle="toggle"
+                          onchange="showPaypal()"
+                          checked
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="showPaypal"
+                        ></label>
                       </div>
                     </div>
                   </div>
-                </div>
-                <!-- line - section end -->
-                <hr class="mt-4 mb-4" />
+                  <!-- line - section end -->
+                  <hr class="mt-4 mb-4" />
+
+                  <!-- section titile "Payment Method Behaviour" -->
+                  <div class="row mt-3">
+                    <div class="col flex-fill section-title">
+                      <p class="mb-1 titleFonts">Payment Method Behaviour</p>
+                    </div>
 
-                <!-- section titile "Payment Method Behaviour" -->
-                <div class="row mt-3">
-                  <div class="col flex-fill section-title">
-                    <p class="mb-1 titleFonts">Payment Method Behaviour</p>
-                  </div>
-                  <div class="row container">
                     <!-- text -->
                     <div class="col-6">
                       <p class="textFonts">
-                        Select how you'd like your payment methods to behave at checkout
+                        Select how you'd like your payment methods to behave at
+                        checkout
                       </p>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6">
-                        <p class="textFonts">
-                          Select how you'd like your payment methods to behave
-                          at checkout
-                        </p>
-                      </div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Open first payment method
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="firstPayBox"
-                            data-toggle="toggle"
-                            checked
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="firstPayBox"
-                          ></label>
-                        </div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Open first payment method
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="firstPayBox"
+                          data-toggle="toggle"
+                          checked
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="firstPayBox"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Hide stored payment methods
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="onlyStored"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="onlyStored"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Hide stored payment methods
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="onlyStored"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="onlyStored"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Add billing address
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="billAdd"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="billAdd"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Add billing address
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="billAdd"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="billAdd"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Include card holder name
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="holderName"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="holderName"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Include card holder name
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="holderName"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="holderName"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Show only saved Payment Methods
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="showPayMethod"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="showPayMethod"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Show only saved Payment Methods
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="showPayMethod"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="showPayMethod"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">Hide CVC field</p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="hideCVC"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="hideCVC"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">Hide CVC field</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="hideCVC"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="hideCVC"
+                        ></label>
                       </div>
                     </div>
-                    <div class="row container">
-                      <!-- text -->
-                      <div class="col-6"></div>
-                      <!-- title -->
-                      <div class="col-3">
-                        <p class="textFonts text-left ml-3">
-                          Include placeholder data
-                        </p>
-                      </div>
-                      <!-- toggle -->
-                      <div class="col-3 text-center">
-                        <div class="custom-control custom-switch">
-                          <input
-                            type="checkbox"
-                            class="custom-control-input"
-                            id="placeholderData"
-                            data-toggle="toggle"
-                          />
-                          <label
-                            class="custom-control-label"
-                            for="placeholderData"
-                          ></label>
-                        </div>
+
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-3">
+                      <p class="textFonts text-left ml-3">
+                        Include placeholder data
+                      </p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-3 text-center">
+                      <div class="custom-control custom-switch">
+                        <input
+                          type="checkbox"
+                          class="custom-control-input"
+                          id="placeholderData"
+                          data-toggle="toggle"
+                        />
+                        <label
+                          class="custom-control-label"
+                          for="placeholderData"
+                        ></label>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            
 
                 <!-- Theme & Styles content - 2nd tab -->
                 <div
@@ -561,7 +556,7 @@
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Fonts</p>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6">
                         <p class="textFonts">
@@ -646,7 +641,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -670,7 +665,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -709,7 +704,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -728,7 +723,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -748,7 +743,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -777,7 +772,7 @@
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Colour & Style</p>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6">
                         <p class="textFonts">
@@ -802,7 +797,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -823,7 +818,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -844,7 +839,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -861,7 +856,7 @@
                         />
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -885,7 +880,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -909,7 +904,7 @@
                         </div>
                       </div>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6"></div>
                       <!-- title -->
@@ -939,7 +934,7 @@
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Dimensions</p>
                     </div>
-                    <div class="row container mb-2">
+                    <div class="row container mb-2 p-0">
                       <!-- text -->
                       <div class="col-6">
                         <p class="textFonts">
@@ -965,9 +960,8 @@
                         </div>
                       </div>
                     </div>
-
                   </div>
-                  <div class="row container">
+                  <div class="row container mb-2 p-0">
                     <!-- text -->
                     <div class="col-6"></div>
                     <!-- title -->
@@ -977,36 +971,41 @@
                     <!-- toggle -->
                     <div class="col-3 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="payButtonWidth" min="265" max="665" value="100%" onchange="payButtonWidth(this.value)">
-                      </div>
+                        <input
+                          type="range"
+                          class="form-control-range"
+                          id="payButtonWidth"
+                          min="265"
+                          max="665"
+                          value="100%"
+                          onchange="payButtonWidth(this.value)"
+                        />
                       </div>
+                    </div>
                   </div>
-                  <div class="row container">
+                  <div class="row container mb-2 p-0">
                     <!-- text -->
                     <div class="col-6"></div>
                     <!-- title -->
                     <div class="col-3">
-                      <p class="textFonts text-left ml-3">Payment methods spacing</p>
+                      <p class="textFonts text-left ml-3">
+                        Payment methods spacing
+                      </p>
                     </div>
                     <!-- toggle -->
                     <div class="col-3 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="paymentsSpacing" min="0" max="50" value="0" onchange="paymentsSpacing(this.value)">
+                        <input
+                          type="range"
+                          class="form-control-range"
+                          id="paymentsSpacing"
+                          min="0"
+                          max="50"
+                          value="0"
+                          onchange="paymentsSpacing(this.value)"
+                        />
                       </div>
                       <!-- toggle -->
-                      <div class="col-3 text-left">
-                        <div class="form-group">
-                          <input
-                            type="range"
-                            class="form-control-range"
-                            id="changeWidth"
-                            min="300"
-                            max="700"
-                            value="500"
-                            onchange="dropinWidth(this.value)"
-                          />
-                        </div>
-                      </div>
                     </div>
                   </div>
                   <hr class="mt-4 mb-4" />
@@ -1025,6 +1024,7 @@
                   role="tabpanel"
                   aria-labelledby="save-tab"
                 >
+                  <<<<<<< Updated upstream
                   <div class="row mt-3">
                     <div class="col flex-fill section-title">
                       <p class="mb-1 titleFonts">Adyen Configuration</p>
@@ -1032,7 +1032,9 @@
                     <div class="row container">
                       <!-- section description -->
                       <div class="col-12 mb-2">
-                        <pre id="configCode"><code id="configCode" class="configCode"></code></pre>
+                        <pre
+                          id="configCode"
+                        ><code id="configCode" class="configCode"></code></pre>
                       </div>
                     </div>
                   </div>
@@ -1043,10 +1045,20 @@
                     <div class="row container">
                       <!-- section description -->
                       <div class="col-12 mb-2">
-                        <pre id="cssCode"><code class="css-code" id="cssCode" ></code></pre>
+                        <pre
+                          id="cssCode"
+                        ><code class="css-code" id="cssCode" ></code></pre>
                       </div>
                     </div>
                   </div>
+                  =======
+                  <pre
+                    id="configCode"
+                  ><code id="configCode" class="configCode"></code></pre>
+                  <pre
+                    id="cssCode"
+                  ><code class="css-code" id="cssCode" ></code></pre>
+                  >>>>>>> Stashed changes
                 </div>
               </div>
             </div>