new-test

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snap Finance</title>

  <style>
    @font-face {
      font-family: 'Aeonik-Regular';
      src: url('https://assets.snapfinance.co.uk/retailerGenerator/Aeonik-Regular.woff') format('woff');
    }
    @font-face {
      font-family: 'Aeonik-Bold';
      src: url('https://assets.snapfinance.co.uk/retailerGenerator/Aeonik-Bold.woff') format('woff');
    }

    .snap__loading {
      position: absolute;
      width: 100%;
      height: 1000px;
      background: white;
      z-index: 1;
      font-family: 'Aeonik-Regular';
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .snap__loading h2 {
      color: #0ba797;
      font-size: 1.5rem;
    }
  </style>
</head>
<body>

  <div id="snapfinance-page" style="margin: 0 !important; display: block !important; width: 100%; max-width: 100%; height: 800px;"></div>

  <script>
    (function () {
      const snapContainer = document.getElementById('snapfinance-page');
      const shadow = snapContainer.attachShadow({ mode: 'open' });

      const loadingDiv = document.createElement('div');
      loadingDiv.className = 'snap__loading';
      loadingDiv.innerHTML = '<h2>Loading Snap Finance widget...</h2>';
      shadow.appendChild(loadingDiv);

      fetch('https://developer.snapfinance.co.uk/api/retailer-page?data=eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7Ik1FUkNIQU5UX0lEIjoiMTk3MTM4MzgiLCJNRVJDSEFOVF9OQU1FIjoiUHJpbWUgQ2FycGV0cyBhbmQgRnVybml0dXJlIn0sImlhdCI6MTc1MDAwMTAxOH0.2awW8e6mvv55FtNnvt3IxrpNSYJu0ite85a12Y4sECo')
        .then(async (res) => {
          const { template, scriptTemplate } = await res.json();

          const widgetDiv = document.createElement('div');
          widgetDiv.innerHTML = template;
          shadow.appendChild(widgetDiv);

          const widgetScript = document.createElement('script');
          widgetScript.innerHTML = scriptTemplate;
          shadow.appendChild(widgetScript);
        })
        .catch(() => {
          const errorDiv = document.createElement('div');
          errorDiv.className = 'snap__loading';
          errorDiv.innerHTML = '<h2>Unable to load Snap Finance. Please refresh the page.</h2>';
          shadow.appendChild(errorDiv);
        })
        .finally(() => {
          shadow.removeChild(shadow.firstChild);
        });
    })();
  </script>

</body>
</html>
Your Cart

Information

My Account

Social Network

Download App on Mobile
