> This page is for version v2024-05-25 (default).
> For other versions, use one of these documentation indexes:
> - v2024-05-25 (default): https://docs.monite.com/v-2024-05-25/llms.txt
> - v2024-01-31: https://docs.monite.com/v2024-01-31/llms.txt
> - v2023-09-01: https://docs.monite.com/v2023-09-01/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# SDK customization

## Overview

The Monite components use the default settings by default. However, there are scenarios where you can to customize this settings to match the needs of your business.

Below, see a component settings object, with its parameters and default values. This object must be inserted into the `<MoniteProvider>` component:

```jsx
const componentSettings = {
  general: {},
  approvalPolicies: {
    pageSizeOptions: [20, 50, 100]
  },
  approvalRequests: {
    pageSizeOptions: [20, 50, 100]
  },
  counterparts: {
    pageSizeOptions: [20, 50, 100],
    customerTypes: ["customer", "vendor"]
  },
  payables: {
    pageSizeOptions: [20, 50, 100],
    isShowingSummaryCards: true,
    fieldOrder: ["document_id", "counterpart_id", "created_at", "due_date", "status", "amount", "amount_paid", "pay"],
    summaryCardFilters: {
      "Overdue Invoices": {
        status__in: ["waiting_to_be_paid"],
        overdue: true
      },
      "High-Value Invoices": {
        amount__gte: 10000
      }
    },
    requiredColumns: ["document_id"],
    optionalFields: {
      invoiceDate: true,
      tags: true
    },
    ocrRequiredFields: {
      currency: true,
      invoiceDate: true,
      counterpart: true,
      invoiceNumber: true,
      counterpartBankAccount: true,
      document_issued_at_date: true,
      dueDate: true,
      tags: true,
      counterpartName: true,
      contactPerson: true,
      issueDate: true,
      amount: true,
      appliedPolicy: true,
      addedByUser: true,
      addedOn: true,
      updatedOn: true
    },
    ocrMismatchFields: {
      amount_to_pay: true,
      counterpart_bank_account_id: true
    },
    isTagsDisabled: false
  },
  products: {
    pageSizeOptions: [20, 50, 100]
  },
  receivables: {
    pageSizeOptions: [20, 50, 100],
    tab: 0,
    tabs: [
      {
        label: "Invoices",
        query: { type: "invoice" },
        filters: ["document_id__contains", "counterpart_id", "due_date__lte"]
      },
      {
        label: "Quotes",
        query: { type: "quote" }
      },
      {
        label: "Credit notes",
        query: { type: "credit_note" }
      },
      {
        label: "Financing",
        query: { type: "financing" }
      }
    ],
    onCreate: (receivableId) => {},
    onUpdate: (receivableId, invoice) => {},
    onDelete: (receivableId) => {},
    onInvoiceSent: (invoiceId) => {},
    enableEntityBankAccount: false,
    bankAccountCountries: ["US", "DE", "GB"],
    bankAccountCurrencies: ["USD", "EUR", "GBP"]
  },
  tags: {
    pageSizeOptions: [20, 50, 100]
  },
  userRoles: {
    pageSizeOptions: [20, 50, 100]
  },
  onboarding: {
    footerLogoUrl: "https://example.com/logo.png",
    footerWebsiteUrl: "https://example.com",
    hideFooter: false,
    showContinueButton: false,
    allowedCurrencies: ["USD", "EUR", "GBP"],
    allowedCountries: ["US", "DE", "GB"],
    onComplete: () => {},
    onContinue: () => {},
    onWorkingCapitalOnboardingComplete: (entityId) => {}
  },
  financing: {
    enableFinanceWidgetButton: true
  }
};
```

## Components settings

This table lists all configurable SDK components with their properties, descriptions, and default values. Use it as a reference to customize the SDK for your needs.

### general

| Property                | Description                  | Default |
| ----------------------- | ---------------------------- | ------- |
| *No properties defined* | *Empty configuration object* | `{}`    |

### approvalPolicies

| Property        | Description                    | Default         |
| --------------- | ------------------------------ | --------------- |
| pageSizeOptions | Table results per page options | `[20, 50, 100]` |

### approvalRequests

| Property        | Description                    | Default         |
| --------------- | ------------------------------ | --------------- |
| pageSizeOptions | Table results per page options | `[20, 50, 100]` |

### counterparts

| Property        | Description                                   | Default                  |
| --------------- | --------------------------------------------- | ------------------------ |
| pageSizeOptions | Table results per page options                | `[20, 50, 100]`          |
| customerTypes   | Customer types supported in counterpart forms | `["customer", "vendor"]` |

### payables

| Property              | Description                                            | Default                                                                                                 |
| --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| enableGLCodes         | Enables GL code field in payable creation and editing. | `false`                                                                                                 |
| fieldOrder            | Table columns order                                    | `["amount", "amount_paid", "counterpart_id", "created_at", "document_id", "due_date", "pay", "status"]` |
| isShowingSummaryCards | Show/hide summary cards on table view                  | `true`                                                                                                  |
| isTagsDisabled        | Enable/disable tags functionality                      | `false`                                                                                                 |
| ocrMismatchFields     | Fields to check for OCR mismatches                     | `{ amount_to_pay: true, counterpart_bank_account_id: true }`                                            |
| ocrRequiredFields     | Required fields for OCR processing                     | Object with multiple fields set to true (currency, invoiceDate, counterpart, etc.)                      |
| optionalFields        | Optional fields configuration                          | `{ invoiceDate: true, tags: true }`                                                                     |
| pageSizeOptions       | Table results per page options                         | `[20, 50, 100]`                                                                                         |
| requiredColumns       | Required columns in the table                          | `["document_id"]`                                                                                       |
| summaryCardFilters    | Predefined filters for summary cards                   | Object with `"Overdue Invoices"` and `"High-Value Invoices"` filters                                    |

### products

| Property        | Description                    | Default         |
| --------------- | ------------------------------ | --------------- |
| pageSizeOptions | Table results per page options | `[20, 50, 100]` |

### receivables

| Property                | Description                                                                                                              | Default                                                       |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- |
| pageSizeOptions         | Table results per page options                                                                                           | `[20, 50, 100]`                                               |
| tab                     | Index of default open tab                                                                                                | `0`                                                           |
| tabs                    | Tabs displayed in the invoicing table. Note: the Financing tab might not show if the entity is in an unsupported country | Array with Invoices, Quotes, Credit notes, and Financing tabs |
| onCreate                | Callback function when receivable is created                                                                             | `(receivableId) => {}`                                        |
| onUpdate                | Callback function when receivable is updated                                                                             | `(receivableId, invoice) => {}`                               |
| onDelete                | Callback function when receivable is deleted                                                                             | `(receivableId) => {}`                                        |
| onInvoiceSent           | Callback function when invoice is sent                                                                                   | `(invoiceId) => {}`                                           |
| enableEntityBankAccount | Enable entity bank account feature                                                                                       | `false`                                                       |
| bankAccountCountries    | Supported countries for bank accounts                                                                                    | `["US", "DE", "GB"]`                                          |
| bankAccountCurrencies   | Supported currencies for bank accounts                                                                                   | `["USD", "EUR", "GBP"]`                                       |

### tags

| Property        | Description                    | Default         |
| --------------- | ------------------------------ | --------------- |
| pageSizeOptions | Table results per page options | `[20, 50, 100]` |

### userRoles

| Property        | Description                    | Default         |
| --------------- | ------------------------------ | --------------- |
| pageSizeOptions | Table results per page options | `[20, 50, 100]` |

### onboarding

| Property                           | Description                                        | Default                          |
| ---------------------------------- | -------------------------------------------------- | -------------------------------- |
| footerLogoUrl                      | URL for footer logo                                | `"https://example.com/logo.png"` |
| footerWebsiteUrl                   | URL for footer website link                        | `"https://example.com"`          |
| hideFooter                         | Show/hide footer                                   | `false`                          |
| showContinueButton                 | Show/hide continue button                          | `false`                          |
| allowedCurrencies                  | Currencies allowed during onboarding               | `["USD", "EUR", "GBP"]`          |
| allowedCountries                   | Countries allowed during onboarding                | `["US", "DE", "GB"]`             |
| onComplete                         | Callback function when onboarding completes        | `() => {}`                       |
| onContinue                         | Callback function when continue is clicked         | `() => {}`                       |
| onWorkingCapitalOnboardingComplete | Callback when working capital onboarding completes | `(entityId) => {}`               |

### financing

| Property                  | Description                          | Default |
| ------------------------- | ------------------------------------ | ------- |
| enableFinanceWidgetButton | Enable/disable finance widget button | `true`  |