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

<CodeGroup>
  ```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
  ```
</CodeGroup>

## Step 2: Create an Entity

First, create an entity for your user:

<CodeGroup>
  ```bash cURL theme={null}
  curl https://production.methodfi.com/entities \
    -X POST \
    -H "Method-Version: 2024-04-04" \
    -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'
    }
  })
  ```
</CodeGroup>

## Step 3: Create an Opal Token

Create an Opal token for the Connect component:

<CodeGroup>
  ```bash cURL theme={null}
  curl https://production.methodfi.com/opal/token \
    -X POST \
    -H "Method-Version: 2024-04-04" \
    -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']
        }
      }
    }
  })
  ```
</CodeGroup>

## Step 4: Initialize Opal in Your Frontend

<CodeGroup>
  ```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} />;
  }
  ```
</CodeGroup>

## Next Steps

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

<CardGroup cols={2}>
  <Card title="Advanced Configuration" href="/opal/connect/overview">
    Learn about advanced Opal Connect features and configuration options
  </Card>

  <Card title="Event Handling" href="/opal/events">
    Master Opal's comprehensive event system
  </Card>

  <Card title="Migration Guide" href="/opal/migration_guide">
    Migrate from Elements to Opal
  </Card>
</CardGroup>

### Getting Help

* **Documentation**: [Complete Opal Documentation](/opal/overview)
* **API Reference**: [Opal API Reference](/reference/opal/overview)
* **Support**: Contact your Method CSM