Libraries - Method API Docs

Method offers a variety of libraries for your frontend application to make integrating with Opal easy and simple.

Frontend Libraries

Depending on your application, Method offers multiple frontend libraries to help you integrate with Opal:

JavaScript SDK

For vanilla JavaScript applications

React SDK

For React applications

React Native SDK

For React Native applications

All Opal SDKs provide:

Token Management: Automatic token validation and refresh
Event Handling: Comprehensive event system with typed callbacks
Error Management: Enhanced error handling with detailed error codes
Security: Built-in security features and validation

Installation

JavaScript
React
React Native

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

npm install @methodfi/opal-react

Quick usage: React (Web)

import { OpalProvider, useOpal, OpalEventType } from "@methodfi/opal-react";

export default function App() {
  return (
    <OpalProvider>
      <YourApp />
    </OpalProvider>
  );
}

function YourApp() {
  const { open, close, isOpen, error } = useOpal({
    env: "dev",
    onOpen: () => {},
    onExit: () => {},
    onEvent: (event) => {
      switch (event.type) {
        case OpalEventType.SESSION_STARTED:
          // ...
          break;
        case OpalEventType.SESSION_COMPLETED:
          // ...
          break;
        case OpalEventType.SESSION_ERRORED:
          // ...
          break;
        case OpalEventType.SESSION_EXITED:
          // ...
          break;
      }
    },
  });

  const onLaunchOpal = async () => {
    const token = await getOpalToken(); // POST /opal/token
    open({ token });
  };

  return <button onClick={onLaunchOpal}>Launch Opal</button>;
}

npm install @methodfi/opal-react-native

Quick usage: React Native (Mobile)

import {
  OpalProvider,
  useOpal,
  OpalEventType,
} from "@methodfi/opal-react-native";

export default function App() {
  return (
    <OpalProvider>
      <YourScreen />
    </OpalProvider>
  );
}

function YourScreen() {
  const { open } = useOpal({
    env: "dev",
    onOpen: () => {},
    onExit: () => {},
    onEvent: (event) => {
      switch (event.type) {
        case OpalEventType.SESSION_STARTED:
          // ...
          break;
        case OpalEventType.SESSION_COMPLETED:
          // ...
          break;
        case OpalEventType.SESSION_ERRORED:
          // ...
          break;
        case OpalEventType.SESSION_EXITED:
          // ...
          break;
      }
    },
  });

  const onLaunchOpal = async () => {
    const token = await getOpalToken(); // POST /opal/token returns otkn_*
    open({ token });
  };

  return <Button title="Launch Opal" onPress={onLaunchOpal} />;
}

Testing in Development

When testing the Opal frontend in the dev environment, any modal step that prompts you to enter a six-digit verification code will accept any six-digit code. For example: 123456.

Notes

Event types follow the format <flow>.<object>.<action> or opal.session.<action> for defaults
See Events for structure and sample payloads

Opal

Opal Modes

​Frontend Libraries

JavaScript SDK

React SDK

React Native SDK

​Installation

​Quick usage: React (Web)

​Quick usage: React Native (Mobile)

​Testing in Development

​Notes