Front-end React JS integration example

import IdentityValidation from "@paag-io/sdk-identity-validation";
import { useRef, useEffect } from "react";

const App = () => {
  const iframeContainerRef = useRef(null);
  const validationRef = useRef(null);

  const handleValidation = () => {
    if (validationRef.current) {
      validationRef.current.cleanup();
    }

    const validation = new IdentityValidation({
      validationMechanism: "iframe",
			// preencha com sua publishable key e o host da UI
      host: "https://identity-shield.uat.paag.dev",
      token: "FF04...856CD",
      target: iframeContainerRef.current || undefined,
    });

    validation.on("success", () => {
      console.log("Validation successful!");
      validation.close();
    });

    validation.on("error", () => {
      console.error("Validation error.");
      validation.close();
    });

    validation.on("fail", () => {
      console.log("Validation failed.");
    });

    validation.on("close", () => {
      console.log("Validation closed before completion.");
    });

    validation.makeFullIdentityValidation();
    validationRef.current = validation;
  };

  useEffect(() => {
    return () => {
      if (validationRef.current) {
        validationRef.current.cleanup();
        validationRef.current = null;
      }
    };
  }, []);

  return (
    <div>
      <button onClick={handleValidation}>Start Validation</button>
      <div ref={iframeContainerRef}></div>
    </div>
  );
};

export default App;