Added option to select payment list component

optile · Oct 25, 2024 · 87df8c2 · 87df8c2
1 parent 2bd257f
commit 87df8c2
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 25 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -6,6 +6,7 @@
     <link rel="shortcut icon" type="image/png" href="public/favicon-32x32.png">
     <meta charset="utf-8">
     <script src="https://resources.pi-nightly.integration.oscato.com/web/libraries/payment-methods-list/umd/payment-methods-list.js"></script>
+    <script src="https://resources.live.oscato.com/web/libraries/checkout-web-sdk/payoneer-cards/payoneer-cards.js"></script>
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="styles.css">
     <script src="index.js"></script>
@@ -15,7 +16,7 @@
     <header>
         <img alt="Payoneer logo" src="public/payoneer-white-logo.svg">
         <!-- <button id="toggle-dark" onclick="handleToggleDarkModeClick()">Dark mode</button>-->
-        <h2>Cards Demo</h2>
+        <h2>Web SDK Demo</h2>
     </header>
     <main id="main-content">
         <div class="demo-cards-container">
@@ -191,15 +192,28 @@ <h4>Integration</h4>
                         <form id="integration-form">
                             <div class="option-controls">
                                 <div class="option-control-container">
-                                    <input type="radio" id="embedded" name="integration" value="embedded" checked>
+                                    <input type="radio" id="embedded-option" name="integration" value="embedded" checked>
                                     <label for="embedded">Embedded</label>
                                 </div>
                                 <div class="option-control-container">
-                                    <input type="radio" id="hosted" name="integration" value="hosted">
+                                    <input type="radio" id="hosted-option" name="integration" value="hosted">
                                     <label for="hosted">Hosted</label>
                                 </div>
                             </div>
                         </form>
+                        <h4 id="payment-list-form-title">Payment list type</h4>
+                        <form id="payment-list-form">
+                            <div class="option-controls">
+                                <div class="option-control-container">
+                                    <input type="radio" id="payment-components-option" name="payment-list-type" value="payment-components" checked>
+                                    <label for="payment-components-option">Payment components</label>
+                                </div>
+                                <div class="option-control-container">
+                                    <input type="radio" id="payment-list-option" name="payment-list-type" value="payment-list">
+                                    <label for="payment-list-option">Payment list</label>
+                                </div>
+                            </div>
+                        </form>
                         <h4>Payment outcome</h4>
                         <select id="outcome">
                             <option value="success">Success</option>

diff --git a/docs/index.js b/docs/index.js
@@ -54,6 +54,10 @@ window.addEventListener("DOMContentLoaded", async () => {
   // Sets up chooser between hosted and embedded
   setUpIntegrationSelector();
 
+  // Sets up chooser between payment list component or embedded components
+  // Sets up pay button according to which type is requested, default or custom
+  setUpPaymentListType();
+
   try {
     loadCheckoutWeb();
   } catch (e) {
@@ -147,48 +151,107 @@ function hideEmbeddedPaymentContainers() {
 // Sets up chooser between hosted and embedded
 function setUpIntegrationSelector() {
   const payButtonType = getPayButtonType();
+  const integrationType = getIntegrationType();
+
+  if(integrationType === "embedded") { 
+    hideHostedButtonContainers();
+    showEmbeddedPaymentContainers();
+    document.getElementById("embedded-option").checked = true;
+    document.getElementById("styling-options").style =
+      payButtonType === "default" ? "display: block;" : "display: none;";
+    document.getElementById("hosted-theme").style = "display: none;";
+    document.getElementById("custom-pay-button-container").style =
+      payButtonType === "custom" ? "display: block;" : "display: none;";
+    document.getElementById("payment-button-choice").style = "display: block;";
+  }
+
+  else if (integrationType === "hosted") {
+    showHostedButtonContainers();
+    hideEmbeddedPaymentContainers();
+    document.getElementById("hosted-option").checked = true;
+    document.getElementById("styling-options").style = "display: none;";
+    document.getElementById("hosted-theme").style = "display: block;";
+    document.getElementById("custom-pay-button-container").style =
+      "display: none;";
+    document.getElementById("payment-list-form").style="display: none";
+    document.getElementById("payment-list-form-title").style="display: none";
+    document.getElementById("payment-button-choice").style = "display: none;";
+  }
 
   // User can see embedded cards component
-  document.getElementById("embedded").addEventListener("change", (event) => {
+  document.getElementById("embedded-option").addEventListener("change", (event) => {
     handleSelectEmbedded(event);
   });
 
   // User can see button which redirects to hosted payment page
-  document.getElementById("hosted").addEventListener("change", (event) => {
+  document.getElementById("hosted-option").addEventListener("change", (event) => {
     handleSelectHosted(event);
   });
 
   // Hide styling options and show only redirect to hosted button
-  function handleSelectHosted() {
-    showHostedButtonContainers();
-    hideEmbeddedPaymentContainers();
-    document.getElementById("styling-options").style = "display: none;";
-    document.getElementById("hosted-theme").style = "display: block;";
-    document.getElementById("custom-pay-button-container").style =
-      "display: none;";
-    document.getElementById("payment-button-choice").style = "display: none;";
+  function handleSelectHosted(event) {
+    const params = new URLSearchParams(window.location.search);
+    params.set("integrationType", event.target.value);
+    window.location.search = params.toString();
   }
 
   // Show styling options and only cards component
-  function handleSelectEmbedded() {
-    hideHostedButtonContainers();
-    showEmbeddedPaymentContainers();
-    document.getElementById("styling-options").style =
-      payButtonType === "default" ? "display: block;" : "display: none;";
-    document.getElementById("hosted-theme").style = "display: none;";
+  function handleSelectEmbedded(event) {
+    const params = new URLSearchParams(window.location.search);
+    params.set("integrationType", event.target.value);
+    window.location.search = params.toString();
+  }
+}
+
+function setUpPaymentListType() {
+
+  const paymentListType = getPaymentListType();
+  const payButtonType = getPayButtonType();
+  const integrationType = getIntegrationType();
+
+  if(paymentListType === "payment-list") {
+    document.getElementById("styling-options").style = "display: none;";
+    document.getElementById("payment-button-choice").style = "display: none;";
+    document.getElementById("payment-list-option").checked = true;
+    document.getElementById("custom-pay-button-container").style = "display: none;";
+  }
+  else if (paymentListType === "payment-components" && !integrationType === "hosted") {
+    document.getElementById("styling-options").style = "display: block;";
+    document.getElementById("payment-button-choice").style = "display: block;";
+    document.getElementById("payment-components-option").checked = true;
     document.getElementById("custom-pay-button-container").style =
       payButtonType === "custom" ? "display: block;" : "display: none;";
-    document.getElementById("payment-button-choice").style = "display: block;";
+  }
+
+  // User can see embedded cards component
+  document.getElementById("payment-components-option").addEventListener("change", (event) => {
+    handleSelectPaymentComponents(event);
+  });
+
+  // User can see button which redirects to hosted payment page
+  document.getElementById("payment-list-option").addEventListener("change", (event) => {
+    handleSelectPaymentList(event);
+  });
+
+  // Hide styling options and show only redirect to hosted button
+  function handleSelectPaymentComponents(event) {
+    const params = new URLSearchParams(window.location.search);
+    params.set("paymentListType", event.target.value);
+    window.location.search = params.toString();
+  }
+
+  // Show styling options and only cards component
+  function handleSelectPaymentList(event) {
+    const params = new URLSearchParams(window.location.search);
+    params.set("paymentListType", event.target.value);
+    window.location.search = params.toString();
   }
 }
 
 function setUpPayButton() {
   // Sets pay button type
   const payButtonType = getPayButtonType();
 
-  // Set the chosen integration to embedded by default
-  document.getElementById("embedded").checked = true;
-
   if (payButtonType === "default") {
     document.getElementById("default-option").checked = true;
   } else if (payButtonType === "custom") {
@@ -225,10 +288,16 @@ function showMessage(messageText, messageStyle, time) {
   }, time);
 }
 
+// Checks URL params to see if default or custom pay button was chosen
+function getIntegrationType() {
+  const params = new URLSearchParams(window.location.search);
+  return params.has("integrationType") ? params.get("integrationType") : "embedded";
+}
+
 // Checks URL params to see if default or custom pay button was chosen
 function getPaymentListType() {
   const params = new URLSearchParams(window.location.search);
-  return params.has("paymentListType") ? params.get("paymentListType") : "shop-list";
+  return params.has("paymentListType") ? params.get("paymentListType") : "payment-components";
 }
 
 async function initPayment() {
@@ -238,7 +307,9 @@ async function initPayment() {
 
   const paymentListType = getPaymentListType();
 
-  if(paymentListType === "shop-list") {
+  const integrationType = getIntegrationType();
+
+  if(paymentListType === "payment-components" || integrationType === "hosted") {
     const ie = getIE();
 
     function createPaymentListener(paymentComponent) {
@@ -248,6 +319,8 @@ async function initPayment() {
       };
     }
 
+
+
     // Reference to the current listener to enable removal
     let currentPaymentListener = null;
 

diff --git a/docs/styles.css b/docs/styles.css
@@ -257,6 +257,15 @@ marquee {
     color: gray;
 }
 
+.demo-cards-button {
+    background: linear-gradient(335deg, #ff4800, #0092f4);
+    color: white;
+}
+
+.demo-cards-button:hover {
+    cursor: pointer;
+}
+
 .demo-cards {
     padding: 1rem;
     background-color: white;