> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tesouro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bill pay

> Embed the bill pay component to let users manage and pay bills directly within your application.

The bill pay component lets users manage payables and initiate payments without leaving your platform.

## React

```tsx lines theme={null}
import { EmbeddedProvider, BillPayWidget } from '@tesouro/embedded-components-react';

export default function BillPayPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <BillPayWidget />
    </EmbeddedProvider>
  );
}
```

## Web components

```html lines theme={null}
<embedded-bill-pay-widget
  data-user-id="YOUR_USER_ID"
  data-widget-token-refresh-url="/api/widget-token"
></embedded-bill-pay-widget>
```

## Next steps

* Set up the [`EmbeddedProvider`](/finops/guides/embedded-components) with authentication and theming
* Explore [Accounts payable](/finops/guides/accounts-payable/index) in the FinOps guides for payables and approval workflows