Schedule payment: Implementation

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

Preconditions

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

Setup

Ensure that your setup is complete before working with the Schedule payment 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 Schedule payment 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 Schedule Payment Element. User verification is also available with the Onboarding Element, Add funding Element, Manage funding Element, and User verification Element. Without verification, the user cannot use a funding payment method for payments.
Add a funding payment method	A valid funding payment method must be available for the user to schedule a payment.

Required credentials

The Schedule payment 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 Schedule payment Element.

Name	Trigger	Description
Virtual card payment sent	A payment was scheduled to a vendor who accepts virtual card	Inform the vendor that a virtual card payment has been sent and provide instructions on how to process it. The notification also states that the card is for a single use and expires 20 days from the issue date.
Payment scheduled	Payment scheduled to a vendor	Inform the organization that a payment for a specific amount has been scheduled to their vendor on a specific date.
Payment arrival date updated	Payment arrival date changed	Notify the organization that a payment’s estimated arrival date has been changed.
Payment on the way (Vendor notification)	Payment sent	Inform the vendor that a payment is on the way.
Payment delivered (Vendor notification)	Payment delivered	Notify the vendor that a payment from the organization has been received.
Virtual card sent (Vendor notification)	Virtual card sent	Inform the vendor that the organization has sent a virtual card payment, and provide instructions on how to cash it.

Initialization

In the <body> tag of your web page, complete the Element initialization script in your <script> tag. Set name as widget name for the Schedule payment 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: 'schedulePayment'
    });
    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.

`schedulePaymentReady`

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

// Empty payload
{
  "name": "schedulePaymentReady",
  "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;
}

Selected events

The Selected events fire when the user clicks a link or an interactive element. See Initialize the Element experience for navigation details and your response options.

`schedulePaymentVendorSetupSelected`

The schedulePaymentVendorSetupSelected event is emitted when the user clicks Add a new vendor on the Schedule payment Element.

{
  "name": "schedulePaymentVendorSetupSelected"
}

`schedulePaymentVerifyDepositSelected`

The schedulePaymentVerifyDepositSelected event is emitted when the user clicks Verify Deposit to begin trial deposit verification. The Element handles the subsequent navigation.

{
  "name": "schedulePaymentVerifyDepositSelected"
}

`schedulePaymentUserVerificationSelected`

The schedulePaymentUserVerificationSelected event is emitted when the user clicks Verify Identity to complete a required identity verification. The Element handles the subsequent navigation.

{
  "name": "schedulePaymentUserVerificationSelected"
}

Success events

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

`schedulePaymentSuccess`

The schedulePaymentSuccess event is emitted when the payment is scheduled successfully.

{
  "name": "schedulePaymentSuccess",
  "payload": {
    "vendorId": "00902TZVGLSIDHF1m603",
    "paymentId": "stp02NMYWTABIXT21094",
    "amount": 2.22,
    "paymentType": "Check"
  }
}

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

`schedulePaymentVerifyDepositSuccess`

The schedulePaymentVerifyDepositSuccess event is emitted when the user verifies trial deposits for a pending bank account.

{
  "name": "schedulePaymentVerifyDepositSuccess",
  "payload": {
    "bankAccountId": "bac02JYVOTAGDWAKt7h6"
  }
}

Miscellaneous events

`DocUploadTriggered`

The DocUploadTriggered is emitted when the user does not pass the questionnaire and enters the document upload flow.

{
  "name": "DocUploadTriggered",
  "payload": {}
}

Error handling

`error`

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

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