Elements 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.

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

const config = {
  env: 'production', // dev | sandbox | production
  onEvent: (event) => {
    // Invoked for every event triggerd 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
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.
onError	Function	A callback invoked with error when an error is raised by the element. See the error event.
onExit	Function	A callback invoked with payload when an element exits. See the exit event.
onOpen	Function	A callback invoked with payload when an element is successfully launched. See the open event.

➡️ See Method 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 Link Element.

cURL

POST /elements/token

curl https://production.methodfi.com/elements/token \
  -X POST \
  -H "Authorization: Bearer sk_WyZEWVfTcH7GqmPzUPk65Vjc" \
  -H "Content-Type: application/json" \
  -d '{
    "entity_id": "ent_au22b1fbFJbp8",
    "team_name": "Demo Payment App",
    "type": "link",
    "link": {}
  }'

Node.js

POST /elements/token

const token = await method.elements.createToken({
  entity_id: 'ent_au22b1fbFJbp8',
  team_name: 'Demo Payment App',
  type: 'link',
  link: {},
});

Python

POST /elements/token

token = method.elements.create_token({
  'entity_id': 'ent_au22b1fbFJbp8',
  'team_name': 'Demo Payment App',
  'type': 'link',
  'link': {}
})

RESPONSE

{
  "element_token": "pk_elem_BtzySdrQGFmLdAPw5gXSQNCxQkhCkT3K"
}

{
  "element_token": "pk_elem_BtzySdrQGFmLdAPw5gXSQNCxQkhCkT3K"
}

➡️ See create an element token for more info.

Launch the element

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

method.open('pk_elem_BtzySdrQGFmLdAPw5gXSQNCxQkhCkT3K');