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

Option

Type

Description

Example

providers

Array of strings

List of identity provider keys for which buttons will be created. See full list below.

['clear', 'plaid', 'mdl_la']

method

String

Determines the method of interaction, such as modal popups.

'popup' || 'redirect'

settings

Object

Additional settings for providers, controlling UI elements.

See Settings Details Below

styles

Object

CSS styles for buttons and modal overlays.

See Styles Details Below

onComplete

Function

Callback when an operation completes successfully.

(data) => console.log(data)

onError

Function

Callback invoked when an error occurs.

(error) => console.error(error)

onClose

Function

Callback when a modal or a session is explicitly closed.

() => console.log('Closed')

onInit

Function

Callback when a provider is initialized.

(provider) => console.log(provider)

targetElement

HTMLElement

DOM element where the buttons should be rendered.

Settings Details

Key

Sub-Key

Type

Description

Example

digital_id_connect

showWorksWith

Boolean

Controls whether to display associated partners or additional UI elements.

true

Styles Details

Buttons

Key

Type

Description

Example

radius

String

CSS value for border-radius of the buttons, must include units.

'8px'

gap

String

Vertical gap between buttons, must include units.

'10px'

Overlay

Key

Type

Description

Example

color

String

Background color of the modal overlay, accepts CSS color formats.

'#000'

backgroundOpacity

Float

Opacity level of the modal overlay background, from 0.0 to 1.0.

0.35

blur

Integer

Blur amount for the overlay, specified in pixels.

1

Content

Key

Type

Description

Example

borderRadius

String

CSS value for border-radius of the modal content, must include units.

'10px'

Provider Descriptions

Provider

Description

clear

Provides identity verification services using CLEAR systems.

plaid

Specializes in securely connecting financial accounts for identity verification.

mdl_la

State-specific ID verification using Louisiana's digital driver's licenses.

digital_id_connect

General digital identity verification provider.

one_id

Provides banking-based identity verification services.

digilocker

An Indian digital locker for securely storing and sharing personal documents.

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>

PreviousUnderstanding Veratad Services

Last updated 1 year ago

IDMax Button Creator SDK

Overview

Constructor Options

Option

Type

Description

Example

providers

Array of strings

List of identity provider keys for which buttons will be created. See full list below.

['clear', 'plaid', 'mdl_la']

method

String

Determines the method of interaction, such as modal popups.

'popup' || 'redirect'

settings

Object

Additional settings for providers, controlling UI elements.

See Settings Details Below

styles

Object

CSS styles for buttons and modal overlays.

See Styles Details Below

onComplete

Function

Callback when an operation completes successfully.

(data) => console.log(data)

onError

Function

Callback invoked when an error occurs.

(error) => console.error(error)

onClose

Function

Callback when a modal or a session is explicitly closed.

() => console.log('Closed')

onInit

Function

Callback when a provider is initialized.

(provider) => console.log(provider)

targetElement

HTMLElement

DOM element where the buttons should be rendered.

Settings Details

Key

Sub-Key

Type

Description

Example

digital_id_connect

showWorksWith

Boolean

Controls whether to display associated partners or additional UI elements.

true

Styles Details

Buttons

Key

Type

Description

Example

radius

String

CSS value for border-radius of the buttons, must include units.

'8px'

gap

String

Vertical gap between buttons, must include units.

'10px'

Overlay

Key

Type

Description

Example

color

String

Background color of the modal overlay, accepts CSS color formats.

'#000'

backgroundOpacity

Float

Opacity level of the modal overlay background, from 0.0 to 1.0.

0.35

blur

Integer

Blur amount for the overlay, specified in pixels.

1

Content

Key

Type

Description

Example

borderRadius

String

CSS value for border-radius of the modal content, must include units.

'10px'

Provider Descriptions

Provider

Description

clear

Provides identity verification services using CLEAR systems.

plaid

Specializes in securely connecting financial accounts for identity verification.

mdl_la

State-specific ID verification using Louisiana's digital driver's licenses.

digital_id_connect

General digital identity verification provider.

one_id

Provides banking-based identity verification services.

digilocker

An Indian digital locker for securely storing and sharing personal documents.

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>

PreviousUnderstanding Veratad Services

Last updated 1 year ago