This guide details the various methods for creating and adding a bank account to a counterparty. Counterparty bank accounts are called "external accounts."

TAB-Pre-Built UI


This guide describes how to embed this pre-built Account Collection UI in your application. The Account Collection flow is currently tailored to collect domestic US account details, but in the future global account types and payment types will be supported.

# Pre-Requisites

  1. **Organization ID:** Found in your [developer settings](🔗)

  2. **API Key:** Found in [API Keys](🔗) in your developer settings

  3. **Counterparty ID:** The ID of the counterparty to which to add an account

Only use API keys server-side.

API keys are secret and should not be used directly in client-side applications. If you use an API key client-side or your key is exposed, you can delete the old key and generate a new one in your developer settings.

# 1. Create an Account Collection Flow

Create an account collection flow using the [Create an Account Collection Flow](🔗) API route. In addition to the `counterparty_id`, specify which `payment_types` you want the account to support. Modern Treasury will customize the embedded form to collect fields commonly required for the payment types.

This API request will return an [Account Collection Flow](🔗) object. Save the `client_token` as it will be used in future steps.

# 2. Retrieve Publishable API Key

**Dashboard**: Go to your [Publishable API Keys](🔗) page. There, you will find your Publishable API Keys. If you do not have one, create one.

# 3. Mount the Embeddable Flow

## Add `modern-treasury-js`

**Client-side**: You first need to add [`modern-treasury-js`](🔗) to your application. We recommend installing the library from NPM, but you can also directly install the script from our CDN.

## Initialize `ModernTreasury`

**Client-side**: Initialize `ModernTreasury` with your Publishable API Key from the previous step.

## Create an Embeddable Flow

**Client-side**: The next step is to create the `EmbeddableFlow`. You must pass the `client_token` from the previous step. While not required, we recommend defining an `onSuccess` callback to handle what happens after an end-user successfully completes the flow. Similarly, we recommend defining an `onError` callback to handle any unexpected errors. Visit [`createEmbeddableFlow`](🔗) documentation for full details.

### (_Optional_) Customize Appearance

**Client-side**: You can customize the appearance of embeddable flows to match the look and feel of your application. Check out our [`createEmbeddableFlow`](🔗) documentation to see how to customize properties like colors and font.

## Mount the Embeddable Flow

**Client-side**: Now that you have an `EmbeddableFlow`, you need to add it to the DOM. You can [`mount`](🔗) the flow to a valid CSS selector or a DOM element. After successfully mounting, the end-user will be able to start progressing through the flow.

## Summary

After following all of these steps, you may have something that looks like this:

# 4. End-User Submits Account Details

**Client-side**: Once the flow is mounted, the end-user will follow the embedded Account Collection flow and submit their account details. Once complete, we will create an `ExternalAccount` associated with the given `Counterparty`, save it to the `AccountCollectionFlow`, and move the `AccountCollectionFlow#status` to `completed`. We will also call the `onSuccess` callback so that you can customize your success behavior and navigate to the next page.


# Pre-Requisites

  1. **Organization ID:** Found in your [developer settings](🔗)

  2. **API Key:** Found in [API Keys](🔗) in your developer settings

  3. **Counterparty ID:** The ID of the counterparty to which to add an account

# 1. Collect account details

You may already have the external account details, having collected them perhaps in your own UI or other means. Once these details are collected, you will create an External Account using the API.

# 2. Create external account

Using [the `POST /external_accounts`](🔗), create an external account using the previously collected information. When creating an external account, you can associate it to an existing counterparty. Let's assume that counterparty is `Modern Baglery` with an ID of `76ed8d23-564c-4895-b284-314327d9e574`.

## Sample Request


# Pre-Requisites

  1. **Counterparty:** An existing counterparty to which to add an account

# 1. Navigate to counterparty

In the Modern Treasury dashboard, navigate to [Counterparties](🔗). Filter or paginate to find the desired counterparty and click to view the details.

# 2. Select account type to add

Click the Bank Accounts tab. At the bottom of the page, select the type of account you want to add.

# 3. Fill in account details

Fill in the account details. Required fields will vary by account type.

# 4. Save

Save and view the new account.