Skip to main content
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>

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

​
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",
      "allowed_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",
            allowed_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>

​
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

⌘I