<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

<!-- Components -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.css">

<style>
  body {
    height: 100vh;
    background: #6D7D87;
  }

  peculiar-fortify-certificates {
    max-width: 660px;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
</style>

<script>
  var fortifyCertificates = document.createElement('peculiar-fortify-certificates');
  // All possible propertiest you can find on the documentation page
  // https://fortifyapp.com/docs/webcomponents/fortify-certificates/readme#properties
  fortifyCertificates.debug = true;
  fortifyCertificates.filters = {};

  fortifyCertificates.addEventListener('selectionCancel', function () {
    alert('selectionCancel');
  });

  fortifyCertificates.addEventListener('selectionSuccess', function (event) {
    alert('selectionSuccess');
    alert('certificateId: ' + event.detail.certificateId);
    alert('providerId: ' + event.detail.providerId);
  });
  
  document.body.appendChild(fortifyCertificates);
</script>