React Example (Self-Managed)

NOTE: You can now instead use AiPrise Web SDKs for quicker integration.

In case you prefer to open AiPrise onboarding screens in a separate window & have complete control over session management, here is the code snippet you can use in your web app to initiate & handle a verification request.

Steps:

Add the following code in your repo.
Add openAiPriseWindow to the onClick method of your "Next" step in your onboarding flow.

Get Verification URL

Call getVerificationURL with the initial user blob.

const AIPRISE_BASE_API_URL = "";
const AIPRISE_BASE_ONBOARDING_URL = "";
const AIPRISE_TEMPLATE_ID = "";

export function getVerificationURL(user_data: any = {}) {
  const data = {
    redirect_uri: "popup",
    template_id: AIPRISE_TEMPLATE_ID,
    user_data: user_data
  };
  // Assuming your react app uses axios for server requests.
  // You can replace this with however you handle server requests.
  return axiosInstance.request({
    url: `${AIPRISE_API_BASE_URL}/api/v1/verify/get_user_verification_url`,
    method: "POST",
    data: data,
    // NOTE: Do not expose the raw API_KEY here
    // AIPRISE_API_KEY should be stored in a env variable.
    headers: { "X-API-KEY": AIPRISE_API_KEY }
  })
}

Popup Creation and Management

If you wish for AiPrise verification to open in a popup window - you only need to append the following code to the same file.

Additional Steps:

Set the "redirect_uri" as "popup" in getVerificationURL
AiPrise window will use window.postMessage() to inform the parent window when the user has completed the verification flow.

// Append to the file above

let aiPriseWindow: any = null;

function messageListener (event: any){
  console.log(event.origin, event.data);
  if (event.origin === AIPRISE_BASE_ONBOARDING_URL && event.data === "AiPriseVerification:Complete") {
    aiPriseWindow?.close();
    window.removeEventListener('message', messageListener);
  }
}

export function openAiPriseWindow(
    verificationURL: string, 
    height: number = 650, 
    width: number = 400
){
  window.addEventListener('message', messageListener );
  const top = window!.top!.outerHeight / 2 + window!.top!.screenY - ( height / 2);
  const left = window!.top!.outerWidth / 2 + window!.top!.screenX - ( width / 2);
  aiPriseWindow = window.open(
    verificationURL,
    "aiprise",
    `toolbar=no, menubar=no, width=${width}, height=${height}, top=${top}, left=${left}`
  );
}

Finally, on your Button add the following code snippet

const onClickButton = () => {
  getVerificationURL()
    .then((response) => openAiPriseWindow(response.data.verification_url))
    .catch((error) => {console.log(error);})
};