diff --git a/README.md b/README.md
index 6bfc9c6..6a4d1cb 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # Cards component demo
 This repo is a demo page for testing our new Checkout Web SDK.
-The demo page is hosted on Github pages [here](https://optile.github.io/cards-component-demo/)
+The demo page is hosted on GitHub pages [here](https://optile.github.io/cards-component-demo/)
diff --git a/docs/index.html b/docs/index.html
index 0e969dd..2eee481 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,6 +5,7 @@
     <title>Payoneer Cards Demo</title>
     <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>
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="styles.css">
     <script src="index.js"></script>
@@ -14,7 +15,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">
@@ -104,6 +105,12 @@ <h3>Payment methods</h3>
                         <div class="loading-bar"></div>
                         <div class="loading-bar"></div>
                     </div>
+                    <div id="payment-methods-list" class="hidden">
+                        <payoneer-payment-methods-list
+                            env="pi-nightly.integration"
+                            order-components="klarna,afterpay,cards"
+                            id="payment-list-component" />
+                    </div>
                     <form id="payment-methods">
                         <div id="cards-payment-method" class="payment-method hidden">
                             <label for="card-radio" id="cards-select-container" class="payment-method-select-container">
@@ -126,44 +133,44 @@ <h3>Payment methods</h3>
                                 </div>
                             </div>
                         </div>
-                        <div id="afterpay-payment-method" class="payment-method hidden">
-                            <label for="afterpay-radio" id="afterpay-select-container"
+                        <div id="klarna-payment-method" class="payment-method hidden">
+                            <label for="klarna-radio" id="klarna-select-container"
                                 class="payment-method-select-container">
                                 <span>
-                                    <input id="afterpay-radio" type="radio" name="payment-option" value="afterpay">
-                                    Afterpay
+                                    <input id="klarna-radio" type="radio" name="payment-option" value="klarna">
+                                    Klarna
                                 </span>
-                                <span id="afterpay-icons" class="payment-method-icon-container">
+                                <span id="klarna-icons" class="payment-method-icon-container">
                                     
                                 </span>
                             </label>
-                            <div id="afterpay-container" class="payment-method-component-container">
-                                <div id="afterpay-component-container" class="payment-component-container">
+                            <div id="klarna-container" class="payment-method-component-container">
+                                <div id="klarna-component-container" class="payment-component-container">
                                     <!-- Add payoneer-redirect element below here -->
                                 </div>
                                 <div class="redirect-button-container" style="display: none;">
-                                    <button id="afterpay-hosted-redirect-button" class="redirect-button">Proceed to
+                                    <button id="klarna-hosted-redirect-button" class="redirect-button">Proceed to
                                         payment</button>
                                 </div>
                             </div>
                         </div>
-                        <div id="klarna-payment-method" class="payment-method hidden">
-                            <label for="klarna-radio" id="klarna-select-container"
+                        <div id="afterpay-payment-method" class="payment-method hidden">
+                            <label for="afterpay-radio" id="afterpay-select-container"
                                 class="payment-method-select-container">
                                 <span>
-                                    <input id="klarna-radio" type="radio" name="payment-option" value="klarna">
-                                    Klarna
+                                    <input id="afterpay-radio" type="radio" name="payment-option" value="afterpay">
+                                    Afterpay
                                 </span>
-                                <span id="klarna-icons" class="payment-method-icon-container">
+                                <span id="afterpay-icons" class="payment-method-icon-container">
                                     
                                 </span>
                             </label>
-                            <div id="klarna-container" class="payment-method-component-container">
-                                <div id="klarna-component-container" class="payment-component-container">
+                            <div id="afterpay-container" class="payment-method-component-container">
+                                <div id="afterpay-component-container" class="payment-component-container">
                                     <!-- Add payoneer-redirect element below here -->
                                 </div>
                                 <div class="redirect-button-container" style="display: none;">
-                                    <button id="klarna-hosted-redirect-button" class="redirect-button">Proceed to
+                                    <button id="afterpay-hosted-redirect-button" class="redirect-button">Proceed to
                                         payment</button>
                                 </div>
                             </div>
@@ -185,24 +192,40 @@ <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>
-                                    <label for="embedded">Embedded</label>
+                                    <input type="radio" id="embedded-option" name="integration-type" value="embedded" checked>
+                                    <label for="embedded-option">Embedded</label>
                                 </div>
                                 <div class="option-control-container">
-                                    <input type="radio" id="hosted" name="integration" value="hosted">
-                                    <label for="hosted">Hosted</label>
+                                    <input type="radio" id="hosted-option" name="integration-type" value="hosted">
+                                    <label for="hosted-option">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>
+                            <option value="successwithconversion">FX conversion + success</option>
                             <option value="error">Error</option>
                             <option value="abort">Abort</option>
                             <option value="retry">Retry</option>
                             <option value="3ds2">3DS2</option>
                             <option value="tryotheraccount">Try other account</option>
                             <option value="tryothernetwork">Try other network</option>
+                            <option value="expiredlist">Expired list</option>
+                            <option value="alreadypaid">Already paid</option>
                         </select>
                         <h4>Language</h4>
                         <select id="language">
@@ -233,7 +256,7 @@ <h4>Payment button type</h4>
                                 </div>
                             </form>
                         </div>
-                        <div id="cards-options" style="display: none;">
+                        <div id="cards-options">
                             <div id="styling-options">
                                 <h4>Styling</h4>
                                 <div class="option-controls">
@@ -248,6 +271,17 @@ <h4>Styling</h4>
                                 </div>
                             </div>
                         </div>
+                        <div id="hosted-preselection" class="hosted-preselection-chooser" style="display:none;">
+                            <h4>Preselection</h4>
+                            <form id="hosted-preselection-form">
+                                <div class="option-controls">
+                                    <div class="option-control-container">
+                                        <input type="checkbox" id="hosted-preselection-checkbox" checked>
+                                        <label for="hosted-preselection-checkbox">Use preselection</label>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
                         <div id="hosted-theme" class="hosted-theme-chooser">
                             <h4>Hosted page theme</h4>
                             <form id="hosted-theme-form">
diff --git a/docs/index.js b/docs/index.js
index 0268d9e..f74aa1f 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -5,6 +5,9 @@ window.addEventListener("DOMContentLoaded", async () => {
   // Update the select menu for outcome based on query param
   setOutcomeSelect();
 
+  // Update the preselection option for outcome based on query param
+  setPreselection();
+
   // Update the select menu for language based on query param
   setLanguageSelect();
 
@@ -54,6 +57,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) {
@@ -61,6 +68,7 @@ window.addEventListener("DOMContentLoaded", async () => {
   }
 });
 
+// Resets all radio buttons so if user comes back via browser back button default selection is used
 window.addEventListener('beforeunload', function () {
   const radios = document.querySelectorAll('input[type="radio"]');
   radios.forEach(radio => {
@@ -72,6 +80,7 @@ window.addEventListener('beforeunload', function () {
   });
 });
 
+// Loads the checkout web script dynamically, using sandbox environment if listUrl from sandbox is passed
 function loadCheckoutWeb() {
   const searchParams = new URLSearchParams(window.location.search);
   const head = document.getElementsByTagName("head")[0];
@@ -88,7 +97,7 @@ function loadCheckoutWeb() {
     searchParams.get("listUrl").includes("sandbox")
   ) {
     js.src =
-      "https://resources.pi-nightly.integration.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js";
+      "https://resources.sandbox.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js";
   } else {
     js.src =
       "https://resources.pi-nightly.integration.oscato.com/web/libraries/checkout-web/umd/checkout-web.min.js";
@@ -145,38 +154,114 @@ 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("hosted-preselection").style ="display: none;"
+    document.getElementById("custom-pay-button-container").style =
+      payButtonType === "custom" ? "display: block;" : "display: none;";
+    document.getElementById("payment-button-choice").style = "display: block;";
+    document.getElementById("cards-options").style = "display: block;";
+  }
+
+  else if (integrationType === "hosted") {
+    showHostedButtonContainers();
+    hideEmbeddedPaymentContainers();
+    document.getElementById("hosted-option").checked = true;
+    document.getElementById("cards-options").style = "display: block;";
+    document.getElementById("styling-options").style = "display: none;";
+    document.getElementById("hosted-theme").style = "display: block;";
+    document.getElementById("hosted-preselection").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);
+  });
+
+  document.getElementById("hosted-preselection-checkbox").addEventListener("change", (event) => {
+    handlePreselectionCheckboxChange(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 handlePreselectionCheckboxChange (event) {
+    const params = new URLSearchParams(window.location.search);
+    params.set("usePreselection", event.target.checked);
+    window.location.search = params.toString();
   }
 }
 
@@ -184,9 +269,6 @@ 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") {
@@ -213,272 +295,418 @@ function setUpPayButton() {
     });
 }
 
+function showMessage(messageText, messageStyle, time) {
+  const message = document.getElementById("custom-override-message");
+  message.innerHTML = messageText;
+  message.style = messageStyle;
+  setTimeout(() => {
+    message.style = "background-color: orange; display: none;";
+    return false; // false hides default error message from the SDK
+  }, 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") : "payment-components";
+}
+
+// Checks URL params to see if default or custom pay button was chosen
+function getUsePreselection() {
+  const params = new URLSearchParams(window.location.search);
+  if(params.has("usePreselection")) {
+    if(params.get("usePreselection") === "false") {
+      return false;
+    }
+    else {
+      return true;
+    }
+  } 
+  else {
+    return true;
+  }
+}
+
 async function initPayment() {
   const payButtonType = getPayButtonType();
 
   const longId = await getLongId();
 
-  const ie = getIE();
-
-  // configurations for the Checkout Web SDK
-  const configs = {
-    env: ie, // test | live | int-env-name | pi-nightly.integration
-    longId: longId,
-    preload: ["cards", "afterpay", "klarna"], // loads cards and afterpay script as soon as page loads so that rendering using dropIn is fast
-    onBeforeError: async (_checkout, componentName, errorData) => {
-      console.error(
-        "On before error called",
-        _checkout,
-        componentName,
-        errorData
-      );
-      switch (componentName) {
-        case "cards":
-          showCardsPaymentMethod(false);
-          return new Promise((resolve) => {
-            const message = document.getElementById("custom-override-message");
-            message.innerHTML = `onBeforeError called in Cards`;
-            message.style = "background-color: #FF4800; display: flex;";
-            setTimeout(() => {
-              message.style = "background-color: orange; display: none;";
-              resolve(true);
-            }, 1500);
-          });
-          break;
-        case "afterpay":
-          showAfterpayPaymentMethod(false);
-          return new Promise((resolve) => {
-            const message = document.getElementById("custom-override-message");
-            message.innerHTML = `onBeforeError called in Afterpay`;
-            message.style = "background-color: #FF4800; display: flex;";
-            setTimeout(() => {
-              message.style = "background-color: orange; display: none;";
-              resolve(true);
-            }, 1500);
-          });
-        case "klarna":
-          showKlarnaPaymentMethod(false);
-          return new Promise((resolve) => {
-            const message = document.getElementById("custom-override-message");
-            message.innerHTML = `onBeforeError called in Klarna`;
-            message.style = "background-color: #FF4800; display: flex;";
-            setTimeout(() => {
-              message.style = "background-color: orange; display: none;";
-              resolve(true);
-            }, 1500);
-          });
-        default:
-          document.getElementById("payment-methods").style.display = "none";
-          const message = document.getElementById("custom-override-message");
-          message.innerHTML = `onBeforeError called in ${componentName}`;
-          message.style = "background-color: #FF4800; display: flex;";
-          break;
-      }
+  const paymentListType = getPaymentListType();
 
-      return new Promise((resolve) => {
-        resolve(false);
-      });
-    },
-    onBeforeCharge: async () => {
-      console.log("On before charge called");
-      const message = document.getElementById("custom-override-message");
-      message.innerHTML = "Awaiting onBeforeCharge result...";
-      message.style = "display: flex;";
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          message.style = "background-color: #20DC86; display: flex;";
-          message.innerHTML = "onBeforeCharge success! &#10003;";
-          setTimeout(() => {
-            message.style = "background-color: orange; display: none;";
-            resolve(true);
-          }, 1000);
-        }, 1000);
-      });
-    },
-  };
+  const integrationType = getIntegrationType();
 
-  // Initialises the SDK
-  const checkout = await new Payoneer.CheckoutWeb(configs);
+  if(paymentListType === "payment-components" || integrationType === "hosted") {
+    const ie = getIE();
 
-  // Makes instance available in window
-  window.checkout = checkout;
+    function createPaymentListener(paymentComponent) {
+      return function (event) {
+        event.preventDefault();
+        paymentComponent.pay();
+      };
+    }
 
-  document.getElementById("loading-message").style.display = "none";
 
-  function createPaymentListener(paymentComponent) {
-    return function (event) {
-      event.preventDefault();
-      paymentComponent.pay();
-    };
-  }
 
-  // Reference to the current listener to enable removal
-  let currentPaymentListener = null;
+    // Reference to the current listener to enable removal
+    let currentPaymentListener = null;
 
-  // Function to update the payment method listener
-  function updateCustomPaymentButton(component) {
-    const payButton = document.getElementById("custom-pay-button");
+    // Function to update the payment method listener
+    function updateCustomPaymentButton(component) {
+      const payButton = document.getElementById("custom-pay-button");
 
-    // If there's an existing listener, remove it
-    if (currentPaymentListener) {
-      payButton.removeEventListener("click", currentPaymentListener);
-    }
-
-    currentPaymentListener = createPaymentListener(component);
+      // If there's an existing listener, remove it
+      if (currentPaymentListener) {
+        payButton.removeEventListener("click", currentPaymentListener);
+      }
 
-    // Add the new listener
-    payButton.addEventListener("click", currentPaymentListener);
-  }
+      currentPaymentListener = createPaymentListener(component);
 
-  if (checkout.state === "LOADED") {
-    document.getElementById("loading-message").style = "display: none;";
+      // Add the new listener
+      payButton.addEventListener("click", currentPaymentListener);
+    }
 
-    // Checks which dropin components are available based on the list response
-    const availableComponents = checkout.availableDropInComponents();
-    console.log(availableComponents);
-    document.getElementById("available-components").textContent = [
-      "Available components: ",
-    ]
-      .concat(availableComponents.map((comp) => comp.name))
-      .join(" ");
+    // configurations for the Checkout Web SDK
+    const configs = {
+      env: ie, // test | live | int-env-name | pi-nightly.integration
+      longId: longId,
+      preload: ["cards", "afterpay", "klarna"], // loads cards and afterpay script as soon as page loads so that rendering using dropIn is fast
+      // Called whenever there is an error (either server-side or client-side) which prevents payment. componentName indicates
+      // where the error occurred (checkout-web or one of the payment components)
+      onBeforeError: (checkout, componentName, errorData) => {
+        console.error(
+          "On before error called",
+          checkout,
+          componentName,
+          errorData
+        );
+        switch (componentName) {
+          // Cards payment component error - we want to unmount the component and hide payment method
+          case "cards":
+            try {
+              checkout.remove("cards");
+              showCardsPaymentMethod(false);
+            } catch(e) {
+              console.log(e)
+            };
+            showMessage(`onBeforeError called in Cards`, "background-color: #FF4800; display: flex;", 1500);
+          // Afterpay payment component error - we want to unmount the component and hide payment method
+          case "afterpay":
+            try {
+              checkout.remove("afterpay");
+              showAfterpayPaymentMethod(false);
+            } catch(e) {
+              console.log(e)
+            };
+            showMessage(`onBeforeError called in Afterpay`, "background-color: #FF4800; display: flex;", 1500);
+          // Klarna payment component error - we want to unmount the component and hide payment method
+          case "klarna":
+            try {
+              checkout.remove("klarna");
+              showKlarnaPaymentMethod(false);
+            } catch(e) {
+              console.log(e)
+            };
+            showMessage(`onBeforeError called in Klarna`, "background-color: #FF4800; display: flex;", 1500);
+          // Global error
+          case "checkout-web":
+          default:
+            showMessage(`onBeforeError called in ${componentName}`, "background-color: #FF4800; display: flex;", 100000);
+        }
+      },
+      // Called after pay button click, but before payment attempt
+      onBeforeCharge: async (checkout, componentName, errorData) => {
+        console.log("On before charge called", checkout, componentName, errorData);
+        const message = document.getElementById("custom-override-message");
+        message.innerHTML = "Awaiting onBeforeCharge result...";
+        message.style = "display: flex;";
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            message.style = "background-color: #61b2e8; display: flex;";
+            message.innerHTML = "onBeforeCharge OK. Attempting payment...";
+            setTimeout(() => {
+              message.style = "background-color: orange; display: none;";
+              resolve(true); // true means payment attempt proceeds
+            }, 1000);
+          }, 1000);
+        });
+      },
+      // Called in PROCEED scenario with PROVIDER redirect just before redirecting to provider url
+      onBeforeProviderRedirect: (checkout, componentName, redirectData) => {
+        console.log("On before provider redirect called", checkout, componentName, redirectData);
+        const message = document.getElementById("custom-override-message");
+        message.innerHTML = "Awaiting onBeforeProviderRedirect result...";
+        message.style = "display: flex;";
+        setTimeout(() => {
+          return true // true means redirect to provider proceeds
+        }, 1000);
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            message.style = "background-color: #61b2e8; display: flex;";
+            message.innerHTML = "Redirecting to 3rd party provider...";
+            setTimeout(() => {
+              message.style = "background-color: orange; display: none;";
+              resolve(true); // true means redirect to provider proceeds
+            }, 1000);
+          }, 1000);
+        });
+      },
+      // Called in PROCEED scenario with RETURN redirect just before redirecting to returnUrl
+      onPaymentSuccess: async (checkout, componentName, redirectData) => {
+        console.log("On payment success called", checkout, componentName, redirectData);
+        const message = document.getElementById("custom-override-message");
+        message.innerHTML = "onPaymentSuccess was called...";
+        message.style = "display: flex;";
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            message.style = "background-color: #20DC86; display: flex;";
+            message.innerHTML = "Payment was successful! &#10003; Redirecting...";
+            setTimeout(() => {
+              message.style = "background-color: orange; display: none;";
+              resolve(true); // true means redirect to returnUrl proceeds
+            }, 1000);
+          }, 1000);
+        });
+      },
+      // Called in ABORT scenario just before redirecting to cancelUrl
+      onPaymentFailure: async (checkout, componentName, redirectData) => {
+        console.log("On payment failure called", checkout, componentName, redirectData);
+        const message = document.getElementById("custom-override-message");
+        message.innerHTML = "onPaymentFailure was called...";
+        message.style = "display: flex;";
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            message.style = "background-color: #FF4800; display: flex;";
+            message.innerHTML = "Payment session aborted! Redirecting...";
+            setTimeout(() => {
+              message.style = "background-color: orange; display: none;";
+              resolve(true); // true means redirect to cancelUrl proceeds
+            }, 1000);
+          }, 1000);
+        });
+      },
+      // Called when fresh payment session data is received from Payoneer gateway
+      onListRefetch: async (checkout, componentName, listData) => { 
+        console.log("List data refetched", checkout, componentName, listData);
+        const availableComponents = checkout.availableDropInComponents();
+        setAvailableComponents(availableComponents);
+        return true;
+      },
+      onComponentListChange: (checkout, changeInfo) => {
 
-    // Radio button inputs for the Payoneer-provided payment methods
-    const cardsRadio = document.getElementById("card-radio");
-    const afterpayRadio = document.getElementById("afterpay-radio");
-    const klarnaRadio = document.getElementById("klarna-radio");
+        // Remove any payment methods that are no longer available
+        const removedComponents = changeInfo.removedComponents;
 
+        if(removedComponents.has("cards") && checkout.isDroppedIn("cards")) {
+          checkout.remove("cards");
+          showCardsPaymentMethod(false);
+          showMessage(`Payment with cards not possible`, "background-color: #FF4800; display: flex;", 1500);
+        }
 
-    // Check if cards is available as a drop-in component and render cards option in payment methods if so
-    const cardsComponentAvailable = availableComponents.find((component) => component.name === "cards");
+        if(removedComponents.has("afterpay") && checkout.isDroppedIn("afterpay")) {
+          checkout.remove("afterpay");
+          showAfterpayPaymentMethod(false);
+          showMessage(`Payment with Afterpay not possible`, "background-color: #FF4800; display: flex;", 1500);
+        }
 
-    if (cardsComponentAvailable) {
-      showCardsPaymentMethod(true);
+        if(removedComponents.has("klarna") && checkout.isDroppedIn("klarna")) {
+          checkout.remove("klarna");
+          showKlarnaPaymentMethod(false);
+          showMessage(`Payment with Klarna not possible`, "background-color: #FF4800; display: flex;", 1500);
+        }
 
-      cardsComponentAvailable.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
-        const img = document.createElement("img");
-        img.src = url;
-        document.getElementById("card-icons").appendChild(img);
-      });
+        // Handle the available components
+        const availableComponents = changeInfo.availableComponents;
+        console.log("New available components are...", availableComponents)
 
+        // Radio button inputs for the Payoneer-provided payment methods
+        const cardsRadio = document.getElementById("card-radio");
+        const afterpayRadio = document.getElementById("afterpay-radio");
+        const klarnaRadio = document.getElementById("klarna-radio");
 
-      // This is a container for the payoneer-cards component, hidden by default and shown when cards radio is clicked
-      const container = document.getElementById("cards-component-container");
+        if(availableComponents.has("cards")) {
 
-      // Already drop in cards component so that it renders immediately
-      const cards = checkout
-        .dropIn("cards", {
-          hidePaymentButton: !(payButtonType === "default"),
-        })
-        .mount(container);
+          // Ensure card icons in payment list are updated
+          const cardIcons = document.getElementById("card-icons");
+          cardIcons.innerHTML = "";
+          checkout.getComponentInfo("cards")?.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
+            const img = document.createElement("img");
+            img.src = url;
+            cardIcons.appendChild(img);
+          });
 
-      // When cards is selected, display the payoneer-cards component (and some extra configuration settings related to cards)
-      cardsRadio.addEventListener("change", (event) => {
-        if (event.target.checked) {
-          updateCustomPaymentButton(cards);
-          showCardsPaymentComponent(true);
-          showCardsOptions(true);
-          // Adds a click event handler to the custom pay button that triggers payment in cards component
-          showAfterpayPaymentComponent(false);
-          showKlarnaPaymentComponent(false);
+          if(!checkout.isDroppedIn("cards")) {
+
+            showCardsPaymentMethod(true);
+
+            // This is a container for the payoneer-cards component, hidden by default and shown when cards radio is clicked
+            const container = document.getElementById("cards-component-container");
+
+            // Already drop in cards component so that it renders immediately
+            const cards = checkout
+              .dropIn("cards", {
+                hidePaymentButton: !(payButtonType === "default"),
+              })
+              .mount(container);
+
+            // When cards is selected, display the payoneer-cards component (and some extra configuration settings related to cards)
+            cardsRadio.addEventListener("change", (event) => {
+              if (event.target.checked) {
+                updateCustomPaymentButton(cards);
+                showCardsPaymentComponent(true);
+                showCardsOptions(true);
+                // Adds a click event handler to the custom pay button that triggers payment in cards component
+                showAfterpayPaymentComponent(false);
+                showKlarnaPaymentComponent(false);
+              }
+            });
+
+            // Show this component by default if it is the only one in the available components
+            if (availableComponents.size === 1) {
+              cardsRadio.click();
+            }
+          }
+          else {
+            if (availableComponents.size === 1) {
+              cardsRadio.click();
+            }
+          }
         }
-      });
 
-      // Show this component by default if it is the only one in the available components
-      if (availableComponents.length === 1) {
-        cardsRadio.click();
-      }
-    }
+        if(availableComponents.has("afterpay")) {
+          
+          // Ensure Afterpay icon in payment list is updated
+          const afterpayIcons = document.getElementById("afterpay-icons");
+          afterpayIcons.innerHTML = "";
+          checkout.getComponentInfo("afterpay")?.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
+            const img = document.createElement("img");
+            img.src = url;
+            afterpayIcons.appendChild(img);
+          });
 
-    // If Afterpay is available as a drop-in component, show it in the payment methods list
-
-    const afterpayComponentAvailable = availableComponents.find((component) => component.name === "afterpay");
-
-    if (
-      afterpayComponentAvailable
-    ) {
-      showAfterpayPaymentMethod(true);
-      console.log(afterpayComponentAvailable);
-
-      afterpayComponentAvailable.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
-        const img = document.createElement("img");
-        img.src = url;
-        document.getElementById("afterpay-icons").appendChild(img);
-      });
-
-      // Placeholder for dropping in the Afterpay payment component
-      const container = document.getElementById("afterpay-component-container");
-
-      // Already drop in cards component so that it renders immediately
-      const afterpay = checkout
-        .dropIn("afterpay", {
-          hidePaymentButton: !(payButtonType === "default"),
-        })
-        .mount(container);
-
-      afterpayRadio.addEventListener("change", (event) => {
-        if (event.target.checked) {
-          updateCustomPaymentButton(afterpay);
-          showCardsPaymentComponent(false);
-          showCardsOptions(false);
-          showKlarnaPaymentComponent(false);
-          showAfterpayPaymentComponent(true);
+          if(!checkout.isDroppedIn("afterpay")) {
+            showAfterpayPaymentMethod(true);
+
+            // Placeholder for dropping in the Afterpay payment component
+            const container = document.getElementById("afterpay-component-container");
+
+            // Already drop in cards component so that it renders immediately
+            const afterpay = checkout
+              .dropIn("afterpay", {
+                hidePaymentButton: !(payButtonType === "default"),
+              })
+              .mount(container);
+
+            afterpayRadio.addEventListener("change", (event) => {
+              if (event.target.checked) {
+                updateCustomPaymentButton(afterpay);
+                showCardsPaymentComponent(false);
+                showCardsOptions(false);
+                showKlarnaPaymentComponent(false);
+                showAfterpayPaymentComponent(true);
+              }
+            });
+
+            // Show this component by default if it is the only one in the available components
+            if (availableComponents.size === 1) {
+              afterpayRadio.click();
+            }
+          }
+          else {
+            if (availableComponents.size === 1) {
+              afterpayRadio.click();
+            }
+          }
         }
-      });
 
-      // Show this component by default if it is the only one in the available components
-      if (availableComponents.length === 1) {
-        afterpayRadio.click();
+        if(availableComponents.has("klarna")) {
+
+          // Ensure Klarna icon in payment list is updated
+          const klarnaIcons = document.getElementById("klarna-icons");
+          klarnaIcons.innerHTML="";
+          checkout.getComponentInfo("klarna")?.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
+            const img = document.createElement("img");
+            img.src = url;
+            klarnaIcons.appendChild(img);
+          });
+
+          if(!checkout.isDroppedIn("klarna")) {
+            showKlarnaPaymentMethod(true);
+
+            // Placeholder for dropping in the klarna payment component
+            const container = document.getElementById("klarna-component-container");
+
+            // Already drop in cards component so that it renders immediately
+            const klarna = checkout
+              .dropIn("klarna", {
+                hidePaymentButton: !(payButtonType === "default"),
+              })
+              .mount(container);
+
+            klarnaRadio.addEventListener("change", (event) => {
+              if (event.target.checked) {
+                updateCustomPaymentButton(klarna);
+                showCardsPaymentComponent(false);
+                showCardsOptions(false);
+                showAfterpayPaymentComponent(false);
+                showKlarnaPaymentComponent(true);
+              }
+            });
+
+            // Show this component by default if it is the only one in the available components
+            if (availableComponents.size === 1) {
+              klarnaRadio.click();
+            }
+          }
+          else {
+            if (availableComponents.size === 1) {
+              klarnaRadio.click();
+            }
+          }
+        }
       }
-    }
+    };
 
-    // If Klarna is available as a drop-in component, show it in the payment methods list
+    // Initialises the SDK
+    const checkout = await new Payoneer.CheckoutWeb(configs);
 
-  const klarnaComponentAvailable = availableComponents.find((component) => component.name === "klarna");
-  if (
-    klarnaComponentAvailable
-  ) {
-    showKlarnaPaymentMethod(true);
-    console.log(klarnaComponentAvailable);
+    // Makes instance available in window
+    window.checkout = checkout;
 
-    klarnaComponentAvailable.networkInformation?.map(info => info.logoUrl).slice(0, 4).forEach(url => {
-      const img = document.createElement("img");
-      img.src = url;
-      document.getElementById("klarna-icons").appendChild(img);
-    });
+    document.getElementById("loading-message").style.display = "none";
 
-    // Placeholder for dropping in the klarna payment component
-    const container = document.getElementById("klarna-component-container");
+    if (checkout.state === "LOADED") {
+      document.getElementById("loading-message").style = "display: none;";
 
-    // Already drop in cards component so that it renders immediately
-    const klarna = checkout
-      .dropIn("klarna", {
-        hidePaymentButton: !(payButtonType === "default"),
-      })
-      .mount(container);
-
-    klarnaRadio.addEventListener("change", (event) => {
-      if (event.target.checked) {
-        updateCustomPaymentButton(klarna);
-        showCardsPaymentComponent(false);
-        showCardsOptions(false);
-        showAfterpayPaymentComponent(false);
-        showKlarnaPaymentComponent(true);
-      }
-    });
+      // Checks which dropin components are available based on the list response
+      const availableComponents = checkout.availableDropInComponents();
+      console.log("Available components", availableComponents);
+      setAvailableComponents(availableComponents);
 
-    // Show this component by default if it is the only one in the available components
-    if (availableComponents.length === 1) {
-      klarnaRadio.click();
+      // Update the UI once the list response is received so that components become visible
+      document.getElementById("payment-methods").style = "display: block;";
     }
   }
-
-    // Update the UI once the list response is received so that components become visible
-    document.getElementById("payment-methods").style = "display: block;";
+  else {
+    document.getElementById("payment-methods-list").classList.remove("hidden");
+    document.getElementById("loading-message").classList.add("hidden");
+    document.getElementById("payment-list-component").setAttribute("env", "pi-nightly.integration")
+    document.getElementById("payment-list-component").setAttribute("long-id", longId)
   }
 }
 
-function showError() {
-
+function setAvailableComponents(availableComponents) {
+  document.getElementById("available-components").textContent = [
+    "Available components: ",
+  ]
+    .concat(availableComponents.map((comp) => comp.name))
+    .join(" ");
 }
 
 async function getListResult() {
@@ -495,8 +723,6 @@ async function getListResult() {
 }
 
 async function getLongId() {
-  // Sets whether there should be a list fetching error or not
-  const isError = getError();
 
   const searchParams = new URLSearchParams(location.search);
 
@@ -506,9 +732,18 @@ async function getLongId() {
 
   const listData = await getListResult();
 
-  return isError
-    ? "657af292bd2dx24c0a9cf07cl3jphnlp1iruhlio061evom047"
-    : listData.identification.longId;
+  const outcome = getPaymentOutcome();
+
+  switch(outcome) {
+    case "error":
+      return "657af292bd2dx24c0a9cf07cl3jphnlp1iruhlio061evom047";
+    case "alreadypaid":
+      return "6731d7569e99650001ea64b0l6iff867etchoafjmi0kjn7dj7";
+    case "expiredlist":
+      return "6731c5509e99650001ea623elrdfkf8vqeo9eauobobjc71m78";
+    default:
+      return listData.identification.longId;
+  }
 }
 
 function getIE() {
@@ -719,6 +954,17 @@ function setOutcomeSelect() {
   }
 }
 
+function setPreselection() {
+  const params = new URLSearchParams(window.location.search);
+  const usePreselection = params.get("usePreselection");
+  if (usePreselection && usePreselection == "false") {
+    document.getElementById("hosted-preselection-checkbox").checked = false;
+  }
+  else {
+    document.getElementById("hosted-preselection-checkbox").checked = true;
+  }
+}
+
 // Sets initial value of language select menu based on query parameter
 function setLanguageSelect() {
   const params = new URLSearchParams(window.location.search);
@@ -730,13 +976,24 @@ function setLanguageSelect() {
   }
 }
 
-// Returns country value based on query parameter
-function getCountry() {
+// Returns the payment outcome based on query parameter
+function getPaymentOutcome() {
   const params = new URLSearchParams(window.location.search);
-  return params.has("paymentOutcome") &&
-    params.get("paymentOutcome") === "abort"
-    ? "SE"
-    : "US";
+  const paymentOutcome = params.get("paymentOutcome")
+    ? params.get("paymentOutcome")
+    : null;
+  return paymentOutcome;
+}
+
+// Returns the deferral based on payment outcome
+function getDeferral() {
+  const paymentOutcome = getPaymentOutcome();
+  if(paymentOutcome === "abort") {
+    return "DEFERRED"
+  } 
+  else {
+    return "NON_DEFERRED"
+  }
 }
 
 // Checks query params to see if error case was selected
@@ -806,11 +1063,8 @@ function getThemeSettings(theme, setting) {
 
 // Returns amount value based on query parameter (used for triggering different payment scenarios in TESTPSP)
 function getAmount() {
-  const params = new URLSearchParams(window.location.search);
 
-  const paymentOutcome = params.get("paymentOutcome")
-    ? params.get("paymentOutcome")
-    : null;
+  const paymentOutcome = getPaymentOutcome();
 
   let amount;
 
@@ -822,7 +1076,7 @@ function getAmount() {
       amount = 15.0;
       break;
     case "abort":
-      amount = 15.0;
+      amount = 4.02;
       break;
     case "retry":
       amount = 1.03;
@@ -844,6 +1098,20 @@ function getAmount() {
   return amount;
 }
 
+function getCountry() {
+  const paymentOutcome = getPaymentOutcome();
+  let country;
+  switch (paymentOutcome) {
+    case "successwithconversion":
+      country = "DE";
+      break;
+    default:
+      country = "US";
+      break;
+  }
+  return country;
+}
+
 // List generator function which uses our unauthenticated pi-nightly list creation service for demo list sesssions
 function generateList(
   integrationType,
@@ -854,15 +1122,23 @@ function generateList(
   method
 ) {
   function getPreselection(paymentMethod) {
-    switch (paymentMethod) {
-      case "cards":
-        return ["AMEX", "VISA", "MASTERCARD", "JCB", "DISCOVER"];
-      case "afterpay":
-        return ["AFTERPAY"];
-      case "klarna":
-        return ["KLARNA"];
-      default:
-        return ["AMEX", "VISA", "MASTERCARD", "JCB", "AFTERPAY", "DISCOVER", "KLARNA"];
+
+    const isPreselected = getUsePreselection();
+    const integrationType = getIntegrationType();
+    if(integrationType === "hosted" && !isPreselected) {
+      return ["AMEX", "VISA", "MASTERCARD", "JCB", "AFTERPAY", "DISCOVER", "KLARNA"];
+    }
+    else {
+      switch (paymentMethod) {
+        case "cards":
+          return ["AMEX", "VISA", "MASTERCARD", "JCB", "DISCOVER"];
+        case "afterpay":
+          return ["AFTERPAY"];
+        case "klarna":
+          return ["KLARNA"];
+        default:
+          return ["AMEX", "VISA", "MASTERCARD", "JCB", "AFTERPAY", "DISCOVER", "KLARNA"];
+      }
     }
   }
 
@@ -921,10 +1197,11 @@ function generateList(
     preselection: {
       direction: "CHARGE",
       networkCodes: getPreselection(method),
+      deferral: getDeferral()
     },
     presetFirst: false,
     style: {
-      hostedVersion: method === "cards" ? "v5" : "v4",
+      hostedVersion: "v5",
       language: language,
       displayName: getThemeSettings(theme, "displayName"),
       primaryColor: getThemeSettings(theme, "primaryColor"),
diff --git a/docs/styles.css b/docs/styles.css
index 663e724..674ecf3 100644
--- 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;