Added simulated onBeforeCharge task

optile · Nov 10, 2023 · 2cf4006 · 2cf4006
1 parent c9b8fe0
commit 2cf4006
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 {