Payee Management

Payee management allows you to handle your counterparties.

Note that this component utilizes Plaid to connect to your end-customers financial accounts. It introduces support for Plaid's Same-day Micro-Deposits.

Customer Experience:

• List counterparties.
• Add a new counterparty via Plaid Link.
• Add a new counterparty using Plaid's Same-day Micro-Deposits flow.
• Add a new counterparty via account and routing numbers.
• Delete counterparties.
• Upcoming: Create ACH payments for the counterparty (via the list).

Payee Management Component TEST MODE

Mobile

Desktop

Implementation

Web Components

Add the payee management element to your app where you'd like it to be presented.

<unit-elements-payee-management
    customer-token=""
    theme=""
    language=""
></unit-elements-payee-management>

Inputs:

Name	Type	Required	Description
customer-token	string	Yes	A Unit Customer token. Required Scopes: counterparties counterparties-write
language	string	No	A URL that specifies the language configuration.
theme	string	No	A URL that specifies the UI configuration.
columns	string	No	Comma separated keys to display as table headers. The default is: "name,bank,routing,account,type".
menu-items	string	No	A list of actions, The menu dynamically adjusts based on the provided list sendFunds, delete.
query-filter	string	No	Query for filtering ccounterparties: Counterparties.
pagination-type	"infiniteScroll", "pagination"	No	defines the method by which additional content is loaded. Possible values: "infiniteScroll" (default), "pagination"
plaid-account-filters	"checking, savings"	No	Account subtypes to display in Link. If not specified, only checking subtype will be shown.
plaid-link-customization-name	string	No	The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
counterparties-per-page	string	No	Number of counterparties to fetch on each page or scroll to bottom. Also acts as initial number of counterparties to fetch. The default is "8" for pagination and "15" for infinite scroll
hide-title	"true", "false"	No	Hide the component title in case value is "true".
hide-counterparty-actions-button	"true", "false"	No	Hide the component actions button in case value is "true".
menu-placeholder	string	No	The ID name of the menu HTML element allows the user to render the counterparty menu in a different location.
flow-placeholder	string	No	The ID name of the flow HTML element allows the user to render the counterpaty flow (delete, send funds) in a different location.
payee-creation-placeholder	string	No	The ID name of the payee-creation HTML element allows the user to render the payee creation in a different location.
micro-deposit-connection-placeholder	string	No	The ID name of the micro-deposit-connection HTML element allows the user to render the micro-deposit-connection in a different location.

Events:

Event Name	Description	Detail
unitCounterpartyCreated	Occurs when a new counterparty created	[Promise] Counterparty
unitCounterpartyDeleted	Occurs when selected counterparty deleted	[Promise] Counterparty
unitConnectedAccountCreated	Occurs when a new connected account created	[Promise] ConnectedAccount
unitMicroDepositConnectionCreated	Occurs when micro-deposit connection created	[Promise Counterparty]
unitMicroDepositConnectionRejected	Occurs when micro-deposit connection rejected	[Promise] ConnectedAccount

React Native SDK

UNPayeeManagementComponent props:

Name	Type	Required	Description
customerToken	string	YES	A Unit Customer token
menuItems	UNPayeeManagementMenuItem[]	NO	A list of actions, The menu dynamically adjusts based on the provided list [.sendFunds, .delete].
queryFilter	string	NO	Query for filtering ccounterparties: Counterparties.
paginationType	UNPayeeManagementComponentPaginationType	NO	Defines the method by which additional content is loaded. Possible values: infiniteScroll (default), pagination
counterPartiesPerPage	number	NO	Number of counterparties to fetch on each page or scroll to bottom. Also acts as initial number of counterparties to fetch. The default is "8" for pagination and "15" for infinite scroll
theme	string	NO	A URL that specifies the UI configuration.
language	string	NO	A URL that specifies the language configuration.
hideTitle	boolean	NO	Hide title in case value is true
hideCounterpartyActionsButton	boolean	NO	Hide the component actions button in case value is true
menuPlaceholder	string	NO	The ID name of the menu HTML element allows the user to render the counterparty menu in a different location.
flowPlaceholder	string	NO	The ID name of the flow HTML element allows the user to render the counterpaty flow (delete, send funds) in a different location.
payeeCreationPlaceholder	string	NO	The ID name of the payee-creation HTML element allows the user to render the payee creation in a different location.
microDepositConnectionPlaceholder	string	NO	The ID name of the micro-deposit-connection HTML element allows the user to render the micro-deposit-connection in a different location.
plaidAccountFilters	UNPlaidAccountFilter[]	NO	Account subtypes to display in Link. If not specified, only checking subtype will be shown. Possible values: .checking, .savings
plaidLinkCustomizationName	string	NO	The name of the Link customization from the Plaid Dashboard to be applied to Link. If not specified, the default customization will be used. When using a Link customization, the language in the customization must match the language selected via the language parameter.
onLoad	(response: [UNPayeeCounterparty]) => void	NO	Callback for handling onload event, also usable for error handling.
onCounterpartyCreated	(counterparty: UNPayeeCounterparty) => void	NO	Callback when a new counterparty created
onCounterpartyDeleted	(counterparty: UNPayeeCounterparty) => void	NO	Callback when selected counterparty deleted
onConnectedAccountCreated	(connectedAccount: UNPayeeConnectedAccount) => void	NO	Callback when a new connected account created
onMicroDepositConnectionCreated	(onnectedAccount: UNPayeeCounterparty) => void	NO	Callback when micro-deposit connection created
onMicroDepositConnectionRejected	(connectedAccount: UNPayeeConnectedAccount) => void	NO	Callback when micro-deposit connection rejected

Example:

import React from 'react';
import {
  UNPayeeConnectedAccount,
  UNPayeeCounterparty,
  UNPayeeManagementComponent
} from 'react-native-unit-components';

export default function YourComponent {
  return (
    <UNPayeeManagementComponent
      customerToken={/*Customer token here*/}
      onConnectedAccountCreated={(account: UNPayeeConnectedAccount) => console.log(`Payee Account created: ${account}`)}
      onCounterpartyCreated={(counterparty: UNPayeeCounterparty) => console.log(`Payee Counterparty created: ${counterparty}`)}
      onCounterpartyDeleted={(counterparty: UNPayeeCounterparty) => console.log(`Counterparty Deleted: ${counterparty}`)}
      onMicroDepositConnectionCreated={(account: UNPayeeCounterparty) => console.log(`Micro Deposit Connection Created ${account}`)}
      onMicroDepositConnectionRejected={(account: UNPayeeConnectedAccount) => console.log(`Micro Deposit Connection Rejected ${account}`)}
    />
  );
};