> For the complete documentation index, see [llms.txt](https://api.veratad.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api.veratad.com/idmax/idmax-button-creator-sdk.md).

# 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'` |

#### Modal

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

```jsx
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

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