Skip to main content

​
Installation

npm install @thredfi/accounting

​
Quick Start

1

Add container element

Add a div where the widget will mount:
<div id="thredfi-widget"></div>
2

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'
});
3

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

OptionTypeDescription
thredfiSelectorstringCSS selector for container element (e.g., '#thredfi-widget')
getTokenfunctionAsync function returning {access_token, expires_in}
businessIdstringBusiness UUID from Thred

​
Optional Options

OptionTypeDefaultDescription
environmentstring'sandbox''sandbox' or 'production'
langstring'en'Language code (see supported languages)
basePathstring''Base path for routing (e.g., '/accounting')
themeobject-Color overrides for branding
hideMenubooleanfalseHide 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

CodeLanguage
enEnglish (US)
en-GBEnglish (UK)
deGerman
esSpanish
frFrench
itItalian
nlDutch
nbNorwegian
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 Navigation Menu

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

EnvironmentBackend URLUse For
sandboxhttps://api-sandbox.thredfi.comDevelopment and testing
productionhttps://api.thredfi.comLive production deployments

​
Security Checklist

✅ Do: Fetch tokens from your backend endpoint❌ Don’t: Generate tokens in frontend code or hardcode credentials
✅ Do: Use business-scoped tokens in frontend❌ Don’t: Expose partner-scoped tokens (grants access to all businesses)
✅ Do: Serve your app over HTTPS in production❌ Don’t: Use HTTP (tokens will be exposed)
If using CSP, allow:
  • script-src for widget JavaScript
  • connect-src for API calls to https://api.thredfi.com or https://api-sandbox.thredfi.com
  • frame-src if widget uses iframes internally

​
Resources

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