Onboarding: Implementation

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

Pre-conditions

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

Setup

Ensure that your setup is complete before working with the Onboarding 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.

Required credentials

The Onboarding 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 Onboarding Element.

Name	Trigger	Description
Verify funding method	Bank account added with manual setup	Inform the user to verify the bank account by entering the test payment amount before the user can use the bank account for payments.
Reminder to verify funding method	Bank account added with manual setup is unverified	Remind the user to verify the bank account by entering the test payment amount before the user can use the bank account for payments.
Test payment cancelled	Bank account verification cancelled. The user did not verify the bank account within 10 days.	Inform the user that the bank account is removed since the user did not verify the bank account by entering the test payment amount within 10 days.
Additional documentation required	The organization KYC/KYB information must be manually reviewed	BILL requires additional documentation from the user to complete the KYC/KYB risk check.
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 onboarding for the Onboarding 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: 'onboarding'
    });
    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.

`onboardingReady`

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

{
  "name": "onboardingReady",
  "payload": {
    "onboardingCompleted": false
  }
}

`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;
}

`kycbReady`

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

{
  "name": "kycbReady",
  "payload": {
    "completed": false
  }
}

`fundingAddReady`

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

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

`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.

`onboardingSuccess`

The onboardingSuccess element is emitted when the onboarding flow is completed successfully. 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.

{
  "name": "onboardingSuccess"
}

`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;
}

`kycbSuccess`

The kycbSuccess event is emitted when the organization KYC/KYB application is submitted successfully.

{
  completed: boolean;
}

`fundingAddSuccess`

The fundingAddSuccess event is emitted when the user successfully adds a new funding payment method. You receive bankData or cardData with information about the added funding account.

{
  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;
  }
}

`userVerificationSuccess`

The userVerificationSuccess event is emitted when the user completes the verification flow with the User verification Element.

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 events

`kycError`

The kycError event is emitted when the user attempts to initiate the onboarding flow after they have already completed the process.

{
  "name": "kycError",
  "payload": {
    "errorCode": "KYC_COMPLETED",
    "errorMessage": "User already completed onboarding."
  }
}

Error handling

`error`

The error event is emitted when an error occurs during the use of the Onboarding 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_INTERNAL_ERROR`	HTTP 500 internal server error
`kycError`	This event occurs when the user attempts to initiate the onboarding flow after already completing the process.

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.