> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll.md).

# Payroll

The Multiplier Partner SDK provides ready-to-embed payroll components that give your users visibility into their payroll cycles — without requiring you to build any payroll UI from scratch.

## Available Components

| Component                                                                                                                                                      | Status         | Description                                        |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------- |
| [`EorPayroll.List`](https://developer.usemultiplier.com/multiplier-embed-sdks/components/pages/a1288d27104bae1e3d5be1a288724fa678fb5962#eorpayroll.list)       | ✅ Available    | Paginated list of EOR payroll cycles               |
| [`EorPayroll.Details`](https://developer.usemultiplier.com/multiplier-embed-sdks/components/pages/a1288d27104bae1e3d5be1a288724fa678fb5962#eorpayroll.details) | ✅ Available    | Full detail view for a single EOR payroll cycle    |
| [`GpPayroll.List`](https://developer.usemultiplier.com/multiplier-embed-sdks/components/pages/e8f7d7ccadfde9a1052a7b05490b62051d8456bb#gppayroll.list)         | ✅ Available    | Paginated list of Global Payroll cycles            |
| `GpPayroll.Details`                                                                                                                                            | 🔜 Coming soon | Full detail view for a single Global Payroll cycle |

## Which Component Do I Need?

**Use `EorPayroll`** if your customers manage employees hired through Multiplier's Employer of Record (EOR) service. This covers payroll cycles for EOR-contracted employees.

**Use `GpPayroll`** if your customers run their own payroll and use Multiplier's Global Payroll service to manage pay runs across multiple countries.

Both component families can be used independently or together in the same application.

## How Navigation Works

Neither component requires a router. All navigation is callback-driven:

* `onRowClick` on a list component gives you the selected `cycleId`
* `onBack` on a details component lets you return to the list

You decide how to respond to these callbacks — store state, push a route, open a modal — the SDK doesn't care.

```tsx
import { useState } from 'react';
import { EorPayroll, GpPayroll } from '@Multiplier-Core/partner-sdk-react';

// EOR: state-driven list → details flow
function EorSection() {
  const [cycleId, setCycleId] = useState<string | null>(null);

  return cycleId ? (
    <EorPayroll.Details cycleId={cycleId} onBack={() => setCycleId(null)} />
  ) : (
    <EorPayroll.List onRowClick={setCycleId} />
  );
}

// GP: list only (details coming in Phase 2)
function GpSection() {
  return (
    <GpPayroll.List
      onRowClick={(cycleId, companyId) => {
        // store both — companyId will be needed for GpPayroll.Details
      }}
    />
  );
}
```

## Setup Requirement

All payroll components must be rendered inside a `MultiplierGlobalConfigProvider`. If you haven't set that up yet, start with [Installation & Configuration](broken://pages/bf90e59a58a708cf85878c52bdeaf2085c897cc0).

```tsx
import {
  MultiplierGlobalConfigProvider,
  createGlobalConfig,
  EorPayroll,
} from '@Multiplier-Core/partner-sdk-react';
import '@Multiplier-Core/partner-sdk-react/dist/index.css';

const config = createGlobalConfig()
  .setAccessToken(accessToken)
  .setRefreshToken(refreshToken)
  .setOnTokenRefreshed((newToken) => saveToken(newToken))
  .build();

function App() {
  return (
    <MultiplierGlobalConfigProvider config={config}>
      <EorPayroll.List />
    </MultiplierGlobalConfigProvider>
  );
}
```

## Next Steps

* [EOR Payroll →](/multiplier-embed-sdks/components/payroll/eor-payroll.md)
* [Global Payroll →](/multiplier-embed-sdks/components/payroll/gp-payroll.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.