company-onboarding.md

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

Company 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.DocumentList
• CompanyOnboarding.SignatureForm
• CompanyOnboarding.FederalTaxes
• CompanyOnboarding.PaySchedule
• CompanyOnboarding.Locations
• CompanyOnboarding.LocationForm
• CompanyOnboarding.BankAccount
• CompanyOnboarding.StateTaxes
• CompanyOnboarding.StateTaxesForm
• CompanyOnboarding.StateTaxesList
• 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.Industry

A component for selecting and saving the company's industry classification (NAICS code). The selector presents a searchable list of industry options for the company.

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

function MyComponent() {
  return <Company.Industry 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_INDUSTRY_SELECTED	Fired when an industry is selected and saved	industry field from the Update industry selection API request

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.DocumentList

A standalone component that displays the list of company documents to be signed and lets the user manage signatories. This is the lower-level building block used internally by Company.DocumentSigner for its list view. Use this component directly when you need full control over navigation between the document list and the signature form.

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

function MyComponent() {
  return (
    <Company.DocumentList 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 user is treated as the signatory and is allowed 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	Current signatory entity
COMPANY_FORMS_DONE	Fired when user completes the document signing process	None

Company.SignatureForm

A standalone form for signing an individual company document. This is the lower-level building block used internally by Company.DocumentSigner for its signing view. Use this component directly when you need full control over navigation between the document list and the signature form (e.g. you are routing the user yourself after they select a form from Company.DocumentList).

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

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

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
formId (Required)	string	The identifier of the form the user is signing.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
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 the user navigates back from the signature form	None

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

An orchestrated component for managing company addresses, including mailing and filing address. Internally uses a state machine to switch between a list view and a create/edit form. For more granular control, you can use Company.LocationForm directly.

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.LocationForm

A standalone form component for creating a new company location or editing an existing one. This is the lower-level building block used internally by Company.Locations for its create/edit views. Use this component directly when you need full control over navigation between the list and form views.

Pass a locationId to edit an existing location; omit it to create a new location.

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

function MyComponent() {
  return (
    <Company.LocationForm
      companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
      locationId="d3b4c1e2-1234-5678-9abc-def012345678"
      onEvent={() => {}}
    />
  )
}

Props

Name	Type	Description
companyId (Required)	string	The associated company identifier.
locationId	string	When provided, the form edits this location. Omit to create a new location.
onEvent (Required)		See events table for available events.

Events

Event type	Description	Data
COMPANY_LOCATION_CREATED	Fired when a new location is created	Response from the create a company location API request
COMPANY_LOCATION_UPDATED	Fired when a location has been successfully edited	Response from the update a location API request
CANCEL	Fired when the user cancels editing	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 CompanyOnboarding.StateTaxesList or CompanyOnboarding.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

Company.OnboardingOverview

Displays the company's overall onboarding status. Shows completed steps and remaining requirements, providing a high-level summary of where the company is in the onboarding process. Used as the landing/summary screen of the onboarding flow.

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

function MyComponent() {
  return (
    <Company.OnboardingOverview
      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_OVERVIEW_CONTINUE	Fired when the user chooses to continue to the next outstanding onboarding requirement	None
COMPANY_OVERVIEW_DONE	Fired when the user signals they are done with the overview screen (typically after onboarding ends)	None