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

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

Using Components

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

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.