PFM Stack provides an Embedded Angular SDK that allows you to integrate a Personal Finance Management experience into your 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 Initialize Transaction API guide to integrate with the API in your backend server.

STEP 2: Adding Angular SDK as dependency

Add the following dependency to your package.json. Run npm install or other to install the dependency. If you are using any other dependency management library, refer to that library documentation to add below npm package as dependency.

equal-anular-pfm-sdk: ^1.0.0

Step 3: Launch PFM SDK

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 AppComponent (Or any of your Angular Component) use the below snipet to launch Equal SDK.

import { Component, OnInit } from '@angular/core';
declare var PFMSDK: any;

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class MyComponent implements OnInit {
  private pfmInstance: any;
  
 	token: string | null = null;
  constructor() {}
  ngOnInit() {}

  fetchToken() {
    fetch('https://<your_backend_api_that_calls_initialize_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 => {
      this.token = data.token;
      this.pfmInstance = new PFMSDK(this.token, env);
    })
    .catch(error => console.error('Error fetching token:', error));
  }

  openPFM() {
    if (this.pfmInstance) {
      this.pfmInstance.openPFM(
        (error: any) => console.error('PFM SDK Error:', error),
        () => console.log('PFM SDK Closed')
      );
    } else {
      console.error('PFM SDK is not initialized!');
    }
  }
}

Important Code for integration

// `TO Initialize the SDK and get instance of it` 

pfmInstance = new PFMSDK(this.token, env);


// Launch SDK and handle onClose & onError callbacks.

pfmInstance.openPFM(
  (error: any) => console.error('PFM SDK Error:', error), - onError(error: any) - Invoked when any error occurs.
  (reason: string) => console.log('PFM SDK Closed') - onClose() - Invokes when SDK is closed by user.
);

SDK Parameters

SDK Callback Methods

The launchSDK method of PFMSDK accepts the following callbacks 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.