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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://api.veratad.com/idmax/idmax-button-creator-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.