Add funding: Implementation

In this section, we list the implementation details for the Add funding Element. This includes pre-conditions, custom events, and error handling.

Pre-conditions

BILL has a set of pre-conditions for working with the Add funding Element.

Setup

Ensure that your setup is complete before working with the Add funding Element.

Setup	Description
Set up organizations and users	You must set up your organizations and users with the BILL v3 API. See Organizations for BILL partners and Users for BILL partners for more information.
Onboard the organization	The organization onboarding must be complete with the Onboarding Element.
MFA	MFA is required for the user to schedule a payment. When the signed-in user session is not MFA-trusted, the user is prompted to complete MFA and create a trusted session in the Add funding Element. MFA setup is also available with the MFA Element. See MFA Element for more information.
User verification	Before the user can use a funding payment method, the user may be required to undergo BILL risk verification. Users that are flagged by the BILL risk model are set as `NOMINATED`on their bank account status to complete user verification. If user verification is required, the user is prompted to complete the verification process in the Add funding Element. User verification is also available with the User verification Element, Manage funding Element, Schedule payment Element, and Onboarding Element. Without verification, the user cannot use a funding payment method for payments.

Required credentials

The Add funding Element requires a set of credentials.

Credential	Description
`devKey`	Developer key generated with your BILL developer account
`sessionId`	API session ID generated with `POST /v3/partner/login`. See API partner login in the API reference to learn about signing in and generating a partner-level `sessionId`.
`userId`	BILL-generated ID of the signed-in user. The value begins with `006`.
`orgId`	Organization ID associated with the signed-in user

Email notifications

BILL sends a set of email notifications for different triggers with the Add funding Element.

Name	Trigger	Description
User verification required	User verification is required for the user to use the funding payment method	Inform the user that they must complete one-time BILL risk verification before the user can use a funding payment method for payments.

Initialization

In the <body> tag of your web page, complete the Element initialization script in your <script> tag. Set name as fundingAdd for the Add funding Element. See Initialize the Element experience for more information.

    // Initialize & mount the Element on the web page
    const bootloader = init(billBootConfig);
    bootloader.register({
      id: 'element1',
      name: 'fundingAdd'
    });
    await bootloader.render('element1', '#your-div');

Events

BILL provides a set of custom Element properties that you can set. You can use window.addEventListener or an onEvent callback for listening to and handling events.

Ready events

The Ready events fire when the Element renders successfully.

`fundingAddReady`

The fundingAddReady event is emitted when the Element is rendered successfully.

// Empty payload
{
  "name": "fundingAddReady",
  "payload": {}
}

`mfaReady`

The mfaReady event is emitted when the Element is rendered successfully. When the signed-in user session is MFA-trusted, the returned setup value is true. When the session is not MFA-trusted, the returned required value is true.

{
  setup: boolean;
  required: boolean;
}

`userVerificationReady`

The userVerificationReady event is emitted when the Element is rendered successfully. If user verification is required, the returned required value is true.

{
  required: boolean;
}

Success events

The Success events fire when the user-initiated action completes successfully.

`fundingAddSuccess`

The fundingAddSuccess event is emitted when the user successfully adds a new funding payment method. The response includes bankData or cardData containing information about the added funding account.

❗️
If the user adds multiple accounts simultaneously via Plaid, the returned values are formatted as comma-separated strings, not arrays. For example, "id": "bac02OBEIEBXNSFHt71i,bac02BRBIUIJBEBXt71j"

{
  bankData: {
    status: string;
    accountNumber: string;
    userVerificationRequired: boolean;
    id: string;
    nameOnAccount: string;
    defaultBilling?: boolean;
  }
} | {
  cardData: {
    status: string;
    last4: string;
    userVerificationRequired: boolean;
    id: string;
    nameOnAccount: string;
    defaultBilling?: string;
  }
}

`mfaSuccess`

The mfaSuccess event is emitted when the MFA setup or MFA challenge is submitted successfully. Note that rememberMeId is available in the payload only when MFA rememberMe is set as true for the user.

{
  setup: boolean;
  required: boolean;
  rememberMe?: boolean;
  rememberMeId: string;
  deviceId: string;
}

`userVerificationSuccess`

The userVerificationSuccess event is emitted when the user completes the verification flow with the User verification Element. When this event is fired, this is a signal for the event listener that the user has completed the flow in the Element, and it is safe to route the user.

Verification result	Description
`Approved`	User verification is complete and the user is approved
`In_Review`	User verification is in review

{
  userId: string;
  verificationResult: 'Approved' | 'In_Review' | 'Not_Applicable';
}

Error handling

`error`

The error event is emitted when an error occurs during the use of the Add funding Element. For this Element, there are 2 possible error events. In all other error cases, error message banners are displayed in the Element.

Event	Description
`WIDGET_REQUIRES_KYCB`	The organization KYC/KYB is not complete
`WIDGET_INTERNAL_ERROR`	HTTP 500 internal server error

BILL follows a pattern for all errors.

Pattern
BILL emits a standardized and singular `error` event for all Elements. All the error payloads follow a consistent and predictable shape.
BILL emits error events only when the user cannot recover from an error in the BILL experience. This should occur only when the requirements for launching an Element are not met. Errors are emitted immediately for you to respond and close the BILL experience.
If your application does not handle the BILL error events, BILL provides a fallback experience for the user. This experience does not have any interactive element that your application is required to respond to. When the user lands on the fallback experience, BILL recommends that you either navigate the user correctly or add interactive elements to enable the user to close the Element.

Pattern

BILL emits a standardized and singular error event for all Elements. All the error payloads follow a consistent and predictable shape.

BILL emits error events only when the user cannot recover from an error in the BILL experience. This should occur only when the requirements for launching an Element are not met. Errors are emitted immediately for you to respond and close the BILL experience.

If your application does not handle the BILL error events, BILL provides a fallback experience for the user. This experience does not have any interactive element that your application is required to respond to.

When the user lands on the fallback experience, BILL recommends that you either navigate the user correctly or add interactive elements to enable the user to close the Element.