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

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

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.