Payment Provisioning
Overview
Component to render a business onboarding form, segmented into multiple steps. You will need to first create a business via Business API to get the business-id required for this component.
Usage
<justifi-payment-provisioning
auth-token="wct_provisioning"
business-id="biz_456"
/>Props & Events
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
allow-optional-fields | boolean | No | false | |
auth-token | string | Yes | — | |
business-id | string | Yes | — | |
form-title | string | No | 'Business Information' |
Events
-
submit-event: Fires when payout information is collected and saved. Payload includes the API response or error details. -
click-event: Fires on button interactions (Previous/Next step navigation). Payload includes the action name. -
error-event: Fires when errors occur, including:- Missing required props (
auth-tokenorbusiness-id) - API failures during business data fetch or provisioning submission
- When provisioning has already been requested for the business
Payload includes
message,errorCode, andseverityproperties. - Missing required props (
Public Methods
This component does not expose any public methods. Form submission is handled automatically through the multi-step form flow.
Validation Rules
The form enforces the following rules before a step can be submitted. They apply to both US and Canadian businesses.
Business Information
- Date of Registration is required and must be a date in the past — today's date is not accepted.
Business Owners
- Ownership percentage is required for every owner and must be at least 25% (and at most 100%). Owners with less than 25% ownership should not be registered; the form displays an informational alert reminding that all owners with 25% or more ownership of the business must be registered.
- Combined ownership across all owners cannot exceed 100%. Totals under 100% are allowed.
- Email addresses must be unique across owners. Submitting duplicate emails blocks the step and flags the offending field with an error.
Authorization
Authorization is performed by passing a web component token as auth-token.
- Web Component Token: These tokens are generated by your backend services using the Web Component Tokens API. Each token can be scoped to perform a set number of actions and is active for 60 minutes. When creating a web component token for this specific component you'll need to use the role:
write:business:business_id. Make sure the value forbusiness_idmatches the prop you also pass separately.
Theming & Layout
| Part | Description | DOM target |
|---|---|---|
::part(text) | — | |
::part(skeleton) | — | |
::part(heading1) | — | |
::part(heading2) | — | |
::part(tooltip) | — | |
::part(tooltipIcon) | — | |
::part(tooltipInner) | — | |
::part(inputAdornment) | — | |
::part(inputDisabled) | — | |
::part(inputFocused) | — | |
::part(inputGroup) | — | |
::part(inputInvalid) | — | |
::part(label) | — | |
::part(input) | — | |
::part(inputInvalidAndFocused) | — | |
::part(textDanger) | — | |
::part(radioListItem) | — | |
::part(buttonSecondary) | — | |
::part(alert) | — | |
::part(buttonLoading) | — | |
::part(buttonPrimary) | — | |
::part(buttonSuccess) | — | |
::part(buttonDanger) | — | |
::part(buttonWarning) | — | |
::part(buttonInfo) | — | |
::part(buttonLight) | — | |
::part(buttonDark) | — | |
::part(buttonLink) | — | |
::part(buttonOutlinePrimary) | — | |
::part(buttonOutlineSecondary) | — | |
::part(heading3) | — | |
::part(card) | — | |
::part(table) | — | |
::part(tableCell) | — | |
::part(tableHeadCell) | — | |
::part(inputCheckbox) | — | |
::part(inputCheckboxChecked) | — | |
::part(inputCheckboxCheckedFocused) | — | |
::part(inputCheckboxFocused) | — | |
::part(inputCheckboxInvalid) | — |