Guides

React Component

Mercoa React Component Library

Setup

npm install --save @mercoa/react

yarn add @mercoa/react

Usage

The Mercoa React component library ships with a CSS stylesheet (based on tailwindcss) that needs to be imported.

The Mercoa React component library uses a React Context called MercoaSession. You can wrap your full app with this context, or only include it on specific routes and pages. All Mercoa components need to be inside a valid MercoaSession component.

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
}

Invoice Details

import '@mercoa/react/dist/style.css'
import { MercoaSession, InvoiceDetails } from '@mercoa/react'
export default function Index() {
const token = 'YOUR_ENTITY_TOKEN' // See https://docs.mercoa.com/api-reference/entity/user/get-token
const invoiceId = 'inv_XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' // Invoice you want to render
return (
<MercoaSession token={token}>
<InvoiceDetails invoiceId={invoiceId} />
</MercoaSession>
)
}

Examples

Next.js

Components

Mercoa Session

MercoaSession is the primary component of the Mercoa React library. It provides auth and API clients to Mercoa components nested inside.

Props

propdescriptionrequired
tokenJWT token to authenticate the entity and user. See https://docs.mercoa.com/api-reference/entity/user/get-tokenYes
googleMapsApiKeyGoogle Maps API Key. Used for Address Autocomplete.No
childrenReactNode or ReactElement to be rendered inside the Mercoa Session context. If not provided, will render standalone portal with the given token options.No

Example

import { MercoaSession } from '@mercoa/react'
function Example() {
return <MercoaSession token={'xxx'} />
}

InvoiceDetails

InvoiceDetails renders the invoice PDF/Image and the invoice creation/update form. Can be used to create a new invoice by not passing an invoice or invoiceId prop.

Props

propdescriptionrequired
invoiceA Mercoa.InvoiceResponse object to view/edit.No
invoiceIdID of the invoice to view/edit. If invoice is passed, this will be ignored.No

Example

import { MercoaSession, InvoiceDetails } from '@mercoa/react'
function Example() {
return (
<MercoaSession token={'xxx'}>
<InvoiceDetails invoiceId={'xxx'} />
</MercoaSession>
)
}

ApprovalPolicies

ApprovalPolicies renders the current approval rules and policies for the entity, and lets them create/update/delete policies.

Example

import { MercoaSession, ApprovalPolicies } from '@mercoa/react'
function Example() {
return (
<MercoaSession token={'xxx'}>
<ApprovalPolicies />
</MercoaSession>
)
}

ApprovalPolicies

ApprovalPolicies renders the current approval rules and policies for the entity, and lets them create/update/delete policies.

Example

import { MercoaSession, ApprovalPolicies } from '@mercoa/react'
function Example() {
return (
<MercoaSession token={'xxx'}>
<ApprovalPolicies />
</MercoaSession>
)
}

Counterparties

Counterparties lets users view/add vendors and customers.

Props

propdescriptionrequired
type'payee' will return vendors (AP/BillPay). 'payor' will return customers (AR)Yes

Example

import { MercoaSession, Counterparties } from '@mercoa/react'
function Example() {
return (
<MercoaSession token={'xxx'}>
<Counterparties type="payee" />
</MercoaSession>
)
}