> 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.

# Payables component

## Overview

The `Payables` component is a comprehensive React component that renders the entire Payables page. The component integrates the functionalities of the `PayablesDetails` and `PayablesTable` components, providing a complete experience throughout the Payables workflow. This component provides the ability to create new payables via uploads and supports searching, filtering, and pagination between these payables.

## Permissions

To access this component, the entity user must have `read` permissions for the `payable` object. To create, edit, and delete payables, they must also have `create`, `update`, or `delete` permissions for the `payable` object. For more information, see [List of permissions](/api/concepts/authentication#permissions).

## Preview

![Payables component preview](/_fern-img/a3f8e852bf3944459dcf5ca0f6bbd3a6e9fc07523b15bb0b553ff35bff1ffef5.webp)

## Usage

Bring in the `Payables` component into your application as shown:

**`React.js`**

```jsx React.js
import { Payables } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
const PayablesPage = () => {
  return <Payables />;
};
```

## Props

| Prop            | Type       | Description                                                                                  |
| :-------------- | :--------- | :------------------------------------------------------------------------------------------- |
| `enableGLCodes` | `boolean`  | Enables GL code field in payable creation and editing. Defaults to `false` if not specified. |
| `onSaved`       | `function` | This callback is triggered when the payable is saved.                                        |
| `onCanceled`    | `function` | This callback is triggered when the payable is canceled.                                     |
| `onSubmitted`   | `function` | This callback is triggered when the payable is submitted.                                    |
| `onRejected`    | `function` | This callback is triggered when the payable is rejected.                                     |
| `onApproved`    | `function` | This callback is triggered when the payable is approved.                                     |
| `onPay`         | `function` | This callback is triggered when the user presses the Pay button.                             |

## Customize mandatory fields

You can set the fields `counterpart_id`, `counterpart_bank_account_id`, `issued_at`, and `currency` as mandatory, in addition to the [required fields](../../../accounts-payable/payables/index#required-fields), for the payable creation. To do this, call [`PUT /payables/validations`](/api/payables/put-payables-validations):

```sh
curl -X PUT 'https://api.sandbox.monite.com/v1/payables/validations' \
     -H 'X-Monite-Version: 2024-05-25' \
     -H 'Authorization: Bearer ACCESS_TOKEN' 
     -d '{
      "required_fields": [
        "currency",
        "issued_at"
      ]
    }'
```

The component will mark the mandatory fields with a red asterix and validate them.