JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 139
  • Score
    100M100P100Q87241F
  • License MIT

Portfolio Connect - Lightweight widget for importing Indian investment statements (MF, CDSL, NSDL). Works with React, Angular, Vue, and vanilla JS.

Package Exports

  • @cas-parser/connect
  • @cas-parser/connect/package.json

Readme

Portfolio Connect SDK

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

npm version License: MIT

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!)
  • UMD: ~9KB gzipped (requires React 17+ 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
    
    // Restrict portfolio types
    allowedTypes: ['CAMS_KFINTECH', 'CDSL', 'NSDL'],
    
    // Pre-fill user details
    prefill: {
      pan: 'ABCDE1234F', // Optional, for CAMS_KFINTECH, CDSL
      email: 'user@example.com', // 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',
    },
    
    // 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
allowedTypes PortfolioType[] All Restrict to specific types
prefill object - Pre-fill user details

Events

Event Description
WIDGET_OPENED Widget opened
WIDGET_CLOSED Widget closed
FILE_SELECTED User selected a file
PARSE_STARTED Parsing started
PARSE_SUCCESS Parsing completed
PARSE_ERROR Parsing failed
GENERATOR_STARTED MF email request started
GENERATOR_SUCCESS MF email request sent
CDSL_FETCH_STARTED CDSL fetch started
CDSL_OTP_SENT CDSL OTP sent
CDSL_FETCH_SUCCESS CDSL files retrieved

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

License

MIT © CASParser