Form Components

Form components provide complete, ready-to-use forms for common financial operations with built-in validation, API integration, and user feedback.

CreateConsumerAccount

Complete consumer account creation form with comprehensive validation and alviere Core integration.

Web Component Usage

<alviere-create-consumer-account
  jwt="your-jwt-token"
  account-uuid="account-uuid-here"
  public-certificate="retrieved-public-certificate"
  public-certificate-id="retrieved-public-certificate-id"
  debug="true"
  isinflow="false">
</alviere-create-consumer-account>

Svelte Component Usage

<script>
  import { CreateConsumerAccount } from '@alviere/ui-svelte';
  
  const jwt = 'your-jwt-token';
  const accountUuid = 'account-uuid-here';
</script>

<CreateConsumerAccount 
  {jwt}
  {accountUuid}
  publicCertificate="retrieved-public-certificate"
  publicCertificateId="retrieved-public-certificate-id"
  debug={true}
  isinflow={false}
  on:success={(event) => console.log('Account created:', event.detail)}
  on:error={(event) => console.error('Creation failed:', event.detail)}
/>

Props

Events

Event Handlers (Alternative to Event Listeners):

You can also use callback props instead of event listeners:

Form Fields

Personal Information

• First Name: Required, alphabetic validation
• Last Name: Required, alphabetic validation
• Email: Required, email validation

Features

• Complete Validation: Client-side validation for all required fields
• Real-time Feedback: Immediate validation feedback
• API Integration: Direct integration with alviere Core
• Error Handling: Comprehensive error handling and display
• Success Feedback: Clear confirmation when account is created
• Responsive Design: Works on all device sizes

CreateBusinessAccount

Complete business account creation form with comprehensive validation and alviere Core integration.

Web Component Usage

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

Svelte Component Usage

<script>
  import { CreateBusinessAccount } from '@alviere/ui-svelte';
  
  const jwt = 'your-jwt-token';
  const accountUuid = 'account-uuid-here';
</script>

<CreateBusinessAccount 
  {jwt}
  {accountUuid}
  publicCertificate="retrieved-public-certificate"
  publicCertificateId="retrieved-public-certificate-id"
  debug={true}
  isinflow={false}
  on:success={(event) => console.log('Account created:', event.detail)}
  on:error={(event) => console.error('Creation failed:', event.detail)}
/>

Props

Events

Event Handlers (Alternative to Event Listeners):

You can also use callback props instead of event listeners:

Form Fields

Business Information

• Business Type: Required, dropdown selection
• Business Name: Required, legal business name
• Doing Business As (DBA): Optional, if different from legal name
• State of Incorporation: Required, dropdown selection
• Country of Incorporation: Required, dropdown selection
• Incorporation Date: Optional, date validation (YYYY-MM-DD format)
• EIN (Employer Identification Number): Optional, EIN validation

Features

• Complete Validation: Client-side validation for all required fields
• Real-time Feedback: Immediate validation feedback
• API Integration: Direct integration with alviere Core
• Error Handling: Comprehensive error handling and display
• Success Feedback: Clear confirmation when account is created
• Responsive Design: Works on all device sizes

AddBankAccount

Bank account addition form supporting multiple international account types.

Web Component Usage

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

Svelte Component Usage

<script>
  import { AddBankAccount } from '@alviere/ui-svelte';
  
  const jwt = 'your-jwt-token';
  const accountUuid = 'account-uuid-here';
</script>

<AddBankAccount
  {jwt}
  {accountUuid}
  publicCertificate="retrieved-public-certificate"
  publicCertificateId="retrieved-public-certificate-id"
  debug={true}
  on:success={(event) => console.log('Bank account added:', event.detail)}
  on:error={(event) => console.error('Addition failed:', event.detail)}
/>

Props

Events

Event Handlers (Alternative to Event Listeners):

You can also use callback props instead of event listeners:

Supported Bank Account Types

ACH (Automated Clearing House) - USA

• Routing Number: 9-digit routing number with bank lookup
• Account Number: Bank account number
• Features: Automatic bank information display, routing number validation

Form Fields

Account Information

• Country: Required, dropdown selection (affects available account types)
• Currency: Required, dropdown selection
• Bank Account Type: Required, dropdown selection
• External ID: Optional, auto-generated for testing

Account-Specific Fields

• Routing Number: For ACH accounts, with bank lookup
• Account Number: Required for all account types
• Institution Number: For EFT accounts
• Transit Number: For EFT accounts
• IBAN: For IBAN accounts
• SWIFT Code: For SWIFT/CLABE accounts

Features

• Multi-Country Support: Handles different banking systems
• Real-time Validation: Immediate field validation
• Bank Information Lookup: Automatic bank details for ACH accounts
• Auto-generation: External ID auto-generated for development
• Form Validation: Complete form validation before submission
• Loading States: Visual feedback during API calls

AddPaymentInstrument

Payment instrument creation form for credit cards and other payment methods.

Web Component Usage

<alviere-add-payment-instrument
  jwt="your-jwt-token"
  account-uuid="account-uuid-here"
  public-certificate="retrieved-public-certificate"
  public-certificate-id="retrieved-public-certificate-id"
  debug="true">
</alviere-add-payment-instrument>

Svelte Component Usage

<script>
  import { AddPaymentInstrument } from '@alviere/ui-svelte';
  
  const jwt = 'your-jwt-token';
  const accountUuid = 'account-uuid-here';
</script>

<AddPaymentInstrument
  {jwt}
  {accountUuid}
  publicCertificate="retrieved-public-certificate"
  publicCertificateId="retrieved-public-certificate-id"
  debug={true}
  on:success={(event) => console.log('Payment instrument created:', event.detail)}
  on:error={(event) => console.error('Creation failed:', event.detail)}
/>

Props

Events

Event Handlers (Alternative to Event Listeners):

You can also use callback props instead of event listeners:

Form Fields

Card Information

• Card Number (PAN): Required, credit card validation with type detection
• Expiry Month/Year: Required, expiry validation
• Security Code (CVV): Required, CVV validation
• Name on Card: Required, cardholder name

Billing Address

• Address Line 1: Required
• Address Line 2: Optional
• City: Required
• State/Province: Required
• Postal Code: Required, postal code validation
• Country: Required, dropdown selection

Additional Information

• Phone Number: Optional, phone validation
• Email Address: Optional, email validation
• External ID: Optional, your internal reference
• Metadata: Optional, JSON string for additional data

Features

• Card Type Detection: Automatically detects Visa, Mastercard, Amex, etc.
• Real-time Validation: Immediate validation feedback
• Address Validation: Postal code and address validation
• Encryption: Card data automatically encrypted before transmission
• Success Feedback: Shows creation confirmation with payment instrument ID
• Error Handling: Comprehensive error handling and display

Common Form Features

All form components share these common features:

Authentication & Security

• JWT Integration: All forms require valid JWT tokens
• alviere Core Integration: Direct API integration with alviere services
• Data Encryption: Sensitive data encrypted before transmission
• Secure Communication: All communication uses HTTPS

Validation & User Experience

• Client-side Validation: Immediate feedback for form errors
• Real-time Updates: Validation state updates as user types
• Loading States: Visual feedback during API operations
• Success Feedback: Clear confirmation when operations complete
• Error Handling: User-friendly error messages and recovery options

Accessibility & Design

• ARIA Support: Full accessibility support for screen readers
• Keyboard Navigation: Complete keyboard support
• Responsive Design: Works on all device sizes
• Consistent Styling: Unified look across all forms
• CSS Customization: Easy theming with CSS custom properties

Form Management

• Auto-save: Form data preserved during navigation
• Progress Tracking: Visual progress indicators for multi-step forms
• Field Dependencies: Dynamic field requirements based on selections
• Data Persistence: Form state maintained across page reloads

Integration Patterns

• Event-driven: All forms emit standard events for integration
• Callback Support: Success/error callbacks for custom handling
• Flow Integration: Designed to work within MultiStepFlow
• Standalone Usage: Can be used independently or in flows