@authvia/payment-method-create 0.3.0 → 0.4.0

package/README.md

@@ -1,336 +1,257 @@
-# Authvia Payment Method Form Web Component
+# Authvia Payment Method Form
 
-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.
+Vue 3 + Vuetify 3 component and standalone web component for **adding a saved payment method** (card, ACH, PayPal, Venmo, Paze, and related options). You choose which methods to expose; only enabled methods appear. On success the host receives a **payment method id**.
 
-## Features
+Full prop and behavior notes live in **Storybook** (`AuthviaPaymentMethodForm` story docs) and in exported TypeScript types.
 
-- 🏠 **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
+## Requirements
+
+- **Vue** `>= 3.4.0`
+- **Vuetify** `3.x` (your app creates the Vuetify instance; this package does not)
+- **MDI** font CSS on the host page (Material Design Icons)
+
+If Vue, Vuetify, or styles are missing in a web-component embed, the element may emit `authvia:dependency-missing`.
 
 ## Installation
 
 ```bash
-npm install @authvia/customer-payment-method-create
+npm install @authvia/payment-method-create
 ```
 
-## Usage
+Exports:
 
-### Web Component Usage (Standalone Build)
+- **Vue plugin / module:** `@authvia/payment-method-create` (default build)
+- **Standalone web component:** `@authvia/payment-method-create/web-component`
 
-```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>
-```
+## Features (summary)
 
-### Vue Module Usage
+- **Token:** A valid JWT is required for the inner form to render. The token must include `https://authvia.com/uuid` and `payment_methods:create` in `scope`. Empty, invalid, or expired tokens keep the form hidden. In those cases the wrapper emits `error` as `{ phase: 'init', error }`, then `ready`, and logs a warning.
+- **Enabled methods:** Props such as `card`, `ach`, `paypal`, `venmo`, and `paze` control what appears. Methods you do not configure stay off the list.
+- **Runtime errors:** Failures while saving emit `error` with a payload that usually includes a `message` string (shape is **not** `{ phase: 'init', … }`). Incomplete **Paze** or **PayPal/Venmo** (for non-`payouts` intent) config hides those methods in the list instead of erroring on open. The embed usually stays mounted so the user can retry.
+- **Success:** `success` carries payment method details (see Events). The host decides navigation or hiding the embed.
+- **Styling:** Accent color, border radius, and field `variant` are configurable; CSS variables use the `--avwc-*` prefix on the form root.
 
-**Important:** The Vue module does **not** create a Vuetify instance. Your app must provide Vuetify and the MDI font CSS.
+## Vue: register the plugin
 
-#### Basic Vuetify Setup
+Your application must call `createVuetify()` (and load Vuetify styles + MDI) before registering this plugin.
 
 ```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')
+import { createApp } from 'vue';
+import { createVuetify } from 'vuetify';
+import AuthviaPaymentMethodFormPlugin from '@authvia/payment-method-create';
+import App from './App.vue';
+
+const app = createApp(App);
+const vuetify = createVuetify();
+
+app.use(vuetify);
+app.use(AuthviaPaymentMethodFormPlugin);
+app.mount('#app');
 ```
 
-#### Use the component (with Google Maps API key)
+Named export `AuthviaPaymentMethodFormPlugin` is also available for explicit imports.
+
+## Vue: use the component
 
 ```vue
 <template>
-  <div>
-    <AuthviaPaymentMethodForm
-      :dataAzp="clientId"
-      :dataEmbeddedSubmitLabel="submitLabel"
-      @submit="handleSubmit"
-      @success="handleSuccess"
-      @error="handleError"
-      @field-input="handleFieldInput"
-      @field-blur="handleFieldBlur"
-    />
-  </div>
+  <AuthviaPaymentMethodForm
+    :token="token"
+    merchant-id="demo-merchant"
+    customer-ref="demo-customer"
+    intent="payments"
+    :card="{ demoMode: false }"
+    :ach="{ demoMode: false, online: true }"
+    @ready="onReady"
+    @success="onSuccess"
+    @error="onError"
+  />
 </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)
-}
+import { AuthviaPaymentMethodForm } from '@authvia/payment-method-create';
 
-const handleError = (error: any) => {
-  console.error('Error:', error)
+function onReady(): void {
+  /* token passed validation; form may be visible */
 }
 
-const handleFieldInput = (field: keyof AddressFormData, value: string) => {
-  console.log(`Field ${field} changed to:`, value)
+function onSuccess(detail: unknown): void {
+  /* includes paymentMethodId — see types */
 }
 
-const handleFieldBlur = (field: keyof AddressFormData) => {
-  console.log(`Field ${field} lost focus`)
+function onError(detail: unknown): void {
+  /* init: { phase: 'init', error }; runtime: often { message } */
 }
 </script>
 ```
 
-### Vue Plugin Usage
+## Web component
 
-**Important:** Your consuming application must configure Vuetify first (see Vue Module Usage above), then use the plugin:
+Load **Vue 3**, **Vuetify CSS**, and **MDI** before the bundle. Use the `data-` prefix for attributes; object props are JSON strings on the element.
 
-**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')
-```
+See `demo.html` in this repo for a full page example.
 
-**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')
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+<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 />
 ```
 
-**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
+```html
+<authvia-create-payment-method-form
+  data-token="YOUR_JWT"
+  data-merchant-id="demo-merchant"
+  data-customer-ref="demo-customer"
+  data-intent="payments"
+  data-card='{"demoMode":false,"submitBtnText":"Add card"}'
+  data-color="#4CAF50"
+  data-border-radius="1rem"
+></authvia-create-payment-method-form>
+```
 
-### Authentication Props
+Load the built script after Vue (for example the output of `npm run build:wc`):
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data-token` | `string` | No | Authentication token for API calls |
-| `data-azp` | `string` | Yes | Client identifier |
+```html
+<script type="module" src="./path/to/authvia-payment-method-create.js"></script>
+```
 
-### Form Behavior Props
+### Web component events
 
-| 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) |
+Listen on the custom element for:
 
+| Event | `detail` |
+|--------|----------|
+| `ready` | Fires after token checks complete (form may still be hidden if token invalid). |
+| `submit` | Emitted from some inner flows (for example ACH / PayPal) with form-related payloads. |
+| `success` | Saved payment method; includes `paymentMethodId` in the normalized payload. |
+| `error` | Init failures: `{ phase: 'init', error }`. Runtime: often `{ message: string }` or similar. |
+| `authvia:dependency-missing` | Host is missing Vue, Vuetify, or required styles. |
 
-### API Integration Props
+```html
+<script>
+  const component = document.querySelector('authvia-create-payment-method-form');
+  component?.addEventListener('ready', () => { /* … */ });
+  component?.addEventListener('success', (e) => { console.log(e.detail); });
+  component?.addEventListener('error', (e) => { console.log(e.detail); });
+</script>
+```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `data-union` | `string` | Union identifier for API address lookup |
+## Props (overview)
 
+Details and examples match **Storybook** (`src/components/AuthviaPaymentMethodForm.stories.ts`).
 
+| Area | Props |
+|------|--------|
+| Auth / context | `token`, `merchantId`, `customerRef`, `intent` |
+| Methods | `card`, `ach`, `paypal`, `venmo`, `paze` |
+| List UI | `paymentMethodDisplay` (titles, subtitles, order; optional root `gap`) |
+| Legal / footer | `terms` (privacy + terms links) |
+| Behavior | `forgetHidden`, `forgetDefault`, `restrictions` |
+| Styling | `color` (default `#4CAF50`), `borderRadius` (default `1rem`), `variant` (default `outlined`), `vuetifyOverrides` (web component: plain CSS string for Shadow DOM) |
 
-### Styling Props
+### `paymentMethodDisplay`
 
-| 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) |
+Controls the **payment method picker list** (labels and order). It does not turn methods on or off; use `card`, `ach`, `paypal`, etc. for that.
 
-## Events
+| Field | Description |
+|--------|-------------|
+| **`gap`** (root, optional) | Vertical space between option rows. Any CSS length (`1rem`, `12px`, …). **If omitted**, this prop does not add spacing; layout matches the previous behavior (no list-level `gap` from this object). |
+| **`card`**, **`ach`**, **`paypal`**, **`venmo`**, **`paze`** | Optional `title`, `subtitle`, and `order`. Lower `order` values appear higher in the list. |
 
-| 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 |
+**Vue**
 
-## Types
+```vue
+:payment-method-display="{
+  gap: '1rem',
+  card: { title: 'Credit / debit card', subtitle: '…', order: 1 },
+  ach: { title: 'Bank account', subtitle: '…', order: 2 }
+}"
+```
 
-```typescript
+**Web component** (`data-payment-method-display`): pass a **single JSON object** string. Use commas between properties. Invalid JSON is ignored (check the console).
 
-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'
-  }
-}
+```html
+data-payment-method-display='{"gap":"1rem","card":{"title":"Card","order":1},"ach":{"title":"Bank","order":2}}'
 ```
 
-## Configuration
+### Paze (`paze`)
 
-### Environment Variables
+Requires `amount`, `clientId`, `profileId`, and `name` on the object you pass; **all must be non-empty** (after trim). If any are missing or blank, **Paze is not shown** in the picker (including when `restrictions` list Paze but the `paze` prop is incomplete). The inner flow runs in two steps: **Initializing Paze** (SDK load) then **Processing Paze payment** (checkout → complete → create). Failures emit `error` and return the user to the payment method list without an inline error banner on that step; details are logged for developers.
 
-```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
-```
+### PayPal / Venmo
 
+- **`intent="payouts"`:** `paypal` and `venmo` can be booleans; PayPal and Venmo **stay listed** even when `merchantId` is incomplete (same as before for payouts).
+- **`intent="payments"`** (and any intent other than `payouts`): PayPal and Venmo appear in the picker only when **`merchantId`** is non-empty on the resolved wallet settings **and** the build defines **`VITE_APP_PAYPAL_CLIENT_ID`**. Otherwise those rows are **hidden** (same rules as the former click-time `error`, without showing a dead option). Use `restrictions` only when you intend to allow those methods; incomplete wallet config still strips PayPal/Venmo from the list.
+- Pass **`merchantId`** and optional **`redirectUrl`** on the `paypal` / `venmo` object when you want the payments flow to succeed.
 
+## Stable styling hook classes (overrides)
 
-## Development
+Use these hooks in `data-vuetify-overrides` (web component) or host CSS. Canonical strings live in `src/constants/avwcStylingHooks.ts` (`avwcPaymentMethodFormHooks`).
 
-### Prerequisites
+| Class | Where |
+|--------|--------|
+| `avwc-payment-method-form__root` | Main form wrapper (`AuthviaPaymentMethodForm`) |
+| `avwc-payment-method-form__options-root` | Options container (`AuthviaPaymentMethodOptions` `v-container`) |
+| `avwc-payment-method-form__options-card` | Payment method selection `v-card` |
+| `avwc-payment-method-form__options-list` | List area wrapping picker rows |
+| `avwc-payment-method-form__method-dialog` | Each payment-method `v-dialog` content `v-card` |
+| `avwc-payment-method-form__method-row` | Each picker row (`AuthviaPaymentMethodCard`) |
+| `avwc-payment-method-form__credit-card-section` | Credit card block inside the card/PayPal dialog |
+| `avwc-payment-method-form__ach-root` | ACH add-bank flow root (`AuthviaPaymentMethodAddAch`) |
 
-- Node.js 18+
-- npm 9+
+**Inside each picker row** (`data-vuetify-overrides`): combine with the row hook, e.g. `.avwc-payment-method-form__method-row .payment-method-card__title { color: #1565c0 !important; }` for title text, `.payment-method-card__logo-slot` for icon tint, `.payment-method-card__subtitle` for the description line.
 
-### Setup
+## CSS variables
 
-```bash
-# Install dependencies
-npm install
+The form root sets theming variables, including:
 
-# Start development server
-npm run dev
+- `--avwc-color` (accent; mirrors `color` prop, default `#4CAF50`)
+- `--avwc-border-radius` (mirrors `borderRadius`, default `1rem`)
 
-# Build web component
-npm run build:wc
+Additional tokens (for example `--avwc-text-color-light`) are documented in `variables.css` and Storybook.
 
-# Build Vue module
-npm run build
+## Development
 
-# Type checking
-npm run type-check
+Prerequisites: Node.js 18+, npm 9+.
 
-# Linting
+```bash
+npm install
+npm run dev              # app dev server
+npm run build            # Vue module
+npm run build:wc         # web component
+npm run type-check
 npm run lint
+npm test
 ```
 
+## Bundle and assets
 
-## Bundle & Assets
+- The **Vue module** expects Vue and Vuetify as peer dependencies; your app supplies Vuetify and MDI.
+- The **standalone web component** bundles Vuetify **JavaScript** but expects Vuetify CSS + MDI from the host (same as `demo.html`).
+- Component styles ship with the JS; add Vuetify + MDI at the app level.
 
-- 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
 
-## Browser Support
-
-- Chrome 88+
-- Firefox 85+
-- Safari 14+
-- Edge 88+
+Chrome 88+, Firefox 85+, Safari 14+, Edge 88+.
 
 ## Changelog
 
-### Version 1.0.2
+### Version 1.0.3
 
-**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.
+Added Storybook stories and expanded unit tests; fixed duplicate tender-type filtering in `useWalletMerchantService`. See git history for details.
 
-**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.2
 
-### Version 1.0.3
+Unified success payloads for ACH and card (`{ type, paymentMethodId, use }`), `--avwc-*` CSS variables with backward-compatible fallbacks, and named plugin export.
 
-**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.
+### Documentation (current)
 
-**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.
+README aligned with `AuthviaPaymentMethodForm.stories.ts` (including `paymentMethodDisplay.gap`), `demo.html`, and package exports (`@authvia/payment-method-create`).
 
 ## License
 
-MIT License - see LICENSE file for details.
+MIT License — see the LICENSE file.
 
 ## Support
 
-For support and questions, please contact the Authvia UI Team. 
+For support and questions, contact the Authvia UI Team.

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

@@ -15,15 +15,6 @@ declare const _default: import('vue').DefineComponent<Props, {
     onReady?: (() => any) | undefined;
     "onPayment-method-created"?: ((paymentMethodId: string) => any) | undefined;
 }>, {
-    variant: "outlined" | "plain" | "underlined" | "filled" | "solo" | "solo-filled" | "solo-inverted";
-    merchantId: string;
-    paze: {
-        amount?: string;
-        clientId?: string;
-        profileId?: string;
-        name?: string;
-    };
-    paypal: boolean | import('../types').PayPalConfig;
     ach: {
         demoMode?: boolean;
         online?: boolean;
@@ -39,18 +30,7 @@ declare const _default: import('vue').DefineComponent<Props, {
         country?: string;
         postalCode?: string;
     };
-    venmo: boolean | import('../types').VenmoConfig;
-    color: string;
-    forgetDefault: boolean | string;
-    customerRef: string;
-    token: string;
-    borderRadius: string;
-    forgetHidden: boolean | string;
-    intent: string;
-    vuetifyOverrides: string;
-    restrictions: PaymentMethodRestrictions[];
     card: {
-        allow?: boolean;
         demoMode?: boolean;
         title?: string;
         subtitle?: string;
@@ -65,6 +45,25 @@ declare const _default: import('vue').DefineComponent<Props, {
         country?: string;
         postalCode?: string;
     };
+    paypal: boolean | import('../types').PayPalConfig;
+    paze: {
+        amount?: string;
+        clientId?: string;
+        profileId?: string;
+        name?: string;
+    };
+    venmo: boolean | import('../types').VenmoConfig;
+    variant: "outlined" | "plain" | "underlined" | "filled" | "solo" | "solo-filled" | "solo-inverted";
+    merchantId: string;
+    color: string;
+    forgetDefault: boolean | string;
+    customerRef: string;
+    token: string;
+    borderRadius: string;
+    forgetHidden: boolean | string;
+    intent: string;
+    vuetifyOverrides: string;
+    restrictions: PaymentMethodRestrictions[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
 }, HTMLDivElement>;

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

@@ -89,6 +89,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         required: false;
     };
 }>, {
+    avwcPaymentMethodFormHooks: {
+        readonly root: "avwc-payment-method-form__root";
+        readonly optionsRoot: "avwc-payment-method-form__options-root";
+        readonly optionsCard: "avwc-payment-method-form__options-card";
+        readonly optionsList: "avwc-payment-method-form__options-list";
+        readonly methodDialog: "avwc-payment-method-form__method-dialog";
+        readonly methodRow: "avwc-payment-method-form__method-row";
+        readonly creditCardSection: "avwc-payment-method-form__credit-card-section";
+        readonly achRoot: "avwc-payment-method-form__ach-root";
+    };
     accountTypes: {
         savings: string;
         checking: string;
@@ -123,7 +133,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isPaymentMethodAdded: Ref<boolean, boolean>;
     paymentMethodResponse: Ref<PaymentMethod | undefined, PaymentMethod | undefined>;
     isAddressFieldDisabled: (fieldValue: string | undefined) => boolean;
-    azp: string;
+    azp: ComputedRef<string>;
     handleAddressFormSubmit: (data: PaymentMethodBillingAddress) => void;
     handleUpdateForgetCard: (_value: boolean) => void;
     addressFormRef: Ref<unknown, unknown>;

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

@@ -10,6 +10,7 @@ type __VLS_Props = {
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     error: (payload: {
         message: string;
+        type: PaymentMethodType;
     }) => any;
     success: (payload: {
         id: string;
@@ -26,6 +27,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((payload: {
         message: string;
+        type: PaymentMethodType;
     }) => any) | undefined;
     onSuccess?: ((payload: {
         id: string;

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

@@ -20,6 +20,7 @@ type __VLS_Props = {
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     error: (payload: {
         message: string;
+        type: PaymentMethodType;
     }) => any;
     success: (payload: Record<string, unknown>) => any;
     submit: (payload: {
@@ -29,6 +30,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((payload: {
         message: string;
+        type: PaymentMethodType;
     }) => any) | undefined;
     onSuccess?: ((payload: Record<string, unknown>) => any) | undefined;
     onSubmit?: ((payload: {

package/dist/constants/avwcStylingHooks.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Stable BEM-style classes for host CSS and `data-vuetify-overrides` (web component).
+ * Block: `avwc-payment-method-form`. Documented in `docs/styling_guide.md` and README.
+ */
+export declare const avwcPaymentMethodFormHooks: {
+    readonly root: "avwc-payment-method-form__root";
+    readonly optionsRoot: "avwc-payment-method-form__options-root";
+    readonly optionsCard: "avwc-payment-method-form__options-card";
+    readonly optionsList: "avwc-payment-method-form__options-list";
+    readonly methodDialog: "avwc-payment-method-form__method-dialog";
+    readonly methodRow: "avwc-payment-method-form__method-row";
+    readonly creditCardSection: "avwc-payment-method-form__credit-card-section";
+    readonly achRoot: "avwc-payment-method-form__ach-root";
+};
+export type AvwcPaymentMethodFormHookClass = (typeof avwcPaymentMethodFormHooks)[keyof typeof avwcPaymentMethodFormHooks];