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 components if you need full control over the design and layout, or use the embed for a simpler integration.

1// Remember to install the react library: npm install --save @mercoa/react
2// Create a new page called bills.jsx
3
4import { useEffect, useState } from 'react'
5import { MercoaSession } from '@mercoa/react'
6
7const MercoaComponent = () => {
8  const [token, setToken] = useState(null)
9
10  useEffect(() => {
11    // Call Your Token Generator Endpoint
12    fetch('/generateMercoaToken').then(async (resp) => {
13      if (resp.status === 200) {
14        setToken(await resp.text())
15      }
16    })
17  }, [])
18
19  // This is the all-in-one component, see the full react guide to see how you can use individual
20  return <MercoaSession token={token} />
21}
22
23export default function Bills() {
24  return <MercoaComponent />
25}

Customizing the Mercoa Component with a JWT Token

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

1{
2  ...
3  "options": {
4    "entity": {
5      "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.
6    },
7    "invoice": {
8      "lineItems": "REQUIRED",
9      "status": [
10        "DRAFT",
11        "NEW",
12        "APPROVED",
13        "SCHEDULED",
14        "PENDING",
15        "PAID",
16        "CANCELED",
17        "FAILED"
18      ] // This is an array of invoice statuses that will be displayed in the Mercoa AP inbox.
19    },
20    "pages": {
21      "paymentMethods": true, // If this is true, the user will be able to add payment methods in the Mercoa AP inbox.
22      "representatives": true, // If this is true, the user will be able to add business representatives in the Mercoa AP inbox.
23      "notifications": true // If this is true, the user will be able to view notifications in the Mercoa AP inbox.
24    },
25    "vendors": {
26      "disableCreation": false, // If this is true, the user will not be able to create new vendors in the Mercoa AP inbox.
27      "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.
28    }
29  }
30}