test card on UI

app/static/css/application.css

@@ -465,3 +465,163 @@ a:hover {
 }
 
 /* end Status page */
+
+/* Virtual Card CSS */
+.card{
+	width: 320px;
+	height: 190px;
+	  -webkit-perspective: 600px;
+	  -moz-perspective: 600px;
+	  perspective:600px;
+	  
+	}
+	
+	.card__part{
+	  box-shadow: 1px 1px #aaa3a3;
+		top: 0;
+	  position: absolute;
+	z-index: 1000;
+	  left: 0;
+	  display: inline-block;
+		width: 320px;
+		height: 190px;
+		background-image: url('https://image.ibb.co/bVnMrc/g3095.png'), linear-gradient(to right bottom, #0abf53, #009a78, #007183, #00496f, #00112c); /*linear-gradient(to right bottom, #fd8369, #fc7870, #f96e78, #f56581, #ee5d8a)*/
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+		border-radius: 8px;
+	   
+		-webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		-moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		-ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		-o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+		-webkit-transform-style: preserve-3d;
+		-moz-transform-style: preserve-3d;
+		-webkit-backface-visibility: hidden;
+		-moz-backface-visibility: hidden;
+	}
+	
+	.card__front{
+	  padding: 18px;
+		-webkit-transform: rotateY(0);
+		-moz-transform: rotateY(0);
+	}
+	
+	.card__back {
+	  padding: 18px 0;
+	-webkit-transform: rotateY(-180deg);
+	-moz-transform: rotateY(-180deg);
+	}
+	
+	.card__black-line {
+		margin-top: 5px;
+		height: 38px;
+		background-color: #303030;
+	}
+	
+	.card__logo {
+		height: 40px;
+	}
+	
+	.card__front-logo{
+		position: absolute;
+		top: 18px;
+		right: 18px;
+	}
+	.card__square {
+		border-radius: 5px;
+		height: 40px;
+	}
+	
+	.card_numer {
+		display: block;
+		width: 100%;
+		word-spacing: 4px;
+		font-size: 20px;
+		letter-spacing: 2px;
+		color: #fff;
+		text-align: center;
+		margin-bottom: 20px;
+		margin-top: 20px;
+	}
+	
+	.card__space-75 {
+		width: 75%;
+		float: left;
+	}
+	
+	.card__space-25 {
+		width: 25%;
+		float: left;
+	}
+	
+	.card__label {
+		font-size: 10px;
+		text-transform: uppercase;
+		color: rgba(255,255,255,0.8);
+		letter-spacing: 1px;
+	}
+	
+	.card__info {
+		margin-bottom: 0;
+		margin-top: 5px;
+		font-size: 16px;
+		line-height: 18px;
+		color: #fff;
+	  letter-spacing: 1px;
+	  text-transform: uppercase;
+	}
+	
+	.card__back-content {
+		padding: 15px 15px 0;
+	}
+	.card__secret--last {
+		color: #303030;
+		text-align: right;
+		margin: 0;
+		font-size: 14px;
+	}
+	
+	.card__secret {
+		padding: 5px 12px;
+		background-color: #fff;
+		position:relative;
+	}
+	
+	.card__secret:before{
+	  content:'';
+	  position: absolute;
+	top: -3px;
+	left: -3px;
+	height: calc(100% + 6px);
+	width: calc(100% - 42px);
+	border-radius: 4px;
+	  background: repeating-linear-gradient(45deg, #ededed, #ededed 5px, #f9f9f9 5px, #f9f9f9 10px);
+	}
+	
+	.card__back-logo {
+		position: absolute;
+		bottom: 15px;
+		right: 15px;
+	}
+	
+	.card__back-square {
+		position: absolute;
+		bottom: 15px;
+		left: 15px;
+	}
+	
+	.card:focus .card__front {
+		-webkit-transform: rotateY(180deg);
+		-moz-transform: rotateY(180deg);
+	
+	}
+	
+	.card:focus .card__back {
+		-webkit-transform: rotateY(0deg);
+		-moz-transform: rotateY(0deg);
+	}
+
+	/* Copy button */
+	

app/static/js/adyen-implementation.js

@@ -327,4 +327,20 @@ function handleServerResponse(res, dropin) {
 	}
 }
 
+// Test cards JS
+function copyToClipboard() {
+	// Get the text field
+	var copyPAN = document.getElementById("cardNumber");
+  
+	// Select the text field
+	copyPAN.select();
+	copyPAN.setSelectionRange(0, 99999); // For mobile devices
+  
+	 // Copy the text inside the text field
+	navigator.clipboard.writeText(copyText.value);
+  
+	// Alert the copied text
+	alert("Copied the text: " + copyText.value);
+  }
+
 initCheckout();

app/templates/component.html

@@ -80,6 +80,32 @@
           </div>
         </div>
     </div>
+    <div class="card">
+      <div class="card__front card__part">
+        <img class="card__front-square card__square" src="{{ url_for('static', filename='img/chip.png') }}">
+        <img class="card__front-logo card__logo" src="{{ url_for('static', filename='img/LogoAdyen.png') }}">
+        <p class="card_numer" id="cardNumber">4111 1111 1111 1111</p>
+        <div class="card__space-75">
+          <span class="card__label">Card holder</span>
+          <p class="card__info">John Doe</p>
+        </div>
+        <div class="card__space-25">
+          <span class="card__label">Expires</span>
+                <p class="card__info">03/30</p>
+        </div>
+      </div>
+      <div class="card__back card__part">
+        <div class="card__black-line"></div>
+        <div class="card__back-content">
+          <div class="card__secret">
+            <p class="card__secret--last">737</p>
+          </div>
+          <img class="card__back-square card__square" src="{{ url_for('static', filename='img/chip.png') }}">
+          <img class="card__back-logo card__logo" src="{{ url_for('static', filename='img/LogoAdyen.png') }}">
+        </div>
+      </div>
+    </div>
+    <button type="button" class="btn btn-info btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard()">Copy</button>
 	<!-- Adyen JS from TEST environment (change to live for production)-->
 	<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.js"
 	integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"