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.
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 refreshEvent Handling : Comprehensive event system with typed callbacksError Management : Enhanced error handling with detailed error codesSecurity : 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
