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

# The element endpoint

export const ExpandableFieldsList = ({resource_type}) => {
  const ExpandableFieldsByResourceType = {
    entity: ['connect', 'credit_score', 'attribute', 'vehicle'],
    account: ['sensitive', 'balance', 'card_brand', 'attribute', 'payoff', 'transaction', 'update', 'latest_verification_session', 'liability.mch_id']
  };
  const ExpandableFieldsNameToValues = {
    connect: {
      key_name: 'connect',
      object_name: 'Connect',
      type: 'string | null'
    },
    credit_score: {
      key_name: 'credit_score',
      object_name: 'CreditScore',
      type: 'string | null'
    },
    vehicle: {
      key_name: 'vehicle',
      object_name: 'Vehicle',
      type: 'string | null'
    },
    attribute: {
      key_name: 'attribute',
      object_name: 'Attribute',
      type: 'string | null'
    },
    sensitive: {
      key_name: 'sensitive',
      object_name: 'Sensitive',
      type: 'string | null'
    },
    balance: {
      key_name: 'balance',
      object_name: 'Balance',
      type: 'string | null'
    },
    card_brand: {
      key_name: 'card_brand',
      object_name: 'CardBrand',
      type: 'string | null'
    },
    payoff: {
      key_name: 'payoff',
      object_name: 'Payoff',
      type: 'string | null'
    },
    transaction: {
      key_name: 'transaction',
      object_name: 'Transaction',
      type: 'string | null'
    },
    update: {
      key_name: 'update',
      object_name: 'Update',
      type: 'string | null'
    },
    latest_verification_session: {
      key_name: 'latest_verification_session',
      object_name: 'AccountVerificationSession',
      type: 'string | null'
    },
    'liability.mch_id': {
      key_name: 'liability.mch_id',
      object_name: 'Merchant',
      type: 'string'
    }
  };
  const ExpandableFields = field_name => <ParamField body={ExpandableFieldsNameToValues[field_name].key_name} type={ExpandableFieldsNameToValues[field_name].type}>
      <>
        ID of the {ExpandableFieldsNameToValues[field_name].object_name} record.{' '}
        <Tooltip tip="This can be expanded into an object with the expand query parameter.">
          <a href="/reference/expanding">Expandable</a>
        </Tooltip>.
      </>
    </ParamField>;
  return ExpandableFieldsByResourceType[resource_type].map(field_name => {
    return ExpandableFields(field_name);
  });
};

export const ParamList = ({items = [], is_child = false}) => {
  return items.map(item => {
    const field_props = {
      id: Math.random().toString(),
      body: item.name,
      name: item.name,
      type: item.type,
      required: item.required
    };
    const enums = item.enums || [];
    const items = item.items || [];
    const has_items = items?.length > 0;
    const has_enums = enums?.length > 0;
    const should_default_open = item.defaultOpen || false;
    const render_child_item = () => {
      const child_props = {
        title: has_enums ? "Possible enum values" : "properties"
      };
      if (should_default_open) child_props.defaultOpen = true;
      const has_inline_enums = has_enums && enums.every(enum_item => typeof enum_item === 'string') && enums.map((enum_item, idx) => {
        const is_last = idx === enums.length - 1;
        const is_2nd_to_last = idx === enums.length - 2;
        return <>
            <code>{enum_item}</code>
            {is_last && ''}
            {is_2nd_to_last && ' or '}
            {!is_last && !is_2nd_to_last && ', '}
          </>;
      });
      const enum_list = has_enums && !has_inline_enums && <Accordion {...child_props}>
          {enums.map((enum_item, index) => <div key={`enum-${index}`}>
              <code>{enum_item.name}</code>
              <br />
              <p>{enum_item.description}</p>
            </div>)}
        </Accordion>;
      const item_list = has_items && <Expandable {...child_props}>
          <ParamList items={items || []} is_child />
        </Expandable>;
      return <>
          <p>
            {item.description}
            {has_inline_enums && [has_inline_enums.length > 1 ? ' One of ' : ' Must be ', ...has_inline_enums]}
          </p>

          {enum_list}
          {item_list}
        </>;
    };
    return is_child ? <ResponseField {...field_props}>{render_child_item()}</ResponseField> : <ParamField {...field_props}>{render_child_item()}</ParamField>;
  });
};

<Warning>
  Method Elements will no longer be supported or maintained beginning December 31st, 2025.
  We recommend using [Method Opal](/opal/overview) for all new integrations. If you are currently
  using Elements, please reach out to your CSM to discuss your migration options.
</Warning>

Method Elements is a collection of embeddable UI components that make it easy to integrate Method's API into your experience. Using Method Elements, you can securely identify your users, connect their liabilites, and move money across accounts.

For more information about using Elements, see the [Elements Overview](/elements/overview).

<RequestExample>
  ```json ELEMENT RESULTS OBJECT theme={null}
  {
    "authenticated": true,
    "cxn_id": "cxn_xr86xHEcWmpmB",
    "accounts": [
      "acc_jPXLFqd6KzH3N",
      "acc_DALLeLrj3TH8h"
    ],
    "entity_id": "ent_GWKYtnFyE79db",
    "events": [
      {
        "type": "open",
        "metadata": {
          "element_type": "connect",
          "op": "open"
        },
        "timestamp": "2024-04-25T02:35:28.097Z"
      },
      {
        "type": "success",
        "metadata": {
          "entity_id": "ent_GWKYtnFyE79db",
          "accounts": [
            "acc_jPXLFqd6KzH3N",
            "acc_DALLeLrj3TH8h"
          ],
          "element_type": "connect",
          "op": "success"
        },
        "timestamp": "2024-04-25T02:35:57.120Z"
      },
      {
        "type": "exit",
        "metadata": {
          "element_type": "connect",
          "op": "exit"
        },
        "timestamp": "2024-04-25T02:35:57.138Z"
      }
    ]
  }
  ```
</RequestExample>