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

# React Library Overview

> Build beautiful payment UIs with Mercoa's React component library

# React Library

Build beautiful, accessible payment UIs with Mercoa's React component library. Our components are designed to work seamlessly with your existing React applications and provide a consistent, professional experience for your users.

## Basic Usage

```javascript
import '@mercoa/react/dist/style.css'
import { MercoaSession } from '@mercoa/react'
export default function Index() {
  const token = 'YOUR_ENTITY_TOKEN' // See https://docs.mercoa.com/api-reference/entity/user/get-token
  return <MercoaSession token={token} /> // The Mercoa Session Context without any children will render the full entity portal
}
```

## Using Components

```javascript
import '@mercoa/react/dist/style.css'
import { MercoaSession, PayableDetails } from '@mercoa/react'
export default function Index() {
  const token = 'YOUR_ENTITY_TOKEN' // See https://docs.mercoa.com/api-reference/entity/user/get-token
  return (
    <MercoaSession token={token}>
      <PayableDetails invoiceId="inv_75120d92-58a2-4d05-8b3f-b8e6c01f879f" />
    </MercoaSession>
  )
}
```

## What's Included

* **Session Management**: Secure token handling and session state
* **Payment Components**: Buttons, forms, and payment method selectors
* **Invoice Components**: Display and management of invoices
* **Form Components**: Accessible form inputs and validation
* **Utility Components**: Loading states, error handling, and more

## Learn More

For complete component documentation, examples, and advanced usage, visit **[react.mercoa.com](https://react.mercoa.com)**.

> Build beautiful payment UIs with Mercoa's React component library