SelfOnboardingFlow
Guided flow for contractors to complete their own onboarding.
Remarks
Hands the contractor responsibility for submitting their own profile, address, payment, and document-signing information. Drives a multi-step flow keyed to the contractor being self-onboarded, starting from the self-onboarding landing page and ending on a confirmation summary.
Each step is also exported as a standalone block (see the Blocks table) for composing a custom workflow when this orchestration is the wrong fit.
The flow forwards every event emitted by its blocks to onEvent; see the events table on each block for the full set of events and payloads observable from this flow.
Example
import { ContractorOnboarding, type EventType } from '@gusto/embedded-react-sdk'
function MyApp() {
return (
<ContractorOnboarding.SelfOnboardingFlow
companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
contractorId="4b3f930f-82cd-48a8-b797-798686e12e5e"
onEvent={(eventType: EventType) => {
if (eventType === 'contractor/selfOnboarding/done') {
// Onboarding complete — navigate to your next screen
}
}}
/>
)
}
SelfOnboardingFlowProps
Props for SelfOnboardingFlow.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
contractorId | string | The associated contractor identifier. |
onEvent | OnEventType<EventType, unknown> | Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events. |
Inherits children, className, defaultValues, dictionary, FallbackComponent, LoaderComponent from BaseComponentInterface.
Sub-components
| Component | Description |
|---|---|
| Landing | Landing page for the contractor self-onboarding flow. Displays a welcome message and the list of onboarding steps the contractor needs to complete. |
| ContractorProfile | Form for creating or editing a contractor profile, supporting both individual and business contractor types. |
| Address | Form for collecting and updating a contractor's mailing address. Renders a business or home address title based on the contractor type. |
| PaymentMethod | Manages a contractor's payment method, capturing a bank account for direct deposit or recording check as the payment method. |
| DocumentSigner | Contractor onboarding step for reading and signing required contractor documents. |
| OnboardingSummary | Confirmation screen shown at the end of the contractor self-onboarding flow. Lets the contractor know their information has been submitted and emits contractor/selfOnboarding/done when they acknowledge it. |
Step flow
The contractor completes their own onboarding, starting from the self-onboarding landing page.
Each step above is also exported as a standalone block. When composing these blocks directly instead of using this flow, render the profile step with isAdmin={false}: ContractorProfile defaults to the admin create/edit form, so omitting the prop renders the wrong screen for self-onboarding. This flow sets isAdmin={false} for you. The remaining steps (Address, PaymentMethod, DocumentSigner, OnboardingSummary) take no self-onboarding-specific props.