From 2cf4006cd4483cbdf3fee9a6a4516d48e1b4d67d Mon Sep 17 00:00:00 2001
From: Tom Schneider-Swales <thomas.schneider-swales@optile.net>
Date: Fri, 10 Nov 2023 13:29:47 +0100
Subject: [PATCH] Added simulated onBeforeCharge task

---
 docs/index.html |  1 +
 docs/index.js   | 22 ++++++++++++++++++++++
 docs/styles.css |  9 +++++++++
 3 files changed, 32 insertions(+)

diff --git a/docs/index.html b/docs/index.html
index fccab88..cac6d7d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -77,6 +77,7 @@ <h3>Shipping details</h3>
                         <!-- Add cards-element below here -->
                         <!-- <payoneer-cards id="cards-form"></payoneer-cards> -->
                     </div>
+                    <div id="on-before-charge-message" class="on-before-charge-message">Performing onBeforeCharge task</div>
                     <div id="button-container" style="display: none;">
                         <button class="redirect-button" onclick="handleStandaloneRedirectClick()">Proceed to
                             payment</button>
diff --git a/docs/index.js b/docs/index.js
index 9fe5f52..084023f 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -95,6 +95,28 @@ window.addEventListener("DOMContentLoaded", () => {
                 primaryTextColor: newColor
             })
         });
+
+        function didCardsRender() {
+            const cardsElement = document.getElementById("payoneer-cards-component");
+            if(cardsElement) {
+                cardsElement.onBeforeCharge(async () => {
+                    console.log("On before charge called");
+                    const message = document.getElementById("on-before-charge-message");
+                    message.style = "display: flex;";
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            message.style = "display: none;";
+                            resolve(true);
+                        }, 1000)
+                    });
+                });
+            }
+            else {
+                setTimeout(didCardsRender, 50);
+            }
+        }
+
+        didCardsRender();
     }
 
 });
diff --git a/docs/styles.css b/docs/styles.css
index c4e8b7a..da4f34a 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -216,6 +216,15 @@ table {
     display: none;
 }
 
+.on-before-charge-message {
+    background-color: orange;
+    color: white;
+    padding: 1rem;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
 @media (max-width: 700px) {
 
     .checkout-page-details {