Merge pull request #40 from b-leech/ana

Ana

app/main/payments.py

@@ -29,9 +29,6 @@ def adyen_payments(frontend_request, locale_data):
     payments_request['countryCode'] = locale_data['countryCode']  
     payments_request['merchantAccount'] = "CheckoutCreateDemo"
     payments_request['recurringExpiry'] = "2022-08-01T23:59:59+02:00"
-    payments_request['0'] = []
-    payments_request['1'] = []
-    # payments_request['paymentMethod'] = {"subtype": "redirect"}
 
 
     payments_request.update(payment_info)
@@ -143,8 +140,6 @@ def sanatizeRequest(payments_request):
     del payments_request['houseNumberOrName']
     del payments_request['postalCode']
     del payments_request['street']
-    del payments_request['0']
-    del payments_request['1']
 
 
 

app/static/js/test-cards.js

@@ -0,0 +1,74 @@
+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",
+    },
+  }
+
+// this is for the drop down to change test cards
+function changeTestCard(brandValue) {
+	updateCardCopy();
+  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
+}
+// change text position
+function positionText() {
+  let positionValue = document.getElementById("positionText").value
+  r.style.setProperty("--text-align", positionValue)
+  updateStyleCode()
+}
+// make text bold
+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()
+  }
+}
+
+// this turns the test card around on copyCVC button click
+function turnCard() {
+	updateCardCopy();
+  document.getElementById("card").classList.add("card-visited")
+}
+
+// this turns the card back to front if on reverse and copyPAN or copyExiry button gets clicked
+function resetCard() {
+	updateCardCopy();
+  if (document.getElementById("card").classList.contains("card-visited")) {
+    document.getElementById("card").classList.remove("card-visited")
+  }
+}
+
+// this updates the button attribute copy text to reflect the current card on UI
+function updateCardCopy() {
+	let panText = document.getElementById('cardNumber').innerText
+	console.log(panText)
+	document.getElementById('btn').setAttribute("data-clipboard-text", String(panText))
+	let expiryText = document.getElementById('expiry').innerText
+	document.getElementById('copy-expiry').setAttribute("data-clipboard-text", String(expiryText))
+	let cvcText = document.getElementById('cvc').innerText
+	document.getElementById('copy-cvc').setAttribute("data-clipboard-text", String(cvcText))
+}

app/templates/component.html

@@ -519,14 +519,14 @@
                         ></label>
                       </div>
                     </div>
-                    <div class="col-6">
+                    <div id="clearpayCol" class="col-6">
                     </div>
                     <!-- title -->
-                    <div class="col-3">
+                    <div id="clearpayBox" class="col-3">
                       <p class="textFonts text-left ml-3">Clearpay</p>
                     </div>
                     <!-- toggle -->
-                    <div class="col-3">
+                    <div id="clearpayToggle" class="col-3">
                       <div class="custom-control custom-switch text-center">
                         <input
                           type="checkbox"
@@ -1282,6 +1282,7 @@
     </script>
 
     <!-- local JS -->
+    <script src="{{ url_for('static', filename='js/test-cards.js') }}"></script>
     <script src="{{ url_for('static', filename='js/adyen-implementation.js') }}"></script>
 
     <!-- Clipboard.js script -->
@@ -1299,13 +1300,9 @@
       var clipboard = new Clipboard(".btn")
       clipboard.on("success", function (e) {
         console.log(e)
-        // setTooltip(e.trigger, 'Copied!');
-        // hideTooltip(e.trigger);
       })
       clipboard.on("error", function (e) {
         console.log(e)
-        // setTooltip(e.trigger, 'Failed!');
-        // hideTooltip(e.trigger);
       })
     </script>
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
@@ -1324,53 +1321,8 @@
       integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
       crossorigin="anonymous"
     ></script>
-    <!-- convert json to css -->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/json-to-css-variables@1.0.0/index.min.js"></script> -->
-    <!-- [Attributes by Finsweet] Code Highlight -->
-    <!-- <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
-    <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-codehighlight@1/codehighlight.js"></script>   -->
+
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
-    <!-- and it's easy to individually load additional languages -->
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/languages/go.min.js"></script>
   </body>
 </html>
-
-<!-- <div>
-      <button
-        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"
-      >
-        Copy PAN
-      </button>
-      <button
-        type="button"
-        id="btn"
-        class="btn"
-        toggle="tooltip"
-        data-clipboard-action="copy"
-        data-clipboard-target="p#expiry"
-        title="Copy to clipboard"
-        onclick="resetCard()"
-      >
-        Copy Expiry date
-      </button>
-      <button
-        type="button"
-        id="btn"
-        class="btn"
-        toggle="tooltip"
-        data-clipboard-action="copy"
-        data-clipboard-target="p#cvc"
-        title="Copy to clipboard"
-        onclick="turnCard()"
-      >
-        Copy CVC
-      </button>
-    </div> -->