Merge branch 'main' into Farah

app/main/payments.py

@@ -139,8 +139,8 @@ def sanatizeRequest(payments_request):
     del payments_request['currency']
     del payments_request['city']
     del payments_request['houseNumberOrName']
-    del payments_request['street']
     del payments_request['postalCode']
+    del payments_request['street']
 
     # loaded = json.loads(payments_request)
     # for item in loaded:

app/static/css/application.css

@@ -688,15 +688,26 @@ a:hover {
 		--background-color: purple;
 		--dropin-width: 500px;
 		--dropin-font: 17px;
-	}
-
-	.test {
-		background: var(--background-color);
+=======
+		--button-edges: 10px;
+		--body-edges: 10px;
+		--border-off: 1px solid #e6e9eb;
 	}
 
 
 	.adyen-checkout__button {
 		background: var(--background-color) !important;
+		border-radius: var(--button-edges) !important;
+	}
+
+	.adyen-checkout__payment-method {
+		border-radius: var(--body-edges) !important;
+		border: var(--border-off) !important;
+	}
+
+	.adyen-checkout__payment-method__radio {
+		/* Radio button in payment method header */
+
 	}
 	/* Copy button */
 	

app/static/js/adyen-implementation.js

@@ -1,7 +1,7 @@
 const clientKey = JSON.parse(document.getElementById('client-key').innerHTML);
 const storedCountry = document.getElementById('country-code');
 // let country = "GB";
-let countrySettings = "GB";
+let countrySettings = "NL";
 
 // Used to retrieve country value from url
 const urlCountryParams = new URLSearchParams(window.location.search);
@@ -25,22 +25,22 @@ const toggleData = [
 
 // identify checkout div and create new empty div to replace with
 const oldDiv = document.getElementById("dropin-container");
-const newDiv =  document.createElement('div');
+const newDiv = document.createElement('div');
 
 const flagUrlMap = {
-	"NL" : {
+	"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" : {
+	"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" : {
+	"US": {
 		"src": "https://ca-test.adyen.com/ca/adl/img/flags/us.svg",
 		"total": "$40.00",
 		"currency": "USD",
@@ -62,21 +62,21 @@ function changeSelect(el) {
 				postalCode: countrySettings.postalCode,
 				city: countrySettings.city,
 				country: countrySettings.countryCode,
-				stateOrProvince:countrySettings.stateOrProvince,
-				houseNumberOrName:countrySettings.houseNumberOrName
+				stateOrProvince: countrySettings.stateOrProvince,
+				houseNumberOrName: countrySettings.houseNumberOrName
 			}
 		}
 		// document.getElementById("placeholderData").checked = false
 		// placeholderData = false
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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');
+		const newDiv = document.createElement('div');
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container");
 		newDiv.setAttribute("class", "payment p-5")
@@ -101,12 +101,12 @@ 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) {
+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');
+		const newDiv = document.createElement('div');
 		openFirst = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -115,22 +115,22 @@ document.getElementById('firstPayBox').parentNode.addEventListener('click', func
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+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');
+		const newDiv = document.createElement('div');
 		billAdd = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -139,23 +139,23 @@ document.getElementById('billAdd').parentNode.addEventListener('click', function
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+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');
+		const newDiv = document.createElement('div');
 		onlyStored = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -164,22 +164,22 @@ document.getElementById('onlyStored').parentNode.addEventListener('click', funct
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+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');
+		const newDiv = document.createElement('div');
 		holderName = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -188,23 +188,23 @@ document.getElementById('holderName').parentNode.addEventListener('click', funct
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+// 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');
+		const newDiv = document.createElement('div');
 		showPayMethod = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -213,22 +213,22 @@ document.getElementById('showPayMethod').parentNode.addEventListener('click', fu
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+// 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');
+		const newDiv = document.createElement('div');
 		hideCVC = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
@@ -237,22 +237,22 @@ document.getElementById('hideCVC').parentNode.addEventListener('click', function
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		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) {
+// 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');
+		const newDiv = document.createElement('div');
 		placeholderData = {
 			holderName: "Jane Doe",
 			billingAddress: {
@@ -260,11 +260,11 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
 				postalCode: countrySettings.postalCode,
 				city: countrySettings.city,
 				country: countrySettings.countryCode,
-				stateOrProvince:countrySettings.stateOrProvince,
-				houseNumberOrName:countrySettings.houseNumberOrName
+				stateOrProvince: countrySettings.stateOrProvince,
+				houseNumberOrName: countrySettings.houseNumberOrName
 			}
 		}
-		console.log (countrySettings)
+		console.log(countrySettings)
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
 		newDiv.setAttribute("class", "payment p-5")
@@ -272,65 +272,48 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
 	}
 	else {
 		const oldDiv = document.getElementById("dropin-container");
-		const newDiv =  document.createElement('div');
+		const newDiv = document.createElement('div');
 		placeholderData = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
 		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
-  })
+})
 
-//change width of drop in form
-// let widthSlider = document.querySelector('[type=range]')
-//let widthDiv = document.querySelector('-dropin-width')
-
-// function resetDynamicCSS () {
-// 	widthDiv.style.setProperty('-dropin-width', null);
-// } 
-// document.querySelector('[type=range]').parentNode.addEventListener('input', function(event){
-  
-//   if  (this.querySelector('input')) {
-// 	this.addEventListener('input', e => {
-// 		widthDiv.style.width = e.target.value + 'px'
-// 	  })
-// }
-// })
-
-  
 const countryVariables = [
-    {
-        countryCode: "NL",
-        currency: "EUR",
-        locale: "en_NL",
+	{
+		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",
+	},
+	{
+		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",
+	},
+	{
+		countryCode: "US",
+		currency: "USD",
+		locale: "en_US",
+		city: "New York City",
 		postalCode: "10003",
 		street: "71 5th Avenue",
-		stateOrProvince:"NY",
+		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
@@ -338,11 +321,11 @@ if (countryURL) {
 }
 
 function getCountryData(countrySettings) {
-    return countryVariables.find((locality) => locality.countryCode === countrySettings)
+	return countryVariables.find((locality) => locality.countryCode === countrySettings)
 }
 
 async function initCheckout() {
-    try {
+	try {
 		const paymentMethodsResponse = await callServer("/api/getPaymentMethods", countrySettings);
 		console.log(countrySettings)
 		let prettyResponse = JSON.stringify(paymentMethodsResponse, null, 2)
@@ -351,8 +334,8 @@ async function initCheckout() {
 		let configuration = {
 			paymentMethodsResponse: paymentMethodsResponse,
 			clientKey,
-			locale: countrySettings.locale || "en_GB",
-        	countryCode: countrySettings.countryCode || "GB",
+			locale: countrySettings.locale || "en_NL",
+        	countryCode: countrySettings.countryCode || "NL",
 			environment: "test",
 			showPayButton: true,
 			paymentMethodsConfiguration: {
@@ -369,11 +352,11 @@ async function initCheckout() {
 						holderName: placeholderData.holderName,
 						billingAddress: placeholderData.billingAddress 
 					},
-                    enableStoreDetails: true,
+					enableStoreDetails: true,
 					billingAddressRequired: billAdd,
 					amount: {
 						value: 4000,
-						currency: countrySettings.currency || "GBP"
+						currency: countrySettings.currency || "EUR"
 					}
 				},
 				storedCard: {
@@ -381,12 +364,12 @@ async function initCheckout() {
 				},
 				paypal: {
 					amount: {
-						currency: countrySettings.currency || "GBP",
+						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 || "GB", // Only needed for test. This will be automatically retrieved when you are in production.
+					countryCode: countrySettings.countryCode || "NL", // Only needed for test. This will be automatically retrieved when you are in production.
 					showPayButton: true,
 					merchantId: "AD74FQNVXQY5E"
 					//subtype: "redirect"
@@ -401,9 +384,9 @@ async function initCheckout() {
 			onAdditionalDetails: (state, dropin) => {
 				handleSubmission(state, dropin, "/api/submitAdditionalDetails");
 			},
-            onDisableStoredPaymentMethod: (storedPaymentMethodId, resolve, reject) => {
+			onDisableStoredPaymentMethod: (storedPaymentMethodId, resolve, reject) => {
 				// handleSubmission(state, dropin, "/api/disable");
-            }
+			}
 
 		};
 		console.log(configuration)
@@ -412,63 +395,63 @@ async function initCheckout() {
 
 		const checkout = await AdyenCheckout(configuration);
 		checkout.create('dropin', {
-            showRemovePaymentMethodButton: true,
+			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");
-        }
-    }
+				callServer("/api/disable", { "storedPaymentMethodId": storedPaymentMethodId });
+				resolve()
+				reject()
+			}
+		})
+			.mount("#dropin-container");
+
+	} catch (error) {
+		console.error(error);
+		alert("Error occurred. Look at console for details");
+	}
+}
 
 /*function filterUnimplemented(pm) {
-    pm.paymentMethods = pm.paymentMethods.filter((it) =>
-        [
-            "scheme",
-            "ideal",
-            "dotpay",
-            "giropay",
-            "sepadirectdebit",
-            "directEbanking",
-            "ach",
-            "alipay",
-            "klarna_paynow",
-            "klarna",
-            "klarna_account",
-            "paypal",
-            "boletobancario_santander"
-        ].includes(it.type)
-    );
-    return pm;
+	pm.paymentMethods = pm.paymentMethods.filter((it) =>
+		[
+			"scheme",
+			"ideal",
+			"dotpay",
+			"giropay",
+			"sepadirectdebit",
+			"directEbanking",
+			"ach",
+			"alipay",
+			"klarna_paynow",
+			"klarna",
+			"klarna_account",
+			"paypal",
+			"boletobancario_santander"
+		].includes(it.type)
+	);
+	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) {
-    try {
+	try {
 		//keeping the country data for the /payments call
 		const mergedData = {
 			...state.data,
 			...countrySettings
 		}
-        const res = await callServer(url, mergedData);
+		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");
-    }
+		handleServerResponse(res, dropin);
+	} catch (error) {
+		console.error(error);
+		alert("Error occurred. Look at console for details");
+	}
 }
 
 // Calls your server endpoints
@@ -507,26 +490,61 @@ function handleServerResponse(res, dropin) {
 }
 
 // Test cards JS
-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
-  
-	 // Copy the text inside the text field
-	navigator.clipboard.write(copyPAN);
-  
-	// Alert the copied text
-	alert("Copied the text: " + 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
+
+// 	// 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');
 
-function setDynamicCSS () {
+function setDynamicCSS() {
 	r.style.setProperty('--background-color', 'green');
 }
+
+function buttonEdges () {
+	let edgeValue = document.getElementById('buttonEdges').value
+	let pixelVal = edgeValue + 'px'
+	r.style.setProperty('--button-edges', pixelVal);
+}
+
+function bodyEdges () {
+	let bodyEdgeValue = document.getElementById('bodyEdges').value
+	let bodyPixelVal = bodyEdgeValue + 'px'
+	r.style.setProperty('--body-edges', bodyPixelVal);
+}
+
+// function noBorder () {
+// 	let borderValue = document.getElementById('noBorder').value
+// 	if (borderValue == 'checked') {
+// 		r.style.setProperty('--border-off', "0")
+// 		console.log(borderValue)
+// 	}
+// 	else {
+// 		r.style.setProperty('--border-off', null)
+// 	}
+// }
+
+// Funtion to show all payment methods
+document.getElementById('noBorder').parentNode.addEventListener('click', function (event) {
+	if (this.querySelector('input').checked) {
+		r.style.setProperty('--border-off', "0")
+		console.log(borderValue)
+	}
+	else {
+		r.style.setProperty('--border-off', null)
+	}
+})
+
 function resetDynamicCSS () {
 	r.style.setProperty('--background-color', null);
 }
@@ -543,4 +561,14 @@ function fontWidth () {
 	let fontpx = fontValue + 'px'
 	r.style.setProperty('--dropin-font', fontpx);
 }
+
+// Copy to clipboard function
+function copyToClipboard(e) {
+	const cb = navigator.clipboard;
+	cb.writeText(e.target.innerText)
+}
+
 initCheckout();
+
+
+

app/templates/component.html

@@ -112,7 +112,19 @@
           </div>
           <div class="custom-control custom-switch">
             <input type="checkbox" class="custom-control-input" id="placeholderData" data-toggle="toggle">
-            <label class="custom-control-label test" for="placeholderData">Include placeholder data</label>
+            <label class="custom-control-label" for="placeholderData">Include placeholder data</label>
+          </div>
+          <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="noBorder" data-toggle="toggle">
+            <label class="custom-control-label" for="noBorder">Include placeholder data</label>
+          </div>
+          <div class="form-group">
+            <label for="formControlRange">Change button edges</label>
+            <input type="range" class="form-control-range" id="buttonEdges" onchange="buttonEdges(this.value);" min="0" max="25" value="5">
+          </div>
+          <div class="form-group">
+            <label for="formControlRange">Change body edges</label>
+            <input type="range" class="form-control-range" id="bodyEdges" onchange="bodyEdges(this.value);" min="0" max="25" value="5">
           </div>
           <button type="button" onclick="setDynamicCSS()">change</button>
           <input type="color" name="" id="" onchange="setDynamicCSS()">
@@ -158,7 +170,7 @@
 
 	<!-- data from front-end -->
 	<script id="client-key" type="application/json">{{ client_key|tojson }}</script>
-	<script id="country-code" type="application/json">{{ countryCode|default("GB")|tojson }}</script>
+	<script id="country-code" type="application/json">{{ countryCode|default("NL")|tojson }}</script>
 
 	<!-- local JS -->
 	<script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>

venv/bin/activate.fish

@@ -29,7 +29,7 @@ end
 # unset irrelevant variables
 deactivate nondestructive
 
-set -gx VIRTUAL_ENV "/Users/anamo/Desktop/Demos/Hackathon/CheckoutCreate/venv"
+set -gx VIRTUAL_ENV "/Users/bradleyl/hackathon/checkoutCreate/venv"
 
 set -gx _OLD_VIRTUAL_PATH $PATH
 set -gx PATH "$VIRTUAL_ENV/bin" $PATH