Handling End-User Events

The unit-elements-white-label-app and unit-elements-application-form components support custom events that enable you to respond to user interactions and component lifecycle events. You can add event listeners to handle these events and integrate them with your application logic.

Event Name	Description	Detail
unitApplicationFormCompleted	Occurs when an application form is filled/completed	ApplicationForm

This event works for application form with statuses: AwaitingDocuments, PendingReview, Approved, Denied, Pending.

Example usage:

<unit-elements-application-form jwt-token="{{JwtToken}}">
</unit-elements-application-form>
<script>
  document
    .querySelector("unit-elements-application-form")
    .addEventListener("unitApplicationFormCompleted", async function (e) {
      const applicationForm = await e.detail;
      const status = applicationForm.data.attributes.applicationStatus; // one of `AwaitingDocuments, PendingReview, Approved, Denied, Pending`
      // Handle the application form completion based on status
    });
</script>

For additional event details and examples, see White-Label App events.

Unified Onboarding Events

These events are dispatched by the unit-elements-application-form component when the end user is going through a Unified Onboarding flow.

Event Name	Description	Detail
unitUnifiedClose	Dispatched when the end user dismisses the unified onboarding status screen, by clicking either the close (×) icon or the Close button. Use this to close / unmount the modal hosting the onboarding form in your app.	{} (empty)
unitUnifiedExploreAccount	Dispatched from the unified summary screen when the unified onboarding was only partially approved (e.g. payment processing was approved but banking was not). Use this to redirect the user to the next step in your flow (for example, to your "link an external bank account" experience).	{} (empty)

Example usage:

<unit-elements-white-label-app jwt-token="{{JwtToken}}">
</unit-elements-white-label-app>
<script>
  const unitElementsApplicationForm = document
    .querySelector("unit-elements-white-label-app")
    .shadowRoot
    .querySelector("unit-elements-application-form");

  unitElementsApplicationForm.addEventListener("unitUnifiedClose", () => {
    // close the modal hosting the unified onboarding form
  });

  unitElementsApplicationForm.addEventListener("unitUnifiedExploreAccount", () => {
    // navigate the user to your link-external-account flow
  });
</script>