IDMax Button Creator SDK

Overview

The IDMax Button Creator is a JavaScript utility designed to dynamically generate and manage authentication buttons for various identity providers. It facilitates the integration of identity verification services, allowing customizable options for both appearance and behavior.

Constructor Options

Settings Details

Styles Details

Buttons

Overlay

Content

Provider Descriptions

Usage Examples

React Integration

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

<!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>

Last updated