Flow Components

MultiStepFlow is a configurable orchestrator that renders form steps in sequence, accumulates results across steps, and dispatches standardized events when steps complete or the flow finishes.

Available steps

Step type	Description
`CREATE_ACCOUNT`	Generic account creation (business or consumer, resolved from profile)
`CREATE_CONSUMER_ACCOUNT`	Consumer account creation (fixed intent)
`CREATE_BUSINESS_ACCOUNT`	Business account creation (fixed intent)
`ADD_BANK_ACCOUNT`	Add or select a bank account for payment
`START_ONBOARDING`	Submit onboarding and optional legal consent
`CHECKOUT_CONFIRM`	Payment summary and confirmation
`ADD_DOSSIER`	(legacy — do not use in new integrations)
`ADD_PAYMENT_INSTRUMENT`	(legacy — do not use in new integrations)

How data flows between steps

MultiStepFlow passes data from each completed step into the next automatically. You do not set accountUuid or paymentMethodUuid anywhere in the config — the flow resolves them from accumulated step results.

Data	Source step	Consumed by
`account_uuid`	`CREATE_ACCOUNT` / `CREATE_CONSUMER_ACCOUNT` / `CREATE_BUSINESS_ACCOUNT`	All subsequent steps that need an account
`payment_method_uuid`, `payment_method_last4`	`ADD_BANK_ACCOUNT`	`CHECKOUT_CONFIRM`

A typical onboarding-to-payment flow wires up correctly with only the step types defined — no manual data plumbing required.

Component reference

Web Component

<alviere-multi-step-flow
  config='{
    "steps": [
      { "type": "CREATE_ACCOUNT", "label": "Create Account" },
      { "type": "START_ONBOARDING", "label": "Start Onboarding" },
      { "type": "ADD_BANK_ACCOUNT", "label": "Add Bank Account" },
      { "type": "CHECKOUT_CONFIRM", "label": "Checkout" }
    ],
    "amount": 100.50,
    "showProgress": true
  }'
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  public-certificate="your-public-certificate"
  public-certificate-id="your-certificate-id"
></alviere-multi-step-flow>

Props

Prop	Type	Required	Description
`config`	`FlowConfig`	Yes	Flow definition (steps, labels, display options)
`jwt`	`string`	Yes	Sierra API v3 JWT
`businessUuid`	`string`	Yes	Business account UUID
`publicCertificate`	`string`	Yes	RSA public certificate (PEM)
`publicCertificateId`	`string`	Yes	Certificate identifier
`debug`	`boolean \| 'true' \| 'false'`	No	Enable debug logging
`amount`	`string \| number`	No	Top-level amount override (passed to all steps)

Events

Event	Payload	Description
`flow-step-complete`	`StepEventDetail`	A step completed successfully
`flow-step-error`	`StepEventDetail`	A step failed
`flow-complete`	`FlowEventDetail & { result: any }`	All steps completed
`flow-reset`	`FlowEventDetail`	Flow was reset

Callback props

Prop	Type
`onflowcomplete`	`(detail: FlowEventDetail) => void`
`onstepcomplete`	`(detail: StepEventDetail) => void`
`onsteperror`	`(detail: StepEventDetail) => void`
`onreset`	`() => void`

Legacy Svelte-dispatch events (stepSuccess, stepError, complete, reset) are still present for backward compatibility. Use the standardized events above for new integrations.

FlowConfig reference

interface FlowConfig {
  steps: FlowStep[];
  amount?: number | string;
  title?: string;
  description?: string;
  profile?: string;
  labels?: FlowLabels;
  allowSkip?: boolean;
  showProgress?: boolean;
  showNavigation?: boolean;
}

interface FlowStep {
  type: StepType;
  label: string;
  config?: Record<string, any>;
}

Display options

Field	Default	Description
`showProgress`	`true`	Show the step progress indicator
`showNavigation`	`true`	Show the previous/next navigation buttons
`allowSkip`	`false`	Allow jumping ahead to incomplete steps

Profile

profile controls which recipe the flow loads for form layout and field defaults. It can be set at three levels, resolved in this order:

config.profile — applies to the whole flow
step.config.profile — overrides for a specific step
step.config.formData.profile — embedded in the step's form data

Profile names are client-specific — they come from your Alviere program setup, not from a fixed SDK list. See Profiles & Recipes for a full explanation.

Top-level labels

Set under config.labels (not inside a step's config).

Key	Aliases	Default
`finalText`	—	`Payment in process.` (or `Onboarding in process.` when flow includes `START_ONBOARDING`)
`finalMessage`	—	(empty)
`barrierTitle`	`barrierTitleLabel`	`Manual Review`
`barrierMessage`	`barrierMessageLabel`	`Your account is being reviewed. You will be able to continue once the review is complete.`
`criticalErrorTitle`	`criticalErrorTitleLabel`	`Unable to continue`
`criticalErrorMessage`	`criticalErrorMessageLabel`	`An error occurred. Please try again later.`
`offlineMessage`	`offlineMessageLabel`	(built-in offline overlay text)

Type definitions

type StepType =
  | 'CREATE_ACCOUNT'
  | 'CREATE_CONSUMER_ACCOUNT'
  | 'CREATE_BUSINESS_ACCOUNT'
  | 'ADD_BANK_ACCOUNT'
  | 'ADD_DOSSIER'            // legacy — do not use in new integrations
  | 'ADD_PAYMENT_INSTRUMENT' // legacy — do not use in new integrations
  | 'CHECKOUT_CONFIRM'
  | 'START_ONBOARDING';

type StepStatus =
  | 'INCOMPLETE'
  | 'COMPLETE'
  | 'IN_PROGRESS'
  | 'ERROR'
  | 'INFO_BLOCKED'
  | 'ACTION_REQUIRED';

Complete example

A full onboarding + payment flow with customized labels:

{
  "labels": {
    "finalText": "Onboarding in process.",
    "finalMessage": "Verification may take up to 24 hours. We will notify you once complete.",
    "barrierTitle": "Review in progress",
    "barrierMessage": "Your information is under review. You can continue once the review is complete."
  },
  "steps": [
    {
      "type": "CREATE_ACCOUNT",
      "label": "Create Account",
      "config": {
        "formData": { "profile": "PAYEE" },
        "fieldLabels": {
          "business_name": "Company Legal Name",
          "ein": "Employer Identification Number (EIN)"
        },
        "fieldErrorMessages": {
          "ein": {
            "required": "EIN is required",
            "pattern": "EIN must match XX-XXXXXXX"
          }
        },
        "groupLabels": {
          "business_information": "Business Information"
        },
        "labels": {
          "headingLabel": "Create Business Account",
          "createAccountLabel": "Create Business Account",
          "creatingAccountLabel": "Creating Business Account..."
        }
      }
    },
    {
      "type": "START_ONBOARDING",
      "label": "Start Onboarding",
      "config": {
        "labels": {
          "legalTextsPromptLabel": "Review and accept the terms to continue.",
          "startOnboardingButtonLabel": "Start Onboarding"
        }
      }
    },
    {
      "type": "ADD_BANK_ACCOUNT",
      "label": "Add Bank Account",
      "config": {
        "labels": {
          "addBankAccountTitleLabel": "Add Bank Account",
          "finalizeButton": "Continue to Payment"
        }
      }
    },
    {
      "type": "CHECKOUT_CONFIRM",
      "label": "Checkout",
      "config": {
        "labels": {
          "agreeToTermsLabel": "I accept the terms and conditions",
          "payButtonLabel": "Pay now"
        }
      }
    }
  ]
}

Step config reference

Each step accepts a config object inside its FlowStep definition. The sections below list the supported keys per step.

Shared config blocks

These blocks are available on all steps that support them:

Block	Purpose
`fieldLabels`	Override field labels by field key
`fieldMeta`	Override per-field `{ label, helpText }`
`fieldErrorMessages`	Override validation error messages by field and rule key
`labels`	Override non-field UI text (headings, button copy, status messages)
`groupLabels`	Override section group headings (`CREATE_ACCOUNT` only)

{
  "fieldLabels": { "business_name": "Company Legal Name" },
  "fieldMeta": {
    "ein": { "label": "Tax ID", "helpText": "Your 9-digit federal tax identifier." }
  },
  "fieldErrorMessages": {
    "ein": { "required": "Tax ID is required", "pattern": "Must match XX-XXXXXXX" }
  },
  "labels": { "createAccountLabel": "Create Business Profile" }
}

`fieldErrorMessages` rule keys

These rule keys are supported across all steps for fieldErrorMessages:

required · email · phone · url · numeric · alphabetic · alphanumeric · uuid · pattern · minLength · maxLength · minValue · maxValue · postalCode · date · match

CREATE_ACCOUNT / CREATE_CONSUMER_ACCOUNT / CREATE_BUSINESS_ACCOUNT

Supported config keys

formData · fields · statusPolicy · fieldLabels · fieldMeta · fieldErrorMessages · labels · groupLabels

labels keys

Key	Default
`headingLabel`	`Create Business Account` / `Create Consumer Account`
`createAccountLabel`	`Create Business Account` / `Create Consumer Account`
`creatingAccountLabel`	`Creating Business Account...` / `Creating Consumer Account...`
`updateAccountLabel`	`Update Business Account` / `Update Consumer Account`
`updatingAccountLabel`	`Updating Business Account...` / `Updating Consumer Account...`
`accountVerifiedProceedingLabel`	`Account verified, proceeding...`
`checkingAccountStatusLabel`	`Checking account status...`
`validatingAccountLabel`	`Your account is being validated...`
`waitingForAccountActivationLabel`	`Waiting for account activation...`
`fixErrorsLabel`	`Please fix the errors above`

groupLabels

Use the recipe layout group keys. Common values:

{ "groupLabels": { "business_information": "Company Details" } }

Equivalent shorthand via labels:

{ "labels": { "group.business_information": "Company Details" } }

Field keys

Common built-in keys for fieldLabels, fieldMeta, and fieldErrorMessages:

Business: business_name, business_type, country_of_incorporation, state_of_incorporation, nature_of_business, ein, email_address, phone_number, website, incorporation_date, line_1, line_2, city, state, postal_code, country
Consumer: first_name, last_name, email_address, phone_number, date_of_birth, ssn, occupation, line_1, line_2, city, state, postal_code, country

ein uses a custom validator. To override its format error specifically, use fieldErrorMessages.ein.pattern.

Barrier copy

Use top-level flow labels.barrierTitle / labels.barrierMessage for barrier text that applies across the whole flow. statusPolicy.barrierTitle / statusPolicy.barrierMessage remain available as a step-level fallback.

ADD_BANK_ACCOUNT

Supported config keys

formData · fields · requireRoutingAndAccountConfirmation · fieldLabels · fieldMeta · fieldErrorMessages · labels

labels keys

Key	Default
`addBankAccountTitleLabel`	`Add Bank Account`
`addBankAccountButtonLabel`	`Add Bank Account`
`addingBankAccountLabel`	`Adding...`
`addNewBankAccountLabel`	`Add New Bank Account`
`backToBankAccountsLabel`	`Back to Bank Accounts`
`bankAccountsTitleLabel`	`Your Bank Accounts`
`finalizeButton`	`Continue to Payment`
`primaryBadgeLabel`	`Primary`
`achBadgeLabel`	`ACH`
`makePrimaryBankAccountLabel`	`Make this my primary bank account`
`checkingAccountTypeOptionLabel`	`Checking`
`savingsAccountTypeOptionLabel`	`Savings`
`accountNumberLabel`	`Account Number`
`accountTypeLabel`	`Account Type`
`routingSwiftLabel`	`Routing/SWIFT`
`bankLabel`	`Bank`
`regionLabel`	`Region`
`descriptionLabel`	`Description`
`routingHelpAriaLabel`	`Where to find your routing number`
`routingHelpModalTitleLabel`	`Where to find your routing number`
`routingHelpDescriptionLabel`	`Your routing number is the first 9 digits located on the bottom left of your checks.`
`fixErrorsLabel`	`Please fix the errors above`

Field keys

ach_account_type · ach_routing_number · ach_account_number · confirm_routing_number · confirm_account_number

START_ONBOARDING

Supported config keys

statusPolicy · legalTexts · labels

labels keys

Key	Default
`startOnboardingButtonLabel`	`Start Onboarding`
`startingOnboardingLabel`	`Starting onboarding...`
`legalTextsPromptLabel`	`Review and accept the terms below to continue.`
`checkingAccountStatusLabel`	`Checking account status...`
`waitingForAccountActivationLabel`	`Waiting for account activation...`

Barrier copy

Same as CREATE_ACCOUNT — use top-level flow labels.barrierTitle / labels.barrierMessage for shared copy.

CHECKOUT_CONFIRM

Supported config keys

amountEditable · feeAmount · legalTexts · labels

labels keys

Key	Default
`payButtonLabel`	`Pay`
`legalTextsPromptLabel`	`Review and accept the terms below to continue.`
`agreeToTermsLabel`	`I agree to the terms and conditions`
`summaryAriaLabel`	`Payment summary`
`summaryAmountLabel`	`Amount`
`summaryFeesLabel`	`Fees`
`summaryTotalLabel`	`Total`
`summaryBankAccountLabel`	`Bank account`
`summaryBankAccountUnavailableLabel`	`Not available`

Integration patterns

Handle flow events

const flow = document.querySelector('alviere-multi-step-flow');

flow.addEventListener('flow-step-complete', event => {
  console.log('Step complete:', event.detail.stepIndex, event.detail.stepType);
  console.log('Accumulated result:', event.detail.result);
});

flow.addEventListener('flow-step-error', event => {
  console.error('Step error:', event.detail.stepIndex, event.detail.error);
});

flow.addEventListener('flow-complete', event => {
  console.log('Flow complete:', event.detail.result);
});

flow.addEventListener('flow-reset', () => {
  console.log('Flow reset');
});

Capture domain events

Domain events from child steps bubble up through the flow element:

flow.addEventListener('account', event => {
  // Fired by CREATE_ACCOUNT steps
  console.log('Account created:', event.detail.account_uuid);
});

flow.addEventListener('payment-method', event => {
  // Fired by ADD_BANK_ACCOUNT steps
  console.log('Payment method selected:', event.detail.payment_method_uuid);
});

Form Components Link to a page in the guide Events Link to a page in the guide

Elements

Forms

Flow Components

Available steps

How data flows between steps

Component reference

Web Component

Props

Events

Callback props

FlowConfig reference

Display options

Profile

Top-level labels

Type definitions

Complete example

Step config reference

Shared config blocks

fieldErrorMessages rule keys

CREATE_ACCOUNT / CREATE_CONSUMER_ACCOUNT / CREATE_BUSINESS_ACCOUNT

Supported config keys

labels keys

groupLabels

Field keys

Barrier copy

ADD_BANK_ACCOUNT

Supported config keys

labels keys

Field keys

START_ONBOARDING

Supported config keys

labels keys

Barrier copy

CHECKOUT_CONFIRM

Supported config keys

labels keys

Integration patterns

Handle flow events

Capture domain events

Related

`fieldErrorMessages` rule keys