@authvia/payment-method-create 0.1.0

package/README.md

@@ -0,0 +1,336 @@
+# Authvia Payment Method Form Web Component
+
+A modern, accessible payment method web component built with Vue 3, TypeScript, and Vuetify 3. It is based on the address form component and provides validation, flexible styling options, and can be embedded as a web component or used as a Vue plugin.
+
+## Features
+
+- 🏠 **Google Places Autocomplete** - Intelligent address suggestions
+- 📱 **Responsive Design** - Works on all device sizes
+- 🎨 **Customizable Styling** - Vuetify theming and custom CSS variables
+- ✅ **Form Validation** - Real-time validation with error handling
+- 🔧 **Flexible Configuration** - Multiple props for customization
+- 🌐 **Internationalization Ready** - Built-in translation support
+- 🚀 **Web Component & Vue Module** - Use as web component or Vue plugin
+- 🔒 **Security Focused** - Input sanitization and error handling
+
+## Installation
+
+```bash
+npm install @authvia/customer-payment-method-create
+```
+
+## Usage
+
+### Web Component Usage (Standalone Build)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Payment Method Form Demo</title>
+
+    <!-- Vue runtime must be provided globally -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+
+    <!-- Vuetify CSS + MDI fonts (required, not bundled) -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/vuetify@3.5.0/dist/vuetify.min.css"
+      data-vuetify
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
+      data-mdi
+    />
+  </head>
+  <body>
+    <!-- Basic usage -->
+    <authvia-payment-method-form
+      data-azp="your-client-id"
+      data-embedded-submit-label="Save Payment Method"
+    ></authvia-payment-method-form>
+
+
+    <!-- Load the web component (use either .js or .umd.cjs) -->
+    <script src="https://cdn-development.authvia-nonprod.com/web-components/authvia-customer-payment-method-create/authvia-customer-payment-method-create.js"></script>
+  </body>
+</html>
+```
+
+### Vue Module Usage
+
+**Important:** The Vue module does **not** create a Vuetify instance. Your app must provide Vuetify and the MDI font CSS.
+
+#### Basic Vuetify Setup
+
+```typescript
+import { createApp } from 'vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import 'vuetify/styles'
+import '@mdi/font/css/materialdesignicons.css'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  theme: {
+    defaultTheme: 'light'
+  }
+})
+
+const app = createApp(App)
+app.use(vuetify)
+app.mount('#app')
+```
+
+#### Use the component (with Google Maps API key)
+
+```vue
+<template>
+  <div>
+    <AuthviaPaymentMethodForm
+      :dataAzp="clientId"
+      :dataEmbeddedSubmitLabel="submitLabel"
+      @submit="handleSubmit"
+      @success="handleSuccess"
+      @error="handleError"
+      @field-input="handleFieldInput"
+      @field-blur="handleFieldBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { AuthviaPaymentMethodForm } from '@authvia/customer-payment-method-create'
+import type { AddressFormData } from '@authvia/customer-payment-method-create'
+
+const clientId = ref('your-client-id')
+const submitLabel = ref('Save Payment Method')
+
+
+
+
+const handleSubmit = (data: AddressFormData) => {
+  console.log('Form submitted:', data)
+}
+
+const handleSuccess = (data: any) => {
+  console.log('Success:', data)
+}
+
+const handleError = (error: any) => {
+  console.error('Error:', error)
+}
+
+const handleFieldInput = (field: keyof AddressFormData, value: string) => {
+  console.log(`Field ${field} changed to:`, value)
+}
+
+const handleFieldBlur = (field: keyof AddressFormData) => {
+  console.log(`Field ${field} lost focus`)
+}
+</script>
+```
+
+### Vue Plugin Usage
+
+**Important:** Your consuming application must configure Vuetify first (see Vue Module Usage above), then use the plugin:
+
+**Option 1: Default Import (Recommended for backward compatibility)**
+```typescript
+import { createApp } from 'vue'
+import { createVuetify } from 'vuetify'
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+// ... configure Vuetify as above ...
+import AuthviaPaymentMethodForm from '@authvia/customer-payment-method-create'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(vuetify) // Your Vuetify instance
+app.use(AuthviaPaymentMethodForm) // Then use the plugin
+app.mount('#app')
+```
+
+**Option 2: Named Import**
+```typescript
+import { createApp } from 'vue'
+import { createVuetify } from 'vuetify'
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+// ... configure Vuetify as above ...
+import { AuthviaPaymentMethodFormPlugin } from '@authvia/customer-payment-method-create'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(vuetify) // Your Vuetify instance
+app.use(AuthviaPaymentMethodFormPlugin) // Then use the plugin
+app.mount('#app')
+```
+
+**Note:** 
+- The plugin only registers the component.
+- Vuetify (including icons) is fully controlled by your app; we recommend using the MDI font CSS as shown above.
+- Both default and named imports are supported for backward compatibility.
+
+## Props
+
+### Authentication Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `data-token` | `string` | No | Authentication token for API calls |
+| `data-azp` | `string` | Yes | Client identifier |
+
+### Form Behavior Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data-embedded-submit-label` | `string` | `'Submit Address'` | Text for submit button |
+| `data-embedded-no-button` | `boolean` | `false` | Hide submit button |
+| `data-disable-form` / `dataDisableForm` | `boolean` | `false` | Disable all fields and submit button (read-only) |
+| `data-auto-submit` | `boolean` | `false` | Auto-submit form when it becomes valid (hides button) |
+
+
+### API Integration Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data-union` | `string` | Union identifier for API address lookup |
+
+
+
+### Styling Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data-input-spacing` | `string` | Spacing between inputs (embedded mode only) |
+| `data-vuetify-props` / `dataVuetifyProps` | `object` / JSON string | Vuetify component props (object in Vue module, JSON string attribute in web component) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `submit` | `AddressFormData` | Form submitted with data |
+| `success` | `{ data, azp }` | Form submission successful |
+| `error` | `{ error, azp }` | Form submission failed |
+| `field-input` | `{ field, value }` | Field value changed |
+| `field-blur` | `{ field }` | Field lost focus |
+
+## Types
+
+```typescript
+
+interface VuetifyProps {
+  theme?: {
+    primary?: string
+    secondary?: string
+    accent?: string
+    error?: string
+    warning?: string
+    info?: string
+    success?: string
+  }
+  density?: 'default' | 'compact' | 'comfortable'
+  variant?: 'outlined' | 'filled' | 'plain' | 'underlined' | 'solo' | 'solo-inverted' | 'solo-filled'
+  textVariant?: 'outlined' | 'filled' | 'plain' | 'underlined' | 'solo' | 'solo-inverted' | 'solo-filled'
+  spacing?: {
+    inputGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    rowGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    sectionGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    buttonGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  }
+}
+```
+
+## Configuration
+
+### Environment Variables
+
+```bash
+# API Configuration
+VITE_APP_API_BASE_URL=https://api-dev.authvia.com
+VITE_APP_API_VERSION=v3
+
+# Development / diagnostics
+VITE_APP_ENABLE_LOGGING=true
+VITE_APP_ENABLE_DEBUG=true
+VITE_APP_ENABLE_ANALYTICS=false
+VITE_APP_ENABLE_ERROR_REPORTING=false
+VITE_APP_ENABLE_PERFORMANCE_MONITORING=false
+VITE_APP_ENABLE_CSP=true
+VITE_APP_ENABLE_HSTS=false
+VITE_APP_BUILD_TARGET=development
+VITE_APP_SOURCE_MAPS=true
+```
+
+
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm 9+
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build web component
+npm run build:wc
+
+# Build Vue module
+npm run build
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+```
+
+
+## Bundle & Assets
+
+- The **Vue module** externalizes Vue and Vuetify; your app controls Vuetify configuration and icon sets (we recommend the MDI font CSS).
+- The **standalone web component** bundles Vuetify **JavaScript** but expects Vuetify CSS + MDI fonts from the host page.
+- Component CSS is injected by JS (no separate `style.css` export); you don’t need to import any additional styles from this package beyond Vuetify + MDI.
+
+## Browser Support
+
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+
+## Changelog
+
+### Version 1.0.2
+
+**Why:** Partners embedding the payment-method-create web component needed end-to-end data submission for credit card (via external web component) and ACH forms, plus a unified `--avwc-*` CSS variable naming convention so host applications can consistently theme the component. This unblocks downstream integration and reduces partner onboarding friction.
+
+**Outcome:** `AuthviaPaymentMethodOptions` now wires `@success`/`@error` to both `AuthviaPaymentMethodAddAch` and `AuthviaPaymentMethodCreditCard` sub-components. ACH and credit card `on-success` events emit `{ type, paymentMethodId, use }` payloads instead of bare IDs, incorporating `forgetCard` state. CSS variables are renamed from `--merchant-*`/`--web-component-*` to `--avwc-*` with backward-compatible fallbacks in `variables.css`. A named export `AuthviaPaymentMethodFormPlugin` is added alongside the default export in `src/entry/index.ts`. Verify by confirming ACH and credit card submissions emit the new payload shape and CSS variables cascade correctly from host `:root`.
+
+### Version 1.0.3
+
+**Why:** The payment-method-create component lacked Storybook stories and unit tests, making it harder for developers to visually verify component behavior and catch regressions. Adding test coverage and Storybook examples reduces risk of shipping broken payment forms and improves onboarding for new contributors.
+
+**Outcome:** Added Storybook stories for `AuthviaPaymentMethodForm` covering all payment method configurations (card-only, ACH-only, demo mode, PayPal/Venmo, Paze, restrictions, custom theming via CSS variables). Added unit tests for `walletConstants`, `AuthviaPaymentMethodForm`, `AuthviaForgotCardOption`, `AuthviaFormWithTerms`, `AuthviaPaymentMethodCard`, `AuthviaPaymentMethodRestrictions`, `AuthviaPciFooter`, `useHostService`, `usePaymentMethodService`, `usePazeSDK`, `useWalletMerchantService`, `useWalletTokenService`, `apiBaseUrl`, `config`, `errors`, and `logger`. Fixed a duplicate-filtering bug in `useWalletMerchantService.tenderTypes` (`!== index` → `=== index`). Bound `data-avwc-disable-form` to `dataDemoMode` in `AuthviaPaymentMethodCreditCard`. Verify via `npm test` and Storybook UI.
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Support
+
+For support and questions, please contact the Authvia UI Team. 

package/dist/components/AuthviaPaymentMethodForm.vue.d.ts

@@ -0,0 +1,65 @@
+import { Ref } from 'vue';
+import { AuthviaPaymentMethodFormProps as Props, PaymentMethodFormData, PaymentMethodRestrictions } from '../types';
+declare const _default: import('vue').DefineComponent<Props, {
+    rootRef: Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (error: any) => any;
+    success: (data: any) => any;
+    submit: (data: PaymentMethodFormData) => any;
+    ready: () => any;
+    "payment-method-created": (paymentMethodId: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onError?: ((error: any) => any) | undefined;
+    onSuccess?: ((data: any) => any) | undefined;
+    onSubmit?: ((data: PaymentMethodFormData) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    "onPayment-method-created"?: ((paymentMethodId: string) => any) | undefined;
+}>, {
+    variant: "outlined" | "filled" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
+    paze: {
+        amount?: string;
+        clientId?: string;
+        profileId?: string;
+        name?: string;
+    };
+    paypal: {
+        venmo?: boolean;
+        merchantId: string;
+        clientId: string;
+        redirectUrl: string;
+    };
+    ach: {
+        demoMode?: boolean;
+        online?: boolean;
+        nameOnAccount?: string;
+        routingNumber?: string;
+        accountNumber?: string;
+        streetAddress?: string;
+        city?: string;
+        state?: string;
+        country?: string;
+        postalCode?: string;
+    };
+    color: string;
+    forgetDefault: boolean | string;
+    customerRef: string;
+    token: string;
+    borderRadius: string;
+    merchantId: string;
+    forgetHidden: boolean | string;
+    intent: string;
+    restrictions: PaymentMethodRestrictions[];
+    card: {
+        allow?: boolean;
+        demoMode?: boolean;
+        nameOnCard?: string;
+        streetAddress?: string;
+        city?: string;
+        state?: string;
+        country?: string;
+        postalCode?: string;
+    };
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/icons/authvia-wallet-svg-icon.vue.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    fill: {
+        type: StringConstructor;
+    };
+}>, {
+    fillColor: import('vue').ComputedRef<string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    path: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    fill: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    size: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/internal/AuthviaForgotCardOption.vue.d.ts

@@ -0,0 +1,11 @@
+export interface Props {
+    forgetDefault?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:forgetCard": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:forgetCard"?: ((value: boolean) => any) | undefined;
+}>, {
+    forgetDefault: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/internal/AuthviaFormWithTerms.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/internal/AuthviaPaymentMethodAddAch.vue.d.ts

@@ -0,0 +1,187 @@
+import { Ref, ComputedRef, PropType } from 'vue';
+import { PaymentMethod, PaymentMethodBillingAddress } from '../../model';
+export interface P_ACHValues {
+    nameOnAccount: string;
+    accountNumber: string;
+    routingNumber: string;
+    accountType: string;
+    streetAddress: string;
+    city: string;
+    state: string;
+    country: string;
+    postalCode: string;
+}
+export interface Props {
+    dataDemoMode?: boolean;
+    dataSubmitLabel?: string;
+    dataPlaid?: Record<string, unknown>;
+    forgetHidden?: boolean;
+    forgetDefault?: boolean;
+    authToken: string;
+    customerRef?: string;
+    dataBillingAddress?: PaymentMethodBillingAddress;
+    intent?: string;
+    merchantId?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dataDemoMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dataSubmitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataPlaid: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    forgetHidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forgetDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    authToken: {
+        type: StringConstructor;
+        required: true;
+    };
+    customerRef: {
+        type: StringConstructor;
+    };
+    dataBillingAddress: {
+        type: PropType<PaymentMethodBillingAddress>;
+        required: false;
+    };
+    intent: {
+        type: StringConstructor;
+        required: false;
+    };
+    merchantId: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        required: false;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        required: false;
+    };
+}>, {
+    accountTypes: {
+        savings: string;
+        checking: string;
+    };
+    fieldVariant: ComputedRef<string>;
+    fieldVariantSafe: ComputedRef<any>;
+    formData: P_ACHValues;
+    isWorking: Ref<boolean, boolean>;
+    isFormValid: ComputedRef<boolean>;
+    errorsType: Ref<{
+        other: string | undefined;
+    }, {
+        other: string | undefined;
+    }>;
+    computedSubmitLabel: ComputedRef<string>;
+    handleSubmit: () => Promise<void>;
+    isActiveTab: Ref<boolean, boolean>;
+    addButtonToggle: (value?: boolean) => void;
+    address: Ref<HTMLInputElement, HTMLInputElement>;
+    resetFormAddressData: () => void;
+    activeMerchant: ComputedRef<string | undefined>;
+    isPaymentMethodAdded: Ref<boolean, boolean>;
+    paymentMethodResponse: Ref<PaymentMethod | undefined, PaymentMethod | undefined>;
+    isAddressFieldDisabled: (fieldValue: string | undefined) => boolean;
+    azp: string;
+    handleAddressFormSubmit: (data: PaymentMethodBillingAddress) => void;
+    handleUpdateForgetCard: (_value: boolean) => void;
+    addressFormRef: Ref<any, any>;
+    formRef: Ref<any, any>;
+    streetAddress: string;
+    city: string;
+    state: string;
+    country: string;
+    postalCode: string;
+    googleMapsApiKey: string;
+    isAddressFormValid: (isValid: boolean) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("error" | "success" | "submit")[], "error" | "success" | "submit", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dataDemoMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dataSubmitLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataPlaid: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    forgetHidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forgetDefault: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    authToken: {
+        type: StringConstructor;
+        required: true;
+    };
+    customerRef: {
+        type: StringConstructor;
+    };
+    dataBillingAddress: {
+        type: PropType<PaymentMethodBillingAddress>;
+        required: false;
+    };
+    intent: {
+        type: StringConstructor;
+        required: false;
+    };
+    merchantId: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        required: false;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & Readonly<{
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+    onSuccess?: ((...args: any[]) => any) | undefined;
+}>, {
+    variant: string;
+    forgetDefault: boolean;
+    forgetHidden: boolean;
+    dataDemoMode: boolean;
+    dataSubmitLabel: string;
+}, {}, {
+    AuthviaFormWithTerms: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+    AuthviaForgotCardOption: import('vue').DefineComponent<import('./AuthviaForgotCardOption.vue').Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:forgetCard": (value: boolean) => any;
+    }, string, import('vue').PublicProps, Readonly<import('./AuthviaForgotCardOption.vue').Props> & Readonly<{
+        "onUpdate:forgetCard"?: ((value: boolean) => any) | undefined;
+    }>, {
+        forgetDefault: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/internal/AuthviaPaymentMethodAddAchOnline.vue.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    authToken: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {
+    handleContinue: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "close-ach-options": () => any;
+    "ach-option-select": () => any;
+    "get-plaid-data": (accountData: unknown) => any;
+    "plaid-initialize": () => any;
+    "plaid-exit": () => any;
+    "plaid-error": () => any;
+    "plaid-event": (eventName: unknown) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onClose-ach-options"?: (() => any) | undefined;
+    "onAch-option-select"?: (() => any) | undefined;
+    "onGet-plaid-data"?: ((accountData: unknown) => any) | undefined;
+    "onPlaid-initialize"?: (() => any) | undefined;
+    "onPlaid-exit"?: (() => any) | undefined;
+    "onPlaid-error"?: (() => any) | undefined;
+    "onPlaid-event"?: ((eventName: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    plaidsdkRef: HTMLButtonElement;
+}, any>;
+export default _default;