Copy import React , { useEffect , useRef } from "react" ;
const IDMaxButtonContainer = () => {
const containerRef = useRef ( null );
useEffect (() => {
if ( window .IDMax && window . IDMax .ButtonCreator) {
new window . IDMax .ButtonCreator ({
targetElement : containerRef .current ,
providers : [ "clear" , "plaid" ] ,
settings : {
digital_id_connect : {
showWorksWith : true ,
} ,
} ,
styles : {
buttons : {
radius : "10px" ,
gap : "10px" ,
} ,
modal : {
overlay : {
color : "#000" ,
backgroundOpacity : 0.4 ,
blur : 3 ,
} ,
} ,
} ,
onInit : (provider) => console .log ( `Provider initialized: ${ provider } ` ) ,
onComplete : (data) => console .log ( "Authentication successful:" , data) ,
onError : (error) =>
console .error ( "Error during authentication:" , error) ,
onClose : () => console .log ( "Modal closed" ) ,
});
}
} , []);
return < div ref = {containerRef}></ div >;
};
export default IDMaxButtonContainer; Vanilla JavaScript Integration
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< title >IDMax Integration Example</ title >
</ head >
< body >
< div id = "idmax-button-container" ></ div >
< script >
document .addEventListener ( "DOMContentLoaded" , function () {
if ( window .IDMax && window . IDMax .ButtonCreator) {
new window . IDMax .ButtonCreator ({
targetElement : document .getElementById ( "idmax-button-container" ) ,
providers : [ "clear" , "plaid" ] ,
onInit : (provider) =>
console .log ( `Button for ${ provider } initialized` ) ,
onComplete : (data) => console .log ( "Completed with data:" , data) ,
onError : (error) => console .error ( "Error:" , error) ,
onClose : () => console .log ( "User closed the interaction" ) ,
});
}
});
</ script >
</ body >
</ html > 