> ## Documentation Index
> Fetch the complete documentation index at: https://docs.methodfi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Javascript SDK

Method provides a script to seamlessly integrate Elements into your web application.

## Installation

Include the initialization script into your application's main html file.

```html theme={null}
<script src="https://static.methodfi.com/elements/v1/stable/init.js"></script>
```

## Configuration

Once the initialization script has been included into your application, create an instance of the Method class.

```javascript theme={null}
const config = {
  env: 'production', // dev | sandbox | production
  onEvent: (event) => {
    // Invoked for every event triggered by the element.
    // Event is a native MessageEvent instance.
  },
  onSuccess: (payload) => {
    // Invoked when an account has successfully been linked.
    // After accounts are linked, `payload.accounts` will contain a list
    // of public account tokens which you will be exchanged for an
    // account through the Method API.
  },
  onError: (error) => {
    // Invoked when an error is raised during.
  },
  onExit: (payload) => {
    // Invoked when a user exits any element flow, or
    // immediately after an error is raised.
  },
  onOpen : (payload) => {
    // Invoked when an element has successfully launched.
  },
};

const method = new Method(config);
```

## Configuration Parameters

| Name      | Type     | Description                                                                                                                                                 |
| --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| env       | string   | The Method environment with which the element with interact with. Options: dev, sandbox, or production. See [Elements Environments](/elements/environments) |
| onEvent   | Function | A callback invoked with event, a native MessageEvent, when any event is triggered by the element.                                                           |
| onSuccess | Function | A callback invoked with payload when an element's flow has successfully been completed. See the [success event](/elements/events/specific_events#connect)   |
| onError   | Function | A callback invoked with error when an error is raised by the element. See the [error event](/elements/events/general_events#error).                         |
| onExit    | Function | A callback invoked with payload when an element exits. See the [exit event](/elements/events/general_events#exit).                                          |
| onOpen    | Function | A callback invoked with payload when an element is successfully launched. See the [open event](/elements/events/general_events#open).                       |

See [Method Elements events](/elements/events) for more info.

## Launch

### Retrieve an element token

Before you can launch an element, you must first create an element\_token for the element through the Method API.

In this example, we're creating an element\_token for the Connect Element.

<RequestExample>
  ```bash cURL theme={null}
  curl https://production.methodfi.com/elements/token \
    -X POST \
    -H "Method-Version: 2025-07-04" \
    -H "Authorization: Bearer sk_WyZEWVfTcH7GqmPzUPk65Vjc" \
    -H "Content-Type: application/json" \
    -d '{
      "entity_id": "ent_au22b1fbFJbp8",
      "team_name": "Demo Payment App",
      "type": "connect",
      "connect": {
        "products": ["balance"],
      }
    }'
  ```

  ```javascript Node.js theme={null}
    const response = await method.elements.create_token({
      entity_id: "ent_au22b1fbFJbp8",
      team_name: "Demo Payment App",
      type: "connect",
      connect: {
        products: ["balance"],
      }
    });
  ```

  ```python Python theme={null}
    token = method.elements.create_token({
      'entity_id': 'ent_au22b1fbFJbp8',
      'team_name': 'Demo Payment App',
      'type': 'connect',
      'connect': {
        'products': ["balance"],
      }
    })
  ```
</RequestExample>

<ResponseExample>
  ```json theme={null}
  {
    "element_token": "pk_elem_qPmypE9wwphr3WL3yTj7JhxjrPzAmK8G"
  }
  ```
</ResponseExample>

See [create an element token](/reference/elements/tokens) for more info.

### Launch the element

Now that a Method instance and an element\_token have been created, you can now launch the element.

```javascript theme={null}
method.open('pk_elem_BtzySdrQGFmLdAPw5gXSQNCxQkhCkT3K');
```