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

# Quickstart

> Get started with Method Opal in minutes

This quickstart guide will help you integrate Method Opal into your application in just a few steps. Opal provides enhanced performance, better security, and advanced features compared to Elements.

## Prerequisites

Before you begin, make sure you have:

* A Method account with API access
* Your Method API key
* A web application or development environment

## Step 1: Install the Opal SDK

Choose the appropriate SDK for your application:

```html JavaScript (CDN) theme={null}
<script src="https://static.methodfi.com/opal/v1/stable/init.js"></script>
```

```bash React theme={null}
npm install @methodfi/opal-react
```

```bash React Native theme={null}
npm install @methodfi/opal-react-native
```

## Step 2: Create an Entity

First, create an entity for your user:

```bash cURL theme={null}
curl https://production.methodfi.com/entities \
  -X POST \
  -H "Method-Version: 2026-03-30" \
  -H "Authorization: Bearer sk_WyZEWVfTcH7GqmPzUPk65Vjc" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "individual",
    "individual": {
      "first_name": "John",
      "last_name": "Doe",
      "phone": "+15121234567",
      "email": "john.doe@example.com"
    }
  }'
```

```javascript Node.js theme={null}
const entity = await method.entities.create({
  type: "individual",
  individual: {
    first_name: "John",
    last_name: "Doe",
    phone: "+15121234567",
    email: "john.doe@example.com",
  },
});
```

```python Python theme={null}
entity = method.entities.create({
  'type': 'individual',
  'individual': {
    'first_name': 'John',
    'last_name': 'Doe',
    'phone': '+15121234567',
    'email': 'john.doe@example.com'
  }
})
```

## Step 3: Create an Opal Token

Create an Opal token for the Connect component:

```bash cURL theme={null}
curl https://production.methodfi.com/opal/token \
  -X POST \
  -H "Method-Version: 2026-03-30" \
  -H "Authorization: Bearer sk_WyZEWVfTcH7GqmPzUPk65Vjc" \
  -H "Content-Type: application/json" \
  -d '{
    "entity_id": "ent_fc92i43kc34",
    "mode": "connect",
    "connect": {
      "selection_type": "single",
      "account_filters": {
        "include": {
          "account_types": ["credit_card", "auto_loan"]
        }
      }
    }
  }'
```

```javascript Node.js theme={null}
const { token, valid_until, session_id } = await method.opal.token.create({
  entity_id: entity.id,
  mode: "connect",
  connect: {
    selection_type: "single",
    account_filters: {
      include: {
        account_types: ["credit_card", "auto_loan"],
      },
    },
  },
});
```

```python Python theme={null}
res = method.opal.token.create({
  'entity_id': entity.id,
  'mode': 'connect',
  'connect': {
    'selection_type': 'single',
    'account_filters': {
      'include': {
        'account_types': ['credit_card', 'auto_loan']
      }
    }
  }
})
```

## Step 4: Initialize Opal in Your Frontend

```html JavaScript (CDN) theme={null}
<script src="https://static.methodfi.com/opal/v1/stable/init.js"></script>

<button id="connect-button">Connect Your Account</button>

<script>
  document
    .getElementById("connect-button")
    .addEventListener("click", async () => {
      // Get token from Method
      const response = await fetch(`${baseURL}/opal/token`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          entity_id: "ent_fc92i43kc34",
          mode: "connect",
          connect: {
            selection_type: "single",
            account_filters: {
              include: {
                account_types: ["credit_card", "auto_loan"],
              },
            },
          },
        }),
      });
      const { token } = await response.json();

      // Open iframe with token
      const iframe = document.createElement("iframe");
      iframe.src = `https://opal.${env}$.methodfi.com?token=${token}`;
      iframe.style.width = "100%";
      iframe.style.height = "600px";
      iframe.style.border = "none";
      document.body.appendChild(iframe);
    });
</script>
```

```jsx React theme={null}
import { OpalProvider, useOpal } from "@methodfi/opal-react";

function App() {
  return (
    <OpalProvider>
      <ConnectButton />
    </OpalProvider>
  );
}

function ConnectButton() {
  const { open } = useOpal();

  const handleConnect = async () => {
    // Get token from Method
    const response = await fetch(`${baseURL}/opal/token`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        entity_id: "ent_fc92i43kc34",
        mode: "connect",
        connect: {
          selection_type: "single",
          account_filters: {
            include: {
              account_types: ["credit_card", "auto_loan"],
            },
          },
        },
      }),
    });
    const { token } = await response.json();

    // Launch Opal
    open({ token });
  };

  return <button onClick={handleConnect}>Connect Your Account</button>;
}
```

```jsx React Native theme={null}
import { OpalProvider, useOpal } from "@methodfi/opal-react-native";
import { Button } from "react-native";

function App() {
  return (
    <OpalProvider>
      <ConnectButton />
    </OpalProvider>
  );
}

function ConnectButton() {
  const { open } = useOpal();

  const handleConnect = async () => {
    // Get token from Method
    const response = await fetch(`${baseURL}/opal/token`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        entity_id: "ent_fc92i43kc34",
        mode: "connect",
        connect: {
          selection_type: "single",
          account_filters: {
            include: {
              account_types: ["credit_card", "auto_loan"],
            },
          },
        },
      }),
    });
    const { token } = await response.json();

    // Launch Opal
    open({ token });
  };

  return <Button title="Connect Your Account" onPress={handleConnect} />;
}
```

## Next Steps

Now that you have Opal working, explore these advanced features:

> [card] [Advanced Configuration](https://docs.methodfi.com/opal/connect/overview.md)
>
> Learn about advanced Opal Connect features and configuration options

> [card] [Event Handling](https://docs.methodfi.com/opal/events.md)
>
> Master Opal's comprehensive event system

> [card] [Migration Guide](https://docs.methodfi.com/opal/migration_guide.md)
>
> Migrate from Elements to Opal

### Getting Help

* **Documentation**: [Complete Opal Documentation](https://docs.methodfi.com/opal/overview.md)
* **API Reference**: [Opal API Reference](https://docs.methodfi.com/reference/opal/overview.md)
* **Support**: Contact your Method CSM


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.