Payments: User experience

In this section, we showcase visuals and the primary user interactions with the Payments Element.

See Payments: Implementation for implementation details, including pre-conditions, custom events, and error handling.

Core behavior and requirements

With the Payments Element, BILL has a set of requirements for the expected behavior.

NOTE: The requirements for using the Payments Element vary based on the specific Element being used.

Payments Element

Behavior & requirements	Description
User role	The organization user must have an account in the BILL organization to view the Payments Element.
Empty state view	If the user has no vendors or funding methods, the user is prompted to add them. The prompt links emit an event when clicked to enable custom navigation handling. Adding a new vendor record is available with the Vendor setup Element. See Vendor setup Element for more information. Adding a new funding method is available with the Add funding Element. See Add funding Element for more information.

Behavior & requirements

Description

User role

The organization user must have an account in the BILL organization to view the Payments Element.

Empty state view

If the user has no vendors or funding methods, the user is prompted to add them.
The prompt links emit an event when clicked to enable custom navigation handling.

Adding a new vendor record is available with the Vendor setup Element. See Vendor setup Element for more information.
Adding a new funding method is available with the Add funding Element. See Add funding Element for more information.

Schedule payment Element

Behavior & requirements	Description
User role	The organization user must have the `ADMINISTRATOR` or `PAYER` user role to schedule a payment.
Funding payment method	The user must have at least one verified funding account method added in their BILL organization to make a payment. Adding a new funding method is available with the Add funding Element. See Add funding Element for more information.
Add a vendor	The user must have at least one vendor record in their BILL organization to make a payment. Adding a new vendor record is available with the Vendor setup Element. See Vendor setup Element for more information.

Behavior & requirements

Description

User role

The organization user must have the ADMINISTRATOR or PAYER user role to schedule a payment.

Funding payment method

The user must have at least one verified funding account method added in their BILL organization to make a payment.

Adding a new funding method is available with the Add funding Element. See Add funding Element for more information.

Add a vendor

The user must have at least one vendor record in their BILL organization to make a payment.

Adding a new vendor record is available with the Vendor setup Element. See Vendor setup Element for more information.

Plan your user experience

In this section, we outline key considerations for planning a seamless user experience when integrating with the Payments Element into your application. Ensure that you address each point thoughtfully to realize the full value of the Element capabilities in your existing experience.

Assumptions

When the user is using the Payments Element, BILL makes the following assumption.

The user has an account in the BILL organization

Entry points

There are a set of workflows where the Payments Element can be integrated.

When the user is attempting to view a list of all their bill payments

Entry point 01: List of all bill payments

When the user is attempting to search for a payment made to a vendor
When the user is attempting to schedule a payment to a vendor

Entry point 02: List of payments made to a vendor

When the user is attempting to cancel or void a vendor payment

Map the user flow

Map the complete user flow from viewing a list of payments made to their vendors to successfully completing the process of making a payment.

Maintain context

Ensure that your users understand that they are viewing a list of payments made to their vendors.

Related Elements

BILL Elements are connected and understanding this connection and hierarchy enables you to understand the user experience better.

Connection	Description
Parent	Onboarding Element: The user can complete BILL KYC/KYB checks for the organization, set up MFA, add funding payment methods for paying vendors and bills, and complete user verification (if required). MFA Element: MFA is required for the user to add a funding payment method. When the signed-in user session is not MFA-trusted, the user is required to complete the MFA setup. Add funding Element: The user can add funding payment methods in the organization. Manage funding Element: The user can add additional funding payment methods and manage existing funding method details in the organization. User verification Element: The user may be required to complete one-time BILL risk verification before the user can use a funding payment method for payments. Vendor setup Element : The user can create a new vendor record or connect an existing vendor record from their organization to a vendor in the BILL network or invite their vendor to the BILL Network. Vendors Element : The users can view a list of their vendors. In addition, users can filter vendors, manage vendor details, and schedule payments.
Child	Schedule payment Element: The user can schedule a one-time payment to a vendor.

Connection

Description

Parent

Onboarding Element: The user can complete BILL KYC/KYB checks for the organization, set up MFA, add funding payment methods for paying vendors and bills, and complete user verification (if required).

MFA Element: MFA is required for the user to add a funding payment method. When the signed-in user session is not MFA-trusted, the user is required to complete the MFA setup.

Add funding Element: The user can add funding payment methods in the organization.

Manage funding Element: The user can add additional funding payment methods and manage existing funding method details in the organization.

User verification Element: The user may be required to complete one-time BILL risk verification before the user can use a funding payment method for payments.

Vendor setup Element : The user can create a new vendor record or connect an existing vendor record from their organization to a vendor in the BILL network or invite their vendor to the BILL Network.

Vendors Element : The users can view a list of their vendors. In addition, users can filter vendors, manage vendor details, and schedule payments.

Child

Schedule payment Element: The user can schedule a one-time payment to a vendor.