Frontend SDK

Installation

npm install @thredfi/accounting

Quick Start

Add container element

Add a div where the widget will mount:

<div id="thredfi-widget"></div>

Import and mount

import { mountThredfi } from '@thredfi/accounting';

mountThredfi({
  thredfiSelector: '#thredfi-widget',
  businessId: 'your-business-uuid',
  getToken: async () => {
    const res = await fetch('/api/thredfi-token');
    const data = await res.json();
    return {
      access_token: data.access_token,
      expires_in: data.expires_in
    };
  },
  environment: 'production',
  lang: 'en'
});

Implement token endpoint

Create a backend endpoint that returns business-scoped tokens:

@app.route('/api/thredfi-token')
def get_thredfi_token():
    # Get business_id for current user
    business_id = current_user.thred_business_id

    # Get business-scoped token from Thred
    response = requests.post(
        f"https://api.thredfi.com/v1/platform/{business_id}/oauth2/token/",
        headers={"Authorization": f"Bearer {partner_token}"}
    )

    return response.json()

Security: Never hardcode tokens in frontend codeThe getToken function must call your backend to fetch fresh tokens. This keeps your partner credentials secure and allows proper token rotation.

CDN Usage (No Bundler)

For vanilla JavaScript or server-rendered apps:

<!DOCTYPE html>
<html>
<body>
  <div id="thredfi-widget"></div>

  <script src="https://unpkg.com/@thredfi/accounting@latest/dist/index.umd.js"></script>
  <script>
    ThredfiAccounting.mountThredfi({
      thredfiSelector: '#thredfi-widget',
      businessId: 'your-business-uuid',
      getToken: async () => {
        const res = await fetch('/api/thredfi-token');
        return await res.json();
      },
      environment: 'production'
    });
  </script>
</body>
</html>

Configuration Reference

Required Options

Option	Type	Description
`thredfiSelector`	string	CSS selector for container element (e.g., `'#thredfi-widget'`)
`getToken`	function	Async function returning `{access_token, expires_in}`
`businessId`	string	Business UUID from Thred
`environment`	string	`'development'` or `'production'`. There is no default

Optional Options

Option	Type	Default	Description
`lang`	string	`'en'`	Language code (see supported languages)
`basePath`	string	`''`	Base path for routing (e.g., `'/accounting'`)
`theme`	object	-	Color overrides for branding
`hideMenu`	boolean	`false`	Hide header navigation

Theme Customization

Match your platform’s visual identity:

mountThredfi({
  // ... other options
  theme: {
    navigationBackgroundColor: '#f9f9f9',  // Header background
    cardsBackgroundColor: '#ffffff',       // Card/panel background
    textColor: '#111827',                  // Primary text
    textSecondaryColor: '#6b7280',         // Secondary/muted text
    activeColor: '#871f91',                // Active state/links/profit
    borderColor: '#dcdcdc',                // Primary borders
    borderSecondaryColor: '#e5e7eb'        // Light borders
  }
});

Multi-Language Support

Code	Language
`en`	English (US)
`en-GB`	English (UK)
`de`	German
`es`	Spanish
`fr`	French
`it`	Italian
`nl`	Dutch
`nb`	Norwegian

Change language dynamically:

import { setThredfiLanguage } from '@thredfi/accounting';

setThredfiLanguage('de'); // Switch to German

Advanced Configuration

Custom Routing

If your app uses routing (e.g., /dashboard/accounting), set basePath:

mountThredfi({
  // ... other options
  basePath: '/accounting',
  // Widget routes will be: /accounting/invoices, /accounting/reports, etc.
});

Hide the widget’s header when you want to provide your own navigation:

mountThredfi({
  // ... other options
  hideMenu: true
});

Combine with menu configuration API to control which tabs appear.

Deep Linking

Navigate directly to specific tabs:

// User lands on /accounting/reports
mountThredfi({
  basePath: '/accounting',
  // ... other options
});

// Widget detects route and shows Reports tab

Environment Configuration

Environment	Backend URL	Use For
`development`	https://dev-backend.thredfi.com	Development (integration testing)
`production`	https://backend.thredfi.com	Live production deployments

environment is required and takes 'development' or 'production' (@thredfi/accounting 0.14.0 and later). Fetch business tokens from the matching environment: development tokens with 'development', production tokens with 'production'.

Development is continuously deployed and uses provider test modes (Plaid sandbox, Stripe test). Data may be reset; never send real customer data.

Security Checklist

Backend token generation

✅ Do: Fetch tokens from your backend endpoint❌ Don’t: Generate tokens in frontend code or hardcode credentials

Token scope

✅ Do: Use business-scoped tokens in frontend❌ Don’t: Expose partner-scoped tokens (grants access to all businesses)

HTTPS only

✅ Do: Serve your app over HTTPS in production❌ Don’t: Use HTTP (tokens will be exposed)

Content Security Policy

If using CSP, allow:

script-src for widget JavaScript
connect-src for the hosts the widget calls: the Thred backend (https://backend.thredfi.com in production, https://dev-backend.thredfi.com in development) and Ask Thred (https://ask-thred.thredfi.com in production, https://ask-thred-dev.thredfi.com in development)
frame-src if widget uses iframes internally

Resources

Widget embedded. Time to verify your integration works end-to-end.

Let's Get Started

AI Access (MCP)

Importing Business Activity

Embedded Accounting

Technical Guides

Installation

Quick Start

CDN Usage (No Bundler)

Configuration Reference

Required Options

Optional Options

Theme Customization

Multi-Language Support

Advanced Configuration

Custom Routing

Hide Navigation Menu

Deep Linking

Environment Configuration

Security Checklist

Resources

​Installation

​Quick Start

​CDN Usage (No Bundler)

​Configuration Reference

​Required Options

​Optional Options

​Theme Customization

​Multi-Language Support

​Advanced Configuration

​Custom Routing

​Hide Navigation Menu

​Deep Linking

​Environment Configuration

​Security Checklist

​Resources

Installation

Quick Start

CDN Usage (No Bundler)

Configuration Reference

Required Options

Optional Options

Theme Customization

Multi-Language Support

Advanced Configuration

Custom Routing

Hide Navigation Menu

Deep Linking

Environment Configuration

Security Checklist

Resources