Developer Guide

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

<script src="https://cdn.jsdelivr.net/npm/@cas-parser/connect/dist/portfolio-connect.standalone.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@cas-parser/connect/dist/portfolio-connect.umd.min.js"></script>

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

function App() {
  return (
    <PortfolioConnect
      accessToken="your_access_token"
      config={{
        enableGenerator: true,  // MF email fetch
        enableCdslFetch: true,  // CDSL OTP fetch
      }}
      onSuccess={(data, metadata) => {
        console.log('Holdings:', data.holdings);
        console.log('Total Value:', data.summary?.total_value);
        console.log('Parser Type:', metadata.parser_type);
      }}
      onError={(error) => {
        console.error('Import failed:', error.message);
      }}
    >
      {({ open, isReady }) => (
        <button onClick={open} disabled={!isReady}>
          Import Investments
        </button>
      )}
    </PortfolioConnect>
  );
}

<script src="https://cdn.jsdelivr.net/npm/@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: { enableCdslFetch: true }
      });
      
      console.log('Holdings:', data.holdings);
      console.log('Type:', metadata.parser_type);
      
    } catch (error) {
      if (error.message === 'Widget closed by user') {
        console.log('User cancelled');
      } else {
        console.error('Error:', error.message);
      }
    }
  };
</script>

<template>
  <button @click="openPortfolioConnect">Import Portfolio</button>
</template>

<script setup>
const openPortfolioConnect = async () => {
  try {
    const { data } = await PortfolioConnect.open({
      accessToken: 'your_access_token',
      config: { enableCdslFetch: true }
    });
    console.log('Portfolio:', data);
  } catch (error) {
    console.error(error);
  }
};
</script>

// component.ts
import { Component } from '@angular/core';
declare const PortfolioConnect: any;

@Component({
  selector: 'app-import',
  template: `<button (click)="openWidget()">Import Portfolio</button>`
})
export class ImportComponent {
  async openWidget() {
    try {
      const { data } = await PortfolioConnect.open({
        accessToken: 'your_access_token',
        config: { enableCdslFetch: true }
      });
      console.log('Portfolio:', data);
    } catch (error) {
      console.error(error);
    }
  }
}

<PortfolioConnect
  accessToken="your_access_token"
  config={{
    // Statement types to allow
    allowedTypes: ['CAMS_KFINTECH', 'CDSL', 'NSDL'],
    
    // Features
    enableGenerator: true,      // MF statement via email (KFintech)
    enableCdslFetch: true,      // CDSL statement via OTP
    
    // UI Options
    showShortcuts: true,        // Email search shortcuts (Gmail, Outlook)
    showPortalLinks: true,      // Links to CAS download portals
    
    // Branding
    logoUrl: 'https://yourapp.com/logo.png',
    title: 'Import Your Investments',
    subtitle: 'Mutual Funds, Stocks, Bonds — all in one place',
    
    // Pre-fill user data (optional)
    prefill: {
      pan: 'ABCDE1234F',
      email: 'user@example.com',
      phone: '9876543210',
      boId: '1234567890123456',  // CDSL BO ID (16 digits)
      dob: '1990-01-15',         // Date of birth (YYYY-MM-DD)
    },
    
    // MF Generator options
    generator: {
      fromDate: '2020-01-01',    // Statement start date
      toDate: '2024-12-31',      // Statement end date
    },
    
    // Custom broker list (optional)
    brokers: [
      { name: 'Zerodha', depository: 'CDSL', logo: 'https://...' },
      { name: 'Groww', depository: 'CDSL', logo: 'https://...' },
    ],
  }}
  onSuccess={handleSuccess}
  onError={handleError}
  onEvent={handleEvent}
  onExit={handleExit}
>
  {({ open }) => <button onClick={open}>Import</button>}
</PortfolioConnect>

onSuccess={(data, metadata) => {
  // data: ParsedData
  // metadata: { filename, parser_type, parse_duration_ms }
}}

interface ParsedData {
  cas_type: 'CAMS_KFINTECH' | 'CDSL' | 'NSDL';
  status: 'success' | 'failed';
  
  investor_info?: {
    name: string;
    email?: string;
    mobile?: string;
    pan?: string;
    address?: string;
  };
  
  // For Mutual Funds (CAMS_KFINTECH)
  folios?: Array<{
    folio_number: string;
    amc: string;
    schemes: Array<{
      scheme_name: string;
      isin: string;
      units: number;
      nav: number;
      value: number;
    }>;
  }>;
  
  // For Demat (CDSL/NSDL)
  holdings?: Array<{
    isin: string;
    name: string;
    quantity: number;
    value: number;
  }>;
  
  summary?: {
    total_value: number;
    as_on_date: string;
  };
}

onEvent={(event, metadata) => {
  analytics.track(event, metadata);
}}

interface PortfolioConnectError {
  code: string;
  message: string;
  details?: any;
}

onError={(error) => {
  switch (error.code) {
    case 'INVALID_PASSWORD':
      showToast('Incorrect password. Try your PAN.');
      break;
    case 'OTP_EXPIRED':
      showToast('OTP expired. Please try again.');
      break;
    default:
      showToast(error.message);
  }
}}

<!-- host this page and load in WebView -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@cas-parser/connect/dist/portfolio-connect.standalone.min.js"></script>
</head>
<body>
  <script>
    // Listen for messages from native app
    window.addEventListener('message', async (e) => {
      if (e.data.action === 'open') {
        try {
          const result = await PortfolioConnect.open({
            accessToken: e.data.accessToken,
            config: e.data.config
          });
          // Send result back to native app
          window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'success', data: result }));
        } catch (error) {
          window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'error', error }));
        }
      }
    });
  </script>
</body>
</html>

// Your backend
const token = await casparserAPI.createAccessToken({
  expiresIn: '60m'
});

// Send to frontend
res.json({ accessToken: token });