Payment methods

Implement a pre-built user interface for registering new payment methods.

With the moov-payment-methods drop, you can easily allow end users to register new payment methods with their existing Moov account.

If you want to set up payment methods on a new Moov account, use the moov-onboarding drop, which flows straight into payment methods after an account is created.

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

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.
accountID String The ID of the Moov connected account to which the payment method will be added.
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.
paymentMethodTypes String[] An array of allowed payment method types. Possible values are card or bankAccount.
microDeposits Boolean If false, hides the micro deposit verification step when adding a payment method. Defaults to true.

How to set a property

1
2
const paymentMethods = document.querySelector('moov-payment-methods');
paymentMethods.token = 'eyjh...';
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const paymentMethods = document.querySelector('moov-payment-methods');
paymentMethods.accountID = "abc123...";
// This config is identical to Moov.js's Plaid reseller initialize function,
// Except we get the accountID from the payment methods drop
paymentMethods.plaid = {
  redirectURL: "http://classbooker.com",
  env: "sandbox",  // leave this off if production
  onExit: (...args) => console.log("on plaid exit", ...args),
  onEvent: (...args) => console.log("on plaid event", ...args),
  onLoad: (...args) => console.log("on plaid load", ...args),
  onSuccess: (...args) => console.log("on plaid success", ...args),
};
1
2
3
4
5
const paymentMethods = document.querySelector('moov-payment-methods');
paymentMethods.onError = ({ errorType, error }) => {
  console.log(errorType); // "bankAccount", "plaid", 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.
account-id The ID of the Moov connected account to which the payment method will be added.

Scopes

To add a payment method, your Moov API token must include the following scopes.

  • /fed.read
  • /accounts/{accountID}/cards.read
  • /accounts/{accountID}/cards.write
  • /accounts/{accountID}/bank-accounts.read
  • /accounts/{accountID}/bank-accounts.write

Instant account verification

Instead of using micro-deposit verification which can take up to a few days to complete, you can use Plaid directly from Moov Drops to add new bank accounts. See Plaid’s documentation for more information.

Theming

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