embedded-react-sdk/docs/workflows-overview/company-onboarding.md at main · Gusto/embedded-react-sdk

title	Company Onboarding
order	1

Overview

The Company Onboarding workflow provides components for managing company-related onboarding tasks. These components can be used individually or composed into a complete workflow.

Implementation

import { CompanyOnboarding } from '@gusto/embedded-react-sdk'

function MyApp() {
  return (
    <CompanyOnboarding.OnboardingFlow
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
      onEvent={() => {}}
    />
  )
}

Props

Name	Type	Description
companyId Required	string	The associated company identifier.
defaultValues	object	Default values for individual flow step components
onEvent Required		See events table for each subcomponent to see available events.

Using Company Subcomponents

Employee onboarding components can be used to compose your own workflow, or can be rendered in isolation. For guidance on creating a custom workflow, see docs on composition.

Available Subcomponents

CompanyOnboarding.AssignSignatory
CompanyOnboarding.CreateSignatory
CompanyOnboarding.InviteSignatory
CompanyOnboarding.Industry
CompanyOnboarding.DocumentSigner
CompanyOnboarding.FederalTaxes
CompanyOnboarding.PaySchedule
CompanyOnboarding.Locations
CompanyOnboarding.BankAccount
CompanyOnboarding.StateTaxes
CompanyOnboarding.OnboardingOverview

Legacy imports via Company.* (e.g. Company.OnboardingFlow) continue to work.

Company.AssignSignatory

A component allowing users to choose between creating a new signatory with full details or inviting someone else to become the signatory.

For more granular control, you can use Company.CreateSignatory or Company.InviteSignatory directly.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.AssignSignatory companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
signatoryId	string	ID of the signatory. When set and matching the current signatory, the create form will pre-populate with their information for editing.
defaultValues	object	Default values containing `create` and/or `invite` objects for their respective forms. See CreateSignatory and InviteSignatory for field details.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_ASSIGN_SIGNATORY_MODE_UPDATED	Fired when the user switches between create/invite modes	Mode string ('createSignatory' or 'inviteSignatory')
COMPANY_ASSIGN_SIGNATORY_DONE	Fired when the signatory assignment process is complete	None
COMPANY_SIGNATORY_CREATED	Fired when a new signatory is created (create mode)	Response from the create signatory API request
COMPANY_SIGNATORY_UPDATED	Fired when an existing signatory is updated (create mode)	Response from the update signatory API request
COMPANY_SIGNATORY_INVITED	Fired when a signatory invitation is sent (invite mode)	Response from the invite signatory API request

Company.CreateSignatory

A standalone form for creating a new signatory with full personal details including name, contact information, SSN, and home address. Use this component when you want to provide only the create signatory flow without the invite option.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.CreateSignatory companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
signatoryId	string	ID of the signatory. When set and matching an existing signatory, the form will pre-populate with their information for editing.
defaultValues	object	Default values for form fields: `firstName`, `lastName`, `email`, `title`, `phone`, `birthday`, `ssn`, `street1`, `street2`, `city`, `state`, `zip`. If signatory data is available via the API, defaultValues will be overwritten.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_SIGNATORY_CREATED	Fired when a new signatory is created successfully	Response from the create signatory API request
COMPANY_SIGNATORY_UPDATED	Fired when an existing signatory is updated successfully	Response from the update signatory API request
COMPANY_CREATE_SIGNATORY_DONE	Fired when the create signatory process is complete	None

Company.InviteSignatory

A standalone form for inviting someone else to become the company signatory. The invited person will receive an email to complete their signatory information. Use this component when you want to provide only the invite signatory flow without the create option.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.InviteSignatory companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
defaultValues	object	Default values for form fields: `firstName`, `lastName`, `email`, `confirmEmail`, `title`.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_SIGNATORY_INVITED	Fired when a signatory is successfully invited to the company	Response from the invite signatory API request
COMPANY_INVITE_SIGNATORY_DONE	Fired when the invite signatory process is complete	None

Company.DocumentSigner

Provides an interface for company representatives to read and sign required company documents. The component handles document listing, signatory management, and document signing workflow.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.DocumentSigner companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
signatoryId	string	ID of the signatory. When this is set and it matches the signatory ID of the currently saved signatory it is assumed the user is the signatory. This means fields are pre populated in the signature form with their information and they are able to sign documents.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_VIEW_FORM_TO_SIGN	Fired when a user selects a form to sign from the document list	Called with response from get company form endpoint
COMPANY_FORM_EDIT_SIGNATORY	Fired when user requests to change the document signatory	Called with response from create signatory endpoint
COMPANY_FORMS_DONE	Fired when user completes the document signing process	None
COMPANY_SIGN_FORM	Fired when a form is successfully signed	Response from the sign company form API request
COMPANY_SIGN_FORM_DONE	Fired when the form signing process is complete	None
COMPANY_SIGN_FORM_BACK	Fired when user navigates back from the signature form	None
COMPANY_ASSIGN_SIGNATORY_MODE_UPDATED	Fired when the signatory assignment mode changes (create/invite)	Mode string ('create_signatory' or 'invite_signatory')
COMPANY_ASSIGN_SIGNATORY_DONE	Fired when the signatory assignment process is complete	None
COMPANY_SIGNATORY_CREATED	Fired when a new signatory is created successfully	Response from the create signatory API request
COMPANY_SIGNATORY_UPDATED	Fired when an existing signatory is updated successfully	Response from the update signatory API request
COMPANY_SIGNATORY_INVITED	Fired when a signatory is successfully invited to the company	Response from the invite signatory API request

Company.FederalTaxes

A component for adding company federal tax information including EIN, tax payer type, filing form, and legal name.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.FederalTaxes companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
defaultValues	{ legalName?: string taxPayerType?: string filingForm?: string }	Default values for the company federal taxes form fields. If company data for these fields is available via the API, defaultValues will be overwritten.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_FEDERAL_TAXES_UPDATED	Fired when federal tax details are successfully updated	Response from the update federal tax details API request
COMPANY_FEDERAL_TAXES_DONE	Fired when the federal tax update process is complete	None

Company.PaySchedule

A component for managing company pay schedules, including creating, editing, and viewing pay schedules with preview functionality.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return <Company.PaySchedule companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
defaultValues	{ frequency?: string (one of `Every Week`, `Every other week`, `Twice per month`, or `Monthly`), anchorPayDate?: string, anchorEndOfPayPeriod?: string, day1?: number, day2?: number, customName?: string }	Default values for the pay schedule form fields. If company data for these fields is available via the API, defaultValues will be overwritten.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
PAY_SCHEDULE_CREATED	Fired when a new pay schedule is successfully created	Response from the create pay schedule API request
PAY_SCHEDULE_UPDATED	Fired when an existing pay schedule is successfully updated	Response from the update pay schedule API request

Company.Locations

A component for managing company addresses, including mailing and filing address.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return <Company.Locations companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
defaultValues
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_LOCATION_CREATE	Fired when a user chooses to add new location	None
COMPANY_LOCATION_CREATED	Fired when a new location is created	Response from the create a company location API request
COMPANY_LOCATION_EDIT	Fired when a user selects existing location for editing	`{uuid:string}`
COMPANY_LOCATION_UPDATED	Fired when locations has been successfully edited	Response from the update a location API request
COMPANY_LOCATION_DONE	Fired when user chooses to proceed to a next step	None

Company.BankAccount

A component for managing company bank account

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return <Company.BankAccount companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
defaultValues
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_BANK_ACCOUNT_CHANGE	Fired when a user chooses to change existing bank account	None
COMPANY_BANK_ACCOUNT_CREATED	Fired when a new bank account is created	Response from the create a company bank account API request
COMPANY_BANK_ACCOUNT_VERIFY	Fired when a user chooses to verify bank account (after micro-deposits are made)	None
COMPANY_BANK_ACCOUNT_VERIFIED	Fired when bank account has been successfully verifyed	Response from the verify a company bank account API request
COMPANY_BANK_ACCOUNT_DONE	Fired when user chooses to proceed to a next step	None

Company.StateTaxes

An orchestrated component for managing company state taxes setup. Internally uses a state machine to switch between a list view and an edit form. For more granular control, you can use Company.StateTaxesList or Company.StateTaxesForm directly.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return <Company.StateTaxes companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_STATE_TAX_EDIT	Fired when a user chooses to edit requirements for a specific state	`{ state: string }`
COMPANY_STATE_TAX_UPDATED	Fired when a state tax setup has been successfully submitted	Response from the create a company update state tax requirements API
COMPANY_STATE_TAX_DONE	Fired when user chooses to proceed to a next step	None

Company.StateTaxesForm

A standalone form component for editing state tax requirements for a specific state. This is the lower-level building block used internally by Company.StateTaxes for its edit view. Use this component directly when you need full control over navigation between the list and form views.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.StateTaxesForm
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
      state="CA"
      onEvent={() => {}}
    />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
state (Required)	string	The state abbreviation to edit tax requirements for.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_STATE_TAX_UPDATED	Fired when a state tax setup has been successfully submitted	Response from the create a company update state tax requirements API
CANCEL	Fired when the user cancels editing	None

Company.StateTaxesList

A standalone component that displays the list of state tax requirements for a company. This is the lower-level building block used internally by Company.StateTaxes for its list view. Use this component directly when you need full control over navigation between the list and form views.

import { Company } from '@gusto/embedded-react-sdk'

function MyComponent() {
  return (
    <Company.StateTaxesList companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_STATE_TAX_EDIT	Fired when a user chooses to edit requirements for a specific state	`{ state: string }`
COMPANY_STATE_TAX_DONE	Fired when user chooses to proceed to a next step	None

FilesExpand file tree

company-onboarding.md

Latest commit

History

company-onboarding.md

File metadata and controls

Overview

Implementation

Props

Using Company Subcomponents

Available Subcomponents

Company.AssignSignatory

Props

Events

Company.CreateSignatory

Props

Events

Company.InviteSignatory

Props

Events

Company.DocumentSigner

Props

Events

Company.FederalTaxes

Props

Events

Company.PaySchedule

Props

Events

Company.Locations

Props

Events

Company.BankAccount

Props

Events

Company.StateTaxes

Props

Events

Company.StateTaxesForm

Props

Events

Company.StateTaxesList

Props

Events