For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign inBook a demo
Logo
Sign inBook a demo
On this page
  • React Library
  • Basic Usage
  • Using Components
  • What’s Included
  • Learn More
Home

React Library Overview

Was this page helpful?
Built with

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

1import '@mercoa/react/dist/style.css'
2import { MercoaSession } from '@mercoa/react'
3export 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

1import '@mercoa/react/dist/style.css'
2import { MercoaSession, PayableDetails } from '@mercoa/react'
3export 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.