CodePen Embed - Check Components (Embedding in Modal Demo)

Live

​x
 
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
  <meta content="utf-8" http-equiv="encoding" />
  <title>Check Components Sandbox</title>
​
  <!-- initialize onboard SDK, in production this is hosted on a CDN -->
  <script src="https://cdn.checkhq.com/component-initialize.js"></script>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>
​
<body>
  <div id="page" class="flex flex-col items-center justify-center w-screen h-screen text-gray-700">
    <div id="modalElement" class="modal">
      <div class="modal-content">
        <div id="component-holder" style="flex-grow: 1; height: 100%"></div>
      </div>
    </div>
    <form class="flex flex-col lg:w-1/2 rounded-lg max-w-xl bg-white rounded shadow-lg p-12" name="componentSetup" id="componentSetup" onsubmit="return false;">
      <div class="mb-8">
        <label for="api_key" class="block text-gray-700 text-sm font-bold mb-2">
          Sandbox API Key
        </label>
        <input id="api_key" name="api_key" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" />
        <div class="text-sm mt-2 text-gray-400">
          Don't have one? Request a Check API key <u><a href="https://www.checkhq.com/contact">here</a></u>.
        </div>
      </div>
      <div class="mb-8">
        <label for="entity_id" class="block text-gray-700 text-sm font-bold mb-2">
          Entity ID:
        </label>
        <input id="entity_id" name="entity_id" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" />
        <div class="text-sm mt-2 text-gray-400">
          (ex: "com_OkWFqNJLCjbfs2THoYKH", "emp_ahSPGYzHeca2Pe2nWo6b")
        </div>
      </div>
      <label for="component" class="block text-gray-700 text-sm font-bold mb-2">Choose a Component:</label>
      <select class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 mb-4" name="parent_entity" id="parent_entity" onchange="updateComponentOptions()">
        <option value="">Select Entity Type</option>
        <option value="employee">Employee</option>
        <option value="company">Company</option>
        <option value="setup">Setup</option>
        <option value="contractor">Contractor</option>
      </select>
      <select class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" name="component" id="component">
        <option value="">Select Component</option>
      </select>
      <script>
        function updateComponentOptions() {
          const parentEntity = document.getElementById('parent_entity').value;
          const componentSelect = document.getElementById('component');
          componentSelect.innerHTML = '<option value="">Select Component</option>';
          if (parentEntity === 'employee') {
            const employeeOptions = [
              {value: 'onboard', text: 'Employee Onboarding'},
              {value: 'ssn_setup', text: 'Employee SSN Setup'},
              {value: 'payment_setup', text: 'Employee Payment Setup'},
              {value: 'withholdings_setup', text: 'Employee Withholdings Setup'},
              {value: 'profile', text: 'Employee Profile'},
              {value: 'benefits', text: 'Employee Benefits'},
              {value: 'post_tax_deductions', text: 'Employee Post-tax Deductions'},
              {value: 'tax_documents', text: 'Employee Tax Documents'},
              {value: 'paystubs', text: 'Employee Paystub'}
            ];
            employeeOptions.forEach(option => {
              const optionElement = document.createElement('option');
              optionElement.value = option.value;
              optionElement.textContent = option.text;
              componentSelect.appendChild(optionElement);
            });
          } else if (parentEntity === 'company') {
            const companyOptions = [
              {value: 'onboard', text: 'Company Onboarding'},
              {value: 'payment_setup', text: 'Company Payment Setup'},
              {value: 'company_reports', text: 'Company Reports'},
              {value: 'filing_authorization', text: 'Company Filing Authorization'},
              {value: 'details', text: 'Company KYB'},
              {value: 'accounting_integration', text: 'Company Accounting Integration'},
              {value: 'run_payroll', text: 'Run Payroll'}
            ];
            companyOptions.forEach(option => {
              const optionElement = document.createElement('option');
              optionElement.value = option.value;
              optionElement.textContent = option.text;
              componentSelect.appendChild(optionElement);
            });
          } else if (parentEntity === 'setup') {
            const setupOptions = [
              {value: 'full_service_setup_submission', text: 'Company Full Service Setup Submission Component'},
              {value: 'previous_provider_access', text: 'Company Previous Payroll Provider Access'},
              {value: 'progress_tracker', text: 'Company Progress Tracker Component'},
              {value: 'verification_documents', text: 'Company Verification Documents'},
              {value: 'signatory_agreements', text: 'Company Signatory Agreements'},
              {value: 'connect_bank_account', text: 'Company Connect Bank Account'},
              {value: 'team_setup', text: 'Company Team Setup'},
              {value: 'pay_history', text: 'Company Pay History'},
              {value: 'business_details', text: 'Company Business Details Component'}
            ]
            setupOptions.forEach(option => {
              const optionElement = document.createElement('option');
              optionElement.value = option.value;
              optionElement.textContent = option.text;
              componentSelect.appendChild(optionElement);
            });
          } else if (parentEntity === 'contractor') {
            const contractorOptions = [
              {value: 'onboard', text: 'Contractor Onboarding'},
              {value: 'tax_doceuments', text: 'Contractor Tax Documents'}
            ]
            contractorOptions.forEach(option => {
              const optionElement = document.createElement('option');
              optionElement.value = option.value;
              optionElement.textContent = option.text;
              componentSelect.appendChild(optionElement);
            });
        }
      }
      </script>
      </select>
      <div class="flex mt-12 items-center justify-between">
        <button id="generateComponent" style="background-color: #0070ff" class="mx-auto w-full sm:w-1/3 hover:bg-blue-700 text-white font-bold py-2 sm:px-4 rounded focus:outline-none focus:shadow-outline" type="button">
          <div id="btnSpinner" class="spinner"></div>
          <div id="btnText">Generate</div>
        </button>
      </div>
    </form>
    <a href="http://checkhq.com/" target="_blank">
      <img class="h-8 mt-4" src="https://public-component-assets.s3.amazonaws.com/powered-by-check-badge.svg" alt="Powered by Check" />
    </a>
  </div>
</body>
​
</html>

Live

xxxxxxxxxx
 
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 40px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 20px;
  width: 80%;
  height: 90%;
  max-height: 700px;
  max-width: 900px;
}
.spinner {
  display: none;
  margin: auto;
  height: 25px;
  width: 25px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: rotation 0.6s infinite linear;
}
​
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
​

Live

xxxxxxxxxx
 
// Get the whole page
let page = document.getElementById("page");
​
// Get the modal
let componentModal = document.getElementById("modalElement");
​
// Get the button
let btn = document.getElementById("generateComponent");
​
// Get the button elements
let btnSpinner = document.getElementById("btnSpinner");
let btnText = document.getElementById("btnText");
​
// Define global Component handler
let handler = undefined;
​
// When the user clicks anywhere outside of the modal, close it
page.onclick = function (event) {
  if (event.target == componentModal && handler) {
    handler.close();
    componentModal.style.display = "none";
  }
};
​
// Spinner for button
function spinnerOn() {
  btnSpinner.style.display = "block";
  btnText.style.display = "none";
}
​
function spinnerOff() {
  btnSpinner.style.display = "none";
  btnText.style.display = "block";
}
​
// When the user clicks the button, generate the component
btn.onclick = async function () {
  spinnerOn();
  let componentUrl = await generateComponentURL(
    document.forms["componentSetup"]["entity_id"].value,
    document.forms["componentSetup"]["component"].value,
    document.forms["componentSetup"]["api_key"].value
  );
​
  if (componentUrl) {
    launchComponent(componentUrl);
  } else {
    spinnerOff();
    alert("Invalid, please correct fields to continue.");
  }
};
​
async function urlFromResponse(response) {
  if (!response.ok) return false;
  const body = await response.json();
  return body["url"];
}
​
async function generateComponentURL(entity_id, component_type, api_key) {
  const entity_prefix = entity_id.substring(0, 3);
  let entity_type = "";
​
  if (entity_prefix === "emp") {
    entity_type = "employees";
  } else if (entity_prefix === "com") {
    entity_type = "companies";
  } else if (entity_prefix === "ctr") {
    entity_type = "contractors";
  } else {
    return false;
  }
​
  // ----------------------------------------------
  // For the purposes of this demo we set up a cloud function that
  // makes calls to Check's API directly without authentication.
  // STRONG DISCLAIMER: This approach SHOULD NOT be used in production.
  // Calls to Check's API should always be authenticated by your backend first.
  // -----------------------------------------------
  const requestPath = `https://cors-anywhere.herokuapp.com/https://sandbox.checkhq.com/${entity_type}/${entity_id}/${
    component_type == "onboard" ? `onboard` : `components/${component_type}`
  }`;
​
  response = await fetch(requestPath, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Bearer " + api_key
    },
    body: JSON.stringify({
      signer_name: "signer_name",
      signer_title: "signer_title",
      email: "signer@example.com"
    })
  });
  return urlFromResponse(response);
}
​
async function launchComponent(componentUrl) {
  try {
    handler = CheckComponent.create({
      link: componentUrl,
      onClose: () => console.log("onClose"),
      onEvent: (event, data) => {
        console.log(`Event: ${event} with data: `, data);
      }
    });
    handler.open();
    const embeddedComponentElement = document.getElementById(
      "check-component-embedded-div"
    );
    if (embeddedComponentElement) {
      const componentHolder = document.getElementById("component-holder");
      componentHolder.appendChild(embeddedComponentElement);
      setTimeout(() => {
        spinnerOff();
        componentModal.style.display = "block";
      }, 2000); // launch modal
      return handler;
    }
  } catch (err) {
    console.error(err);
  }
}
​

This Pen is owned by Matthew Pentelei-Molnar on CodePen.

See more by @Matthew-Pentelei-Molnar on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.