Getting Started

Step 3: Frontend Integration

Now you have the token, pass it to the Mercoa component to authenticate your user and render the Mercoa AP inbox.

You can use the React component if you need full control over the design and layout, or use the embed for a simpler integration.

import React, { useEffect, useState } from 'react'
import { MercoaSession } from '@mercoa/react'
const MercoaComponent = () => {
const [token, setToken] = useState(null)
useEffect(() => {
// Call Your Token Generator Endpoint
// Use the same auth scheme you use for all in-app AJAX calls
fetch('your-api/generateMercoaToken').then(async resp => {
if(resp.status === 200) {
setToken(await resp.text())
}
})
}, [])
return (
<MercoaSession token={token} />
)
}

Customizing the Mercoa Component

The Mercoa drop-in component is designed to be customized without needing to write any code. Currently, customization is controlled by the JWT token you pass to the component. In the future, we will add additional customization options.

Customizing the Mercoa Component with a JWT Token

When you generate a JWT token, you can pass in additional options in the request body:

{
...
"options": {
"entity": {
"enableMercoaPayments": true // If this is true, the user will run though Mercoa's KYB onboarding and will be able to use our built-in payment rails. If you are using your own payment rails, set this to false.
},
"invoice": {
"status": [
"DRAFT",
"NEW",
"APPROVED",
"SCHEDULED",
"PENDING",
"PAID",
"CANCELED",
"FAILED"
] // This is an array of invoice statuses that will be displayed in the Mercoa AP inbox.
},
"pages": {
"paymentMethods": true, // If this is true, the user will be able to add payment methods in the Mercoa AP inbox.
"representatives": true, // If this is true, the user will be able to add business representatives in the Mercoa AP inbox.
"notifications": true // If this is true, the user will be able to view notifications in the Mercoa AP inbox.
},
"vendors": {
"disableCreation": false, // If this is true, the user will not be able to create new vendors in the Mercoa AP inbox.
"network": "all" // This limits the vendors that will be displayed in the Mercoa AP inbox. Options are "entity" which limits vendors to those created by your customer, "platform" which will show all vendors created by any of your customers, or "all" which shows additional verified vendors created by Mercoa.
}
}
}