Merge pull request #31 from b-leech/ana

checkout routing to success in same page

app/static/css/application.css

@@ -954,10 +954,10 @@ a:hover {
   -moz-transform: rotateY(0deg);
 }
 
-.adyen-checkout__button {
+/* .adyen-checkout__button {
   background: var(--background-color) !important;
   border-radius: var(--button-edges) !important;
-}
+} */
 
 .adyen-checkout__button.adyen-checkout__button--pay {
 	width: var(--payButton-width) !important;
@@ -965,6 +965,8 @@ a:hover {
     margin-left: auto;
 	display: flex;
     justify-content: center;
+	background: var(--background-color) !important;
+  	border-radius: var(--button-edges) !important;
 }
 
 .form-group {

app/static/js/adyen-implementation.js

@@ -407,6 +407,8 @@ async function initCheckout() {
 
 		};
 		console.log(configuration)
+		document.getElementById("configCode").innerHTML = String(configuration);
+
 
 		console.log(openFirst)
 
@@ -483,6 +485,11 @@ async function callServer(url, data) {
 	return await res.json();
 }
 
+const successDiv = document.querySelector('.successDiv')
+successDiv.style.display = "none"
+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) {
@@ -490,14 +497,20 @@ function handleServerResponse(res, dropin) {
 	} else {
 		switch (res.resultCode) {
 			case "Authorised":
-				window.location.href = "/result/success";
+				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":
-				window.location.href = "/result/failed";
+				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";
@@ -506,6 +519,20 @@ function handleServerResponse(res, dropin) {
 	}
 }
 
+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()	
+}
+
 // Test cards JS
 // function copyToClipboard() {
 // 	// Get the text field

app/templates/component.html

@@ -70,6 +70,23 @@
           <div id="dropin-container" class="payment p-5">
             <!-- Component will be rendered here -->
           </div>
+          <!-- 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>
+            </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>
+            </div>
+          </div>
 
           <!-- Test cards container -->
           <div class="test-cards-container fixed-bottom text-left">
@@ -1005,7 +1022,7 @@
                   role="tabpanel"
                   aria-labelledby="save-tab"
                 >
-                  bye
+                  <p id="configCode"></p>
                 </div>
               </div>
             </div>