Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developer.moneyone.in/llms.txt

Use this file to discover all available pages before exploring further.

PFM Stack provides an Embedded React Native SDK that allows you to integrate a Personal Finance Management experience into your mobile application with minimal effort. With just a few lines of code, you can enable users to aggregate all their financial data in one place using the Account Aggregator framework.

​
Step-by-Step Integration

​
STEP 1: Initialization of SDK API

When a consumer wants to open PFM, your backend service must trigger the initialization of SDK API. Follow the SDK Init API guide to integrate with the API in your backend server.

​
STEP 2: Adding React Native SDK as dependency

Add the following dependency to your package.json. Run npm install to install the dependency. 
equal-react-native-pfm-sdk: ^1.0.3
Install the peer dependency react-native-webview if not already in your project: 
npm install react-native-webview
For iOS, install CocoaPods: 
cd ios && pod install && cd ..

​
Step 3: Launch PFM SDK

Once the Initialize API is invoked and you have session_token, the PFM SDK can be opened from client using the below procedure. In your Component (Or any of your React Native Component) use the below snippet to launch Equal SDK. 
import React, { useState } from 'react';
import { Alert, Button, SafeAreaView, View } from 'react-native';
import { PFMWebView } from 'equal-react-native-pfm-sdk';
import type { EventResponse } from 'equal-react-native-pfm-sdk';

export default function App() {
  const [showPFM, setShowPFM] = useState(false);
  const [token, setToken] = useState<string | null>(null);

  const fetchTokenAndLaunch = async () => {
    fetch('https://<your_backend_api_that_calls_sdk_init_api_and_returns_token>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify('<API Body as per your API contracts>')
    })
    .then(response => response.json())
    .then(data => {
      setToken(data.session_token);
      setShowPFM(true);
    })
    .catch(error => console.error('Error fetching token:', error));
  };

  const handleClosed = (data: EventResponse) => {
    console.log('PFM Closed:', data);
    setShowPFM(false);
  };

  const handleError = (data: EventResponse) => {
    console.error('PFM Error:', data);
    setShowPFM(false);
  };

  if (showPFM && token) {
    return (
      <PFMWebView
        token={token}
        env="sandbox"
        onClosed={handleClosed}
        onError={handleError}
      />
    );
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
        <Button title="Launch PFM" onPress={fetchTokenAndLaunch} />
      </View>
    </SafeAreaView>
  );
}

​
Important Code for integration

// Import the SDK
import { PFMWebView } from 'equal-react-native-pfm-sdk';
import type { EventResponse } from 'equal-react-native-pfm-sdk';

// Launch SDK with token and handle onClose & onError callbacks.
<PFMWebView
  token={token}           // session_token from SDK Init API
  env="sandbox"           // "sandbox" | "production"
  onClosed={(data) => {}} // onClosed(data: EventResponse) - Invoked when SDK is closed by user.
  onError={(data) => {}}  // onError(data: EventResponse) - Invoked when any error occurs.
/>

​
SDK Parameters

ParameterMandatory/OptionalDescription
tokenMandatoryGenerated and shared in response from Step 1 - Response of SDK Init API
envoptionalsandbox is Default. Pass “production” to point to production - Ensure this variable is environment specific.

​
SDK Callback Methods

The PFMWebView component accepts the following callback methods: onError: this is Invoked by SDK when
  • There are failures in opening the UI
  • Session Timeout.
onClosed: Invoked when the SDK is closed by the user.