Quickstart - Method API Docs

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:

<script src="https://static.methodfi.com/opal/v1/stable/init.js"></script>

npm install @methodfi/opal-react

npm install @methodfi/opal-react-native

Step 2: Create an Entity

First, create an entity for your user:

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"
    }
  }'

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

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:

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"]
        }
      }
    }
  }'

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"],
      },
    },
  },
});

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

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

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>;
}

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:

Advanced Configuration

Learn about advanced Opal Connect features and configuration options

Event Handling

Master Opal’s comprehensive event system

Migration Guide

Migrate from Elements to Opal

Getting Help

Documentation: Complete Opal Documentation
API Reference: Opal API Reference
Support: Contact your Method CSM

​Prerequisites

​Step 1: Install the Opal SDK

​Step 2: Create an Entity

​Step 3: Create an Opal Token

​Step 4: Initialize Opal in Your Frontend

​Next Steps