Handling DOM Events

Handling Continuity via DOM Events

When a user interacts with the embedded components specific DOM events are dispatched to notify your platform that the user needs to perform an action. These can be found here

Example

For onboarding, the completeOnboarding event indicates that a vendor has an incomplete application.

Below are two technical approaches to handling this event.

1. Hosted Redirect Use this method if you want to redirect the user to a standalone, Unipaas-hosted onboarding page. When the event is triggered, call the Unipaas API from your backend to generate a secure link.

Technical Steps:

Listen for the completeOnboarding event on the component's parent container.

Trigger a request to your backend to call the POST /platform/vendors/{"vendor Id"}/links endpoint. Docs

Open the resulting URL in a new tab or redirect the current window.

// 1. Initialize the Pay Portal
const payPortal = components.create("payPortal");
const container = document.getElementById("pay-portal-container");
payPortal.mount("#pay-portal-container");

// 2. Listen for the completion event
container.addEventListener("completeOnboarding", async (e) => {
    // Call your backend to generate the link
    const response = await fetch(`/api/generate-onboarding-link?vendorId=${vendorId}`, { method: 'POST' });
    const { url } = await response.json();
    
    // Redirect the user
    window.open(url, '_blank'); 
});

2. Embedded Flow

   Use this method to load the onboarding UI directly into a designated area of your application without leaving the page. This provides the most seamless user experience.

   Technical Steps:

   Ensure your container (e.g., <div id="onboarding" />) is present in the DOM.

   On the completeOnboarding event, initialize the onboarding component.

   Mount the component to your specific container.

const portalDiv = document.getElementById("payportal");

portalDiv.addEventListener("completeOnboarding", () => {
  // 1. Initialize the onboarding component
  // Note: Ensure your initial Access Token includes the 'onboarding_write' scope
  const onboarding = components.create("onboarding");

  // 2. Mount to the dedicated container
  onboarding.mount("#onboarding");
  
  // Optional: Scroll the user to the onboarding section
  document.getElementById("onboarding").scrollIntoView({ behavior: 'smooth' });
});

Comparison