Portfolio Connect SDK

Drop-in widget for importing Indian investment statements (Mutual Funds, CDSL, NSDL).

Quick Start

Get your access token from docs.casparser.in

Installation

npm / yarn

npm install @cas-parser/connect
# or
yarn add @cas-parser/connect

CDN (Vanilla JS / Angular / Vue)

Option 1: Standalone Bundle (Recommended) - Includes React, no extra dependencies:

<script src="https://unpkg.com/@cas-parser/connect/dist/portfolio-connect.standalone.min.js"></script>

<script>
  // Simple imperative API - no React knowledge needed!
  document.getElementById('import-btn').onclick = async () => {
    try {
      const { data, metadata } = await PortfolioConnect.open({
        accessToken: 'your_access_token',
        config: { enableCdslFetch: true }
      });
      console.log('Portfolio:', data);
    } catch (error) {
      if (error.message === 'Widget closed by user') {
        console.log('User cancelled');
      } else {
        console.error('Error:', error);
      }
    }
  };
</script>

Option 2: Lightweight Bundle - If you already have React on your page:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@cas-parser/connect/dist/portfolio-connect.umd.min.js"></script>

<script>
  // Same imperative API works here too
  document.getElementById('import-btn').onclick = () => {
    PortfolioConnect.open({
      accessToken: 'your_access_token',
    }).then(({ data }) => console.log(data));
  };
</script>

Bundle Sizes:

• Standalone: ~54KB gzipped (includes React - no dependencies needed!)
• UMD: ~9KB gzipped (requires React 18+ on page)

Quick Start

React

import { PortfolioConnect } from '@cas-parser/connect';

function App() {
  return (
    <PortfolioConnect
      accessToken="your_access_token"
      onSuccess={(data) => console.log('Portfolio:', data)}
    >
      {({ open }) => (
        <button onClick={open}>Import Portfolio</button>
      )}
    </PortfolioConnect>
  );
}

Vanilla JS / Angular / Vue (Imperative API)

Use the simple open() function - returns a Promise:

<!-- Standalone build - no React needed! -->
<script src="https://unpkg.com/@cas-parser/connect/dist/portfolio-connect.standalone.min.js"></script>

<button id="import-btn">Import Portfolio</button>

<script>
  document.getElementById('import-btn').onclick = async () => {
    try {
      const { data, metadata } = await PortfolioConnect.open({
        accessToken: 'your_access_token',
        config: {
          title: 'Import Your Portfolio',
          enableCdslFetch: true,
        },
      });
      
      console.log('Portfolio data:', data);
      console.log('Metadata:', metadata);
      
    } catch (error) {
      if (error.message === 'Widget closed by user') {
        console.log('User cancelled');
      } else {
        console.error('Error:', error);
      }
    }
  };
</script>

Configuration

<PortfolioConnect
  accessToken="your_access_token"
  config={{
    // Branding
    logoUrl: 'https://yourapp.com/logo.png',
    title: 'Import Your Investments',
    subtitle: 'Mutual Funds, Stocks, Bonds — all in one place',
    
    // Features
    enableGenerator: true,   // MF statement via email (KFintech)
    enableCdslFetch: true,   // CDSL statement via OTP
    enableInbox: true,       // Gmail OAuth import
    
    // Restrict portfolio types
    allowedTypes: ['CAMS_KFINTECH', 'CDSL', 'NSDL'],
    
    // Pre-fill user details
    prefill: {
      pan: 'ABCDE1234F', // Optional, for CAMS_KFINTECH, CDSL
      email: '[email protected]', // Optional, for CAMS_KFINTECH, CDSL
      boId: '1234567890123456',  // Optional, CDSL BO ID
      dob: '1990-01-15',        // Optional, CDSL DOB
    },
    
    // Generator options
    generator: {
      fromDate: '2020-01-01',
      toDate: '2024-12-31',
      password: 'Abcdefghi12$', // PDF encryption password (default: 'Abcdefghi12$')
    },
    
    // Gmail inbox import
    inbox: {
      redirectUri: 'https://your-app.com/oauth/callback',
    },
    
    // UI options
    showShortcuts: true,    // Email search shortcuts
    showPortalLinks: true,  // Links to download portals
  }}
  onSuccess={handleSuccess}
  onError={handleError}
  onEvent={(event, metadata) => analytics.track(event, metadata)}
>
  {({ open, isReady }) => (
    <button onClick={open} disabled={!isReady}>
      Import Portfolio
    </button>
  )}
</PortfolioConnect>

Framework Support

| Framework | Support | Method | |-----------|---------|--------| | React | ✅ Native | npm package | | Next.js | ✅ Native | npm package | | Angular | ✅ Via CDN | UMD bundle | | Vue | ✅ Via CDN | UMD bundle | | Vanilla JS | ✅ Via CDN | UMD bundle | | React Native | ✅ WebView | See examples | | Flutter | ✅ WebView | See examples |

See EXAMPLES.md for framework-specific integration guides.

API Reference

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | accessToken | string | Yes | Your access token (get one) | | onSuccess | (data, metadata) => void | Yes | Success callback with parsed data | | onError | (error) => void | No | Error callback | | onExit | () => void | No | Widget closed callback | | onEvent | (event, metadata) => void | No | Analytics/tracking callback | | config | PortfolioConnectConfig | No | Configuration options |

Config Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | logoUrl | string | CASParser logo | Your brand logo URL | | title | string | "Import Your Investments" | Widget title | | subtitle | string | "Mutual Funds, Stocks..." | Widget subtitle | | enableGenerator | boolean | false | Enable MF fetch via email | | enableCdslFetch | boolean | false | Enable CDSL fetch via OTP | | enableInbox | boolean | false | Enable Gmail OAuth import | | allowedTypes | PortfolioType[] | All | Restrict to specific types | | prefill | object | - | Pre-fill user details (pan, email, phone, boId, dob) | | generator | object | - | Generator options (fromDate, toDate, password) | | inbox | object | - | Inbox config (redirectUri required when enableInbox) | | brokers | BrokerInfo[] | Default list | Custom broker list with name, depository, and logo |

Events

| Event | Description | |-------|-------------| | WIDGET_OPENED | Widget opened | | WIDGET_CLOSED | Widget closed | | MODE_SWITCHED | User switched between Upload/Fetch modes | | TYPE_CHANGED | User changed portfolio type (MF/CDSL/NSDL) | | BROKER_SELECTED | User selected a broker | | SEARCH_CLICKED | User clicked email search shortcut | | PORTAL_CLICKED | User clicked portal link | | FILE_SELECTED | User selected a file | | FILE_REMOVED | User removed selected file | | UPLOAD_STARTED | File upload began | | UPLOAD_PROGRESS | Upload progress update | | PARSE_STARTED | Parsing started | | PARSE_SUCCESS | Parsing completed | | PARSE_ERROR | Parsing failed | | GENERATOR_STARTED | MF email request started | | GENERATOR_SUCCESS | MF email request sent | | GENERATOR_ERROR | MF email request failed | | CDSL_FETCH_STARTED | CDSL fetch started | | CDSL_OTP_SENT | CDSL OTP sent | | CDSL_OTP_VERIFIED | CDSL OTP verified | | CDSL_FETCH_SUCCESS | CDSL files retrieved | | CDSL_FETCH_ERROR | CDSL fetch failed | | INBOX_CONNECT_STARTED | Gmail OAuth flow started | | INBOX_CONNECTED | Gmail connected successfully | | INBOX_FILES_LOADED | CAS files found in inbox | | INBOX_FILE_SELECTED | User selected an inbox file | | INBOX_DISCONNECTED | Gmail disconnected | | INBOX_ERROR | Inbox import failed |

Response Data

interface ParsedData {
  cas_type: 'CAMS_KFINTECH' | 'CDSL' | 'NSDL';
  status: 'success' | 'failed';
  investor_info?: {
    name: string;
    email?: string;
    pan?: string;
  };
  folios?: [...];    // MF folios
  holdings?: [...];  // Demat holdings
  summary?: {
    total_value: number;
    as_on_date: string;
  };
}

Documentation

For full documentation, API reference, and examples:

📖 docs.casparser.in

Support

• 📧 [email protected]
• 📖 docs.casparser.in
• 🐛 GitHub Issues

License

MIT © CASParser