Ask Moov Beta
Generative AI is experimental and can make mistakes.
Guides Use cases API Changelog
  1. Moov.js
  2. Moov Drops

Prebuilt onboarding UI

Implement a pre-built user interface for onboarding individuals or businesses easily, even if they require verification.

With the moov-onboarding element, users can enter individual or business information to create an account, and Moov handles the onboarding process. The onboarding Drop takes care of the entire account creation workflow, interacting directly with Moov’s API using JWTs to securely send data between your end users browser and Moov. For business accounts, this includes gathering the business, representative, and underwriting data requirements for accounts requesting the send-funds, collect-funds, wallet, or card-issuing capabilities.

Accounts that require just the transfer capability should see the standard Moov.js accounts guide to get set up. The onboarding Drop is for users looking to create a complete business or individual account, with send-funds, collect-funds, wallet, or card-issuing capabilities.

1

<moov-onboarding></moov-onboarding>

Visit our Drops 101 guide to learn the basics of properties, attributes, and initializing Drops.

Moov Drops require a secure HTTPS connection. If you don’t have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

Properties

Properties can be accessed through JavaScript using a reference to the moov-onboarding element.

Property Type Description
token String Auth Token used for hitting the API. See the Scopes section for more detail.
facilitatorAccountID String ID for your account. The account created through onboarding will be connected to this account.
accountData Object Partial account data used to pre-populate fields in the onboarding dialog.
capabilities String[] The capabilities requested by this account. Fields in the onboarding dialog will be marked as optional or required based on the requested capabilities. See the capabilities section for more detail.
open Boolean Whether or not the dialog is currently displayed to the user.
onResourceCreated Function Callback fired when the onboarding dialog creates a new resource (account, payment method, etc). Use this callback to update your token with the appropriate scopes before creating the next resource. See the Scopes section for more detail.
onError Function Callback fired when the onboarding dialog encounters an error.
onCancel Function Callback fired when the user attempts to close the dialog.
onSuccess Function Callback fired when the user completes the onboarding process.
plaid Object A Plaid configuration object. Used for setting up a payment method through Plaid.
onPlaidRedirect Function Callback fired after following a redirect from Plaid. Provides a restoredProperties object which can be used to restore the state of the drop.
paymentMethodTypes String[] An array of allowed payment method types. Possible values are card or bankAccount.
allowedCardBrands String[] An array of allowed card brands. If this field is not provided, all card brands will be accepted. Accepted values are visa, mastercard, american-express, diners-club, discover, jcb, unionpay, maestro, mir, elo, hiper, or hipercard.
microDeposits Boolean If false, hides the micro deposit verification step when adding a payment method. Defaults to true.
showLogo Boolean If true, shows your business’ avatar on the start screen. Defaults to false.

How to set a property 

1
2

const onboarding = document.querySelector('moov-onboarding');
onboarding.token = 'eyjh...';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const onboarding = document.querySelector('moov-onboarding');
onboarding.accountData = {
  profile: {
    individual: {
      email: "john.doe@moov.io",
      name: { firstName: "John", lastName: "Doe" },
      birthDate: {
        day: 1,
        month: 1,
        year: 1990,
      },
    },
  },
};

1
2
3
4
5

const onboarding = document.querySelector('moov-onboarding');
onboarding.onError = ({ errorType, error }) => {
  console.log(errorType); // "account", "representative", "bankAccount", etc
  console.error(error); // Error message
};

Attributes

String-type properties can be set via attributes on the HTML <moov-onboarding> element.

Attribute Description
token Auth Token used for hitting the API. See the Scopes section for more detail.
facilitator-account-id ID for the main account. The account created through onboarding will be connected to this account.
show-logo Boolean attribute that should only be present if you want to show your business avatar on the start screen.

Scopes

The moov-onboarding Drop requires different scopes at different steps in the onboarding process.

As users move through the onboarding flow, the Drop creates new resources (accounts, payment methods, etc), and it needs the appropriate permissions to read or modify those resources. The developer is responsible for updating the onboarding token with new scopes as resources are created.

  1. Create a token with the following initial scopes:
    • accounts.write
    • accounts/{facilitatorAccountID}/profile.read
    • fed.read
    • profile-enrichment.read
  2. Initialize the onboarding Drop with the token and make the Drop available to the user. 
    1
2
3

    // Get `myToken` with initial scopes
onboarding.token = myToken;
onboarding.open = true;
  3. The user enters information for their new account.
  4. The onboarding Drop creates the account and fires the onResourceCreated callback. 
    1
2
3
4

    onboarding.onResourceCreated = ({ resourceType, resource }) => {
  // This fires when the account is created
  console.log("Resource created! ", resource);
}
  5. Get the account from the onResourceCreated callback: 
    1
2
3
4
5

    onboarding.onResourceCreated = ({ resourceType, resource }) => {
  if (resourceType === "account") {
    // Save the account resource somewhere
  }
};
  6. Use the accountID to create a new token and add the following scopes:
    • All initial scopes
    • /accounts/{newAccountID}/bank-accounts.read
    • /accounts/{newAccountID}/bank-accounts.write
    • /accounts/{newAccountID}/capabilities.read
    • /accounts/{newAccountID}/capabilities.write
    • /accounts/{newAccountID}/cards.read
    • /accounts/{newAccountID}/cards.write
    • /accounts/{newAccountID}/profile.read
    • /accounts/{newAccountID}/profile.write
    • /accounts/{newAccountID}/representatives.read
    • /accounts/{newAccountID}/representatives.write
  7. Update the onboarding Drop with the new token: 
    1
2

    // Get `myToken2` with account-related scopes
onboarding.token = myToken2;
  8. The user can now continue on to add payment methods to the account.

Theming

Read our themes guide to learn how to re-style Moov Drops.

Summary Beta