Form Components

Form components are complete, self-contained workflows with built-in validation, API integration, and standardized events. Each form handles its own state, error display, and loading feedback.

Overview

CreateAccount

Dynamic account creation form that renders business or consumer fields based on the resolved profile/recipe.

Web Component

<alviere-create-account
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  public-certificate="your-public-certificate"
  public-certificate-id="your-certificate-id"
  debug="true"
></alviere-create-account>

Svelte

<script lang="ts">
  import { CreateAccount } from '@alviere/ui';
</script>

<CreateAccount
  {jwt}
  {businessUuid}
  publicCertificate="your-public-certificate"
  publicCertificateId="your-certificate-id"
  config={{ formData: { profile: 'PAYEE' } }}
  on:account={(e) => console.log(e.detail)}
  on:form-success={(e) => console.log(e.detail)}
  on:form-error={(e) => console.error(e.detail)}
  on:form-barrier={(e) => console.log(e.detail)}
  on:form-action-required={(e) => console.log(e.detail)}
/>

Props

Events

Behavioral notes

Returning user detection: On mount, the component checks whether the JWT subject already has an active account. If so, it skips the form and fires form-success with skipped: true.

Pending user mode: If the account exists but requires additional fields, form-action-required fires and only the missing fields are shown for editing.

CreateConsumerAccount / CreateBusinessAccount

Thin wrappers around CreateAccount with the account type fixed. Accept the same props and dispatch the same events.

Web Components

<alviere-create-consumer-account
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  public-certificate="your-public-certificate"
  public-certificate-id="your-certificate-id"
></alviere-create-consumer-account>

<alviere-create-business-account
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
  public-certificate="your-public-certificate"
  public-certificate-id="your-certificate-id"
></alviere-create-business-account>

Svelte

<CreateConsumerAccount {jwt} {businessUuid} />
<CreateBusinessAccount {jwt} {businessUuid} />

Props

Same as CreateAccount, plus:

Events

Same as CreateAccount: account, form-success, form-error, form-barrier, form-action-required. Payload shapes are identical.

AddBankAccount

Renders the user's existing bank accounts and allows adding a new one. Fires payment-method when a bank account is linked, then form-success when the user confirms their selection.

Web Component

<alviere-add-bank-account
  jwt="your-jwt-token"
  account-uuid="your-account-uuid"
  public-certificate="your-public-certificate"
  public-certificate-id="your-certificate-id"
></alviere-add-bank-account>

Svelte

<script lang="ts">
  import { AddBankAccount } from '@alviere/ui';
</script>

<AddBankAccount
  {jwt}
  {accountUuid}
  config={{ requireRoutingAndAccountConfirmation: true }}
  on:payment-method={(e) => console.log(e.detail)}
  on:form-success={(e) => console.log(e.detail)}
/>

Props

Events

Behavioral notes

Routing number validation happens asynchronously as the user types. An invalid or unrecognised routing number shows an error before form submission.

Pending bank account: If the selected bank account has PENDING status, an informational message is shown before the user can continue.

StartOnboarding

Submits the onboarding action for an account. Optionally gates continuation on legal text acceptance.

Web Component

<alviere-start-onboarding
  jwt="your-jwt-token"
  business-uuid="your-business-uuid"
></alviere-start-onboarding>

Svelte

<script lang="ts">
  import { StartOnboarding } from '@alviere/ui';
</script>

<StartOnboarding
  {jwt}
  {businessUuid}
  config={{
    legalTexts: { required: true, documents: [{ type: 'TERMS_AND_CONDITIONS' }] }
  }}
  on:form-success={(e) => console.log(e.detail)}
  on:form-barrier={(e) => console.log(e.detail)}
  on:form-error={(e) => console.error(e.detail)}
/>

Props

Events

Behavioral notes

accepted_legal_documents in the form-success payload contains the UUIDs of any legal documents the user accepted. Pass these downstream if your backend needs consent records.

StartOnboarding does not dispatch form-action-required. An ACTION_REQUIRED account status is treated as an error.

CheckoutConfirm

Displays a payment summary — amount, fees, selected bank account — and collects optional legal consent before the user confirms payment. This component makes no API calls itself; it is a pure UI confirmation step that fires form-success when the user submits.

Web Component

<alviere-checkout-confirm
  jwt="your-jwt-token"
  account-uuid="your-account-uuid"
  payment-method-uuid="your-payment-method-uuid"
  payment-method-last4="1234"
  amount="100.00"
></alviere-checkout-confirm>

Svelte

<script lang="ts">
  import { CheckoutConfirm } from '@alviere/ui';
</script>

<CheckoutConfirm
  {jwt}
  {accountUuid}
  {paymentMethodUuid}
  {paymentMethodLast4}
  amount="100.00"
  config={{ feeAmount: 2.5 }}
  on:form-success={(e) => console.log(e.detail)}
/>

Props

Events

CheckoutConfirm does not dispatch form-error or form-barrier. The form-success payload contains only the confirmed amount and any accepted legal document UUIDs — submitting the actual payment to the API is the caller's responsibility.

Legacy Forms

AddDossier and AddPaymentInstrument remain in the package for backward compatibility but are marked as legacy/stale in source and excluded from active type-checking. Do not use them in new integrations.

Related