@authvia/payment-method-create 0.1.0 → 0.2.0

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

@@ -15,22 +15,21 @@ declare const _default: import('vue').DefineComponent<Props, {
     onReady?: (() => any) | undefined;
     "onPayment-method-created"?: ((paymentMethodId: string) => any) | undefined;
 }>, {
-    variant: "outlined" | "filled" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
+    variant: "outlined" | "plain" | "underlined" | "filled" | "solo" | "solo-filled" | "solo-inverted";
+    merchantId: string;
     paze: {
         amount?: string;
         clientId?: string;
         profileId?: string;
         name?: string;
     };
-    paypal: {
-        venmo?: boolean;
-        merchantId: string;
-        clientId: string;
-        redirectUrl: string;
-    };
+    paypal: boolean | import('../types').PayPalConfig;
     ach: {
         demoMode?: boolean;
         online?: boolean;
+        title?: string;
+        subtitle?: string;
+        submitBtnText?: string;
         nameOnAccount?: string;
         routingNumber?: string;
         accountNumber?: string;
@@ -40,18 +39,24 @@ declare const _default: import('vue').DefineComponent<Props, {
         country?: string;
         postalCode?: string;
     };
+    venmo: boolean;
     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;
+        title?: string;
+        subtitle?: string;
+        submitBtnText?: string;
+        cardNumber?: string;
+        expiration?: string;
+        cvv?: string;
         nameOnCard?: string;
         streetAddress?: string;
         city?: string;

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

@@ -1,2 +1,6 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+import { TermsConfig } from '../../types';
+type __VLS_Props = {
+    terms?: TermsConfig;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,5 +1,6 @@
-import { Ref, ComputedRef, PropType } from 'vue';
+import { ComputedRef, PropType, Ref } from 'vue';
 import { PaymentMethod, PaymentMethodBillingAddress } from '../../model';
+import { TermsConfig } from '../../types';
 export interface P_ACHValues {
     nameOnAccount: string;
     accountNumber: string;
@@ -11,10 +12,14 @@ export interface P_ACHValues {
     country: string;
     postalCode: string;
 }
+type AchFieldKey = 'routingNumber' | 'accountNumber' | 'nameOnAccount';
+type ValidationRule = (value: unknown) => true | string;
 export interface Props {
-    dataDemoMode?: boolean;
-    dataSubmitLabel?: string;
-    dataPlaid?: Record<string, unknown>;
+    demoMode?: boolean;
+    submitBtnText?: string;
+    plaid?: Record<string, unknown>;
+    billingAddress?: PaymentMethodBillingAddress;
+    terms?: TermsConfig;
     forgetHidden?: boolean;
     forgetDefault?: boolean;
     authToken: string;
@@ -24,16 +29,24 @@ export interface Props {
     merchantId?: string;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    dataDemoMode: {
+    demoMode: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
     };
-    dataSubmitLabel: {
+    submitBtnText: {
         type: StringConstructor;
-        default: string;
+        required: false;
+    };
+    plaid: {
+        type: PropType<Record<string, unknown>>;
+        required: false;
+    };
+    billingAddress: {
+        type: PropType<PaymentMethodBillingAddress>;
+        required: false;
     };
-    dataPlaid: {
-        type: ObjectConstructor;
+    terms: {
+        type: PropType<TermsConfig>;
         required: false;
     };
     forgetHidden: {
@@ -80,11 +93,21 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         savings: string;
         checking: string;
     };
-    fieldVariant: ComputedRef<string>;
-    fieldVariantSafe: ComputedRef<any>;
+    fieldVariant: ComputedRef<"outlined" | "plain" | "underlined" | "filled" | "solo" | "solo-filled" | "solo-inverted">;
+    fieldVariantSafe: ComputedRef<"outlined" | "plain" | "underlined" | "filled" | "solo" | "solo-filled" | "solo-inverted">;
     formData: P_ACHValues;
     isWorking: Ref<boolean, boolean>;
     isFormValid: ComputedRef<boolean>;
+    markFieldDirty: (field: AchFieldKey) => void;
+    getFieldRules: (field: AchFieldKey) => ValidationRule[];
+    routingNumberModel: ComputedRef<string>;
+    accountNumberModel: ComputedRef<string>;
+    nameOnAccountModel: ComputedRef<string>;
+    onDigitKeydown: (event: KeyboardEvent) => void;
+    onNameKeydown: (event: KeyboardEvent) => void;
+    onRoutingPaste: (event: ClipboardEvent) => void;
+    onAccountPaste: (event: ClipboardEvent) => void;
+    onNamePaste: (event: ClipboardEvent) => void;
     errorsType: Ref<{
         other: string | undefined;
     }, {
@@ -103,8 +126,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     azp: string;
     handleAddressFormSubmit: (data: PaymentMethodBillingAddress) => void;
     handleUpdateForgetCard: (_value: boolean) => void;
-    addressFormRef: Ref<any, any>;
-    formRef: Ref<any, any>;
+    addressFormRef: Ref<unknown, unknown>;
+    formRef: Ref<unknown, unknown>;
+    demoMode: ComputedRef<boolean>;
+    plaid: ComputedRef<Record<string, unknown> | undefined>;
+    billingAddress: ComputedRef<PaymentMethodBillingAddress | undefined>;
     streetAddress: string;
     city: string;
     state: string;
@@ -113,16 +139,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     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: {
+    demoMode: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
     };
-    dataSubmitLabel: {
+    submitBtnText: {
         type: StringConstructor;
-        default: string;
+        required: false;
+    };
+    plaid: {
+        type: PropType<Record<string, unknown>>;
+        required: false;
+    };
+    billingAddress: {
+        type: PropType<PaymentMethodBillingAddress>;
+        required: false;
     };
-    dataPlaid: {
-        type: ObjectConstructor;
+    terms: {
+        type: PropType<TermsConfig>;
         required: false;
     };
     forgetHidden: {
@@ -171,11 +205,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     variant: string;
     forgetDefault: boolean;
+    demoMode: 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>;
+    AuthviaFormWithTerms: import('vue').DefineComponent<{
+        terms?: TermsConfig;
+    }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        terms?: TermsConfig;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
     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<{

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

@@ -0,0 +1,48 @@
+import { PaymentMethodType } from '../../model';
+import { TermsConfig, Variant } from '../../types';
+type FormType = 'paypal' | 'venmo';
+type PayoutTraits = {
+    email?: string;
+    phone?: string;
+    handle?: string;
+};
+type __VLS_Props = {
+    authToken: string;
+    merchantId?: string;
+    customerRef?: string;
+    intent?: string;
+    type?: FormType;
+    terms?: TermsConfig;
+    forgetHidden?: boolean;
+    forgetDefault?: boolean;
+    variant?: Variant | string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (payload: {
+        message: string;
+    }) => any;
+    success: (payload: Record<string, unknown>) => any;
+    submit: (payload: {
+        type: PaymentMethodType;
+        traits: PayoutTraits;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((payload: {
+        message: string;
+    }) => any) | undefined;
+    onSuccess?: ((payload: Record<string, unknown>) => any) | undefined;
+    onSubmit?: ((payload: {
+        type: PaymentMethodType;
+        traits: PayoutTraits;
+    }) => any) | undefined;
+}>, {
+    type: FormType;
+    variant: Variant | string;
+    merchantId: string;
+    forgetDefault: boolean;
+    terms: TermsConfig;
+    customerRef: string;
+    forgetHidden: boolean;
+    intent: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -1,5 +1,11 @@
 import { ComputedRef, PropType, Ref } from 'vue';
 import { PaymentMethodBillingAddress } from '../../model';
+type CreditCardPrefill = {
+    cardNumber?: string;
+    nameOnCard?: string;
+    expiration?: string;
+    cvv?: string;
+};
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     demoMode: {
         type: BooleanConstructor;
@@ -36,6 +42,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: false;
     };
+    cardNumber: {
+        type: StringConstructor;
+        required: false;
+    };
+    nameOnCard: {
+        type: StringConstructor;
+        required: false;
+    };
+    expiration: {
+        type: StringConstructor;
+        required: false;
+    };
+    cvv: {
+        type: StringConstructor;
+        required: false;
+    };
     variant: {
         type: StringConstructor;
         required: false;
@@ -49,20 +71,20 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     submitLabel: {
         type: StringConstructor;
         required: false;
-        default: string;
+        default: any;
     };
 }>, {
     squelch: boolean;
     token: string;
-    prefill: Ref<any, any>;
+    prefill: Ref<CreditCardPrefill, CreditCardPrefill>;
     inDemoMode: Ref<boolean, boolean>;
     isFormReady: Ref<boolean, boolean>;
     isFormSubmit: Ref<boolean, boolean>;
     isPaymentMethodAdded: Ref<boolean, boolean>;
-    paymentMethodResponse: Ref<any, any>;
+    paymentMethodResponse: Ref<unknown, unknown>;
     working: Ref<boolean, boolean>;
     isMerchantActive: ComputedRef<boolean>;
-    errorMessage: Ref<any, any>;
+    errorMessage: Ref<unknown, unknown>;
     isBillingAddressMode: Ref<boolean, boolean>;
     name: string;
     streetAddress: string;
@@ -71,10 +93,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     postalCode: string;
     country: string;
     isAddressEditable: boolean;
+    cardNumber: ComputedRef<string>;
+    nameOnCard: ComputedRef<string>;
+    expiration: ComputedRef<string>;
+    cvv: ComputedRef<string>;
     variant: string;
-    submitLabel: string;
-    handleSuccess: (event: any) => void;
-    handleError: (error: any) => void;
+    submitLabel: any;
+    handleSuccess: (event: unknown) => void;
+    handleError: (error: unknown) => void;
     apiBaseUrl: string;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("error" | "success")[], "error" | "success", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     demoMode: {
@@ -112,6 +138,22 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: false;
     };
+    cardNumber: {
+        type: StringConstructor;
+        required: false;
+    };
+    nameOnCard: {
+        type: StringConstructor;
+        required: false;
+    };
+    expiration: {
+        type: StringConstructor;
+        required: false;
+    };
+    cvv: {
+        type: StringConstructor;
+        required: false;
+    };
     variant: {
         type: StringConstructor;
         required: false;
@@ -125,7 +167,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     submitLabel: {
         type: StringConstructor;
         required: false;
-        default: string;
+        default: any;
     };
 }>> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;

package/dist/entry/web-component.d.ts

@@ -10,7 +10,7 @@ declare global {
     interface Window {
         __AUTHVIA_DEPENDENCY_REGISTRY__?: DependencyRegistry;
         __AUTHVIA_WEB_COMPONENT_CSS__?: string;
-        /** Set by @authvia/customer-add-physical-address plugin when used in web component build */
+        /** Set by @authvia/address-create plugin when used in web component build */
         __AUTHVIA_VUE_PLUGIN_CSS__?: string;
         Vue?: VueRuntime;
     }

package/dist/plugins/vuetify-base.d.ts

@@ -1,3 +1,15 @@
+/**
+ * Create a font-based MDI iconset that ALWAYS returns icon names as strings.
+ * This forces Vuetify to use font mode (CSS classes) instead of SVG mode.
+ *
+ * CRITICAL: We do NOT import 'mdi' from 'vuetify/iconsets/mdi' because
+ * that iconset automatically detects font availability and adds a 'component'
+ * property when fonts aren't detected (which happens in Shadow DOM).
+ *
+ * By creating our own iconset with only strings and NO 'component' property,
+ * we force Vuetify to always use font mode.
+ */
+export declare const createFontMdiIconset: () => any;
 export declare const createVuetifyInstance: () => {
     install: (app: import('vue').App<any>) => void;
     unmount: () => void;

package/dist/types/index.d.ts

@@ -1,10 +1,50 @@
 import { PaymentMethodType } from '../model';
+export interface PaymentMethodDisplayText {
+    title?: string;
+    subtitle?: string;
+    order?: number;
+}
+export interface PaymentMethodDisplayConfigMap {
+    ach?: PaymentMethodDisplayText;
+    card?: PaymentMethodDisplayText;
+    paypal?: PaymentMethodDisplayText;
+    paze?: PaymentMethodDisplayText;
+    venmo?: PaymentMethodDisplayText;
+}
+export interface TermsLinkConfig {
+    show?: boolean;
+    text?: string;
+    href?: string;
+}
+export interface TermsConfig {
+    privacyPolicy?: TermsLinkConfig;
+    termsOfService?: TermsLinkConfig;
+}
+/**
+ * Object shape when the `paypal` prop is a config object (not boolean `true`).
+ */
+export type PayPalConfig = {
+    merchantId: string;
+    clientId: string;
+    redirectUrl?: string;
+};
+/** Allowed values for Vuetify 3 `v-text-field` / field `variant` (shared across payment method components). */
+export declare const VUETIFY_FIELD_VARIANTS: readonly ["outlined", "plain", "underlined", "filled", "solo", "solo-filled", "solo-inverted"];
+export type VuetifyFieldVariant = (typeof VUETIFY_FIELD_VARIANTS)[number];
+/** Alias for {@link VuetifyFieldVariant}. */
+export type Variant = VuetifyFieldVariant;
 export interface AuthviaPaymentMethodFormProps {
     token?: string;
     merchantId?: string;
     card?: {
         allow?: boolean;
         demoMode?: boolean;
+        title?: string;
+        subtitle?: string;
+        submitBtnText?: string;
+        cardNumber?: string;
+        expiration?: string;
+        cvv?: string;
         nameOnCard?: string;
         streetAddress?: string;
         city?: string;
@@ -16,6 +56,9 @@ export interface AuthviaPaymentMethodFormProps {
         demoMode?: boolean;
         /** When true, show the "Use your online credentials" (Plaid) option for ACH. */
         online?: boolean;
+        title?: string;
+        subtitle?: string;
+        submitBtnText?: string;
         nameOnAccount?: string;
         routingNumber?: string;
         accountNumber?: string;
@@ -25,12 +68,8 @@ export interface AuthviaPaymentMethodFormProps {
         country?: string;
         postalCode?: string;
     };
-    paypal?: {
-        venmo?: boolean;
-        merchantId: string;
-        clientId: string;
-        redirectUrl: string;
-    };
+    paypal?: boolean | PayPalConfig;
+    venmo?: boolean;
     paze?: {
         amount?: string;
         clientId?: string;
@@ -43,6 +82,8 @@ export interface AuthviaPaymentMethodFormProps {
     variant?: VuetifyProps['variant'];
     color?: string;
     borderRadius?: string;
+    paymentMethodDisplay?: PaymentMethodDisplayConfigMap;
+    terms?: TermsConfig;
     forgetHidden?: boolean | string;
     forgetDefault?: boolean | string;
     primaryColor?: string;
@@ -66,8 +107,8 @@ export interface VuetifyProps {
         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';
+    variant?: VuetifyFieldVariant;
+    textVariant?: VuetifyFieldVariant;
     spacing?: {
         inputGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         rowGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/utils/achFieldHelpers.d.ts

@@ -0,0 +1,18 @@
+export declare const ACH_ROUTING_MAX_LENGTH: number;
+export declare const ACH_ACCOUNT_MAX_LENGTH: number;
+export declare const ACH_NAME_MAX_LENGTH: number;
+export declare const ACH_NAME_MIN_LENGTH: number;
+export declare const ACH_VALIDATION_MESSAGES: {
+    readonly routingRequired: "Routing number cannot be blank";
+    readonly routingInvalid: "Routing number is invalid";
+    readonly accountRequired: "Account number cannot be blank";
+    readonly accountInvalid: "Account number is invalid";
+    readonly nameRequired: "Account holder name cannot be blank";
+    readonly nameInvalid: "Account holder name is not valid; enter your full name and do not use special characters.";
+};
+export declare const normalizeAchTextValue: (value: unknown) => string;
+export declare const sanitizeAchDigits: (value: unknown, maxLength: number) => string;
+export declare const sanitizeAchName: (value: unknown, maxLength?: number) => string;
+export declare const isValidAchRoutingNumber: (value: string) => boolean;
+export declare const isValidAchAccountNumber: (value: string) => boolean;
+export declare const isValidAchFullName: (value: string) => boolean;

package/dist/utils/index.d.ts

@@ -12,8 +12,6 @@ export declare const truncateString: (str: string, limit: number) => string;
  * @returns cardholder truncated name
  */
 export declare const cardHolderName: (name: string) => string;
-export declare const getBrandImg: (brand: string) => string;
-export declare const getPaymentMethodIcon: (method: any) => string;
 export declare function hasPaymentMethodsReadScope(token: string | undefined): boolean;
 /**
  * Resolves a theme color for legacy callers. Prefer setting `color` / `fill` via CSS (`--avwc-color`) instead.

package/dist/utils/payoutIdentifier.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Validate payout email input (delegates to shared {@link isValidEmailAddress} on trimmed value).
+ */
+export declare const isValidEmail: (value: string) => boolean;
+/**
+ * Validate payout phone input with common US formats (uses shared phone patterns from utils).
+ */
+export declare const isValidPhone: (value: string) => boolean;
+/**
+ * Validate payout handle input (strips leading @ then uses shared {@link isValidHandle}).
+ */
+export declare const isValidPayoutHandle: (value: string) => boolean;
+/**
+ * Strip separators and normalize to 10-digit US number when possible.
+ */
+export declare const normalizeUsPhone: (value: string) => string;
+/**
+ * Format as (XXX) XXX-XXXX when possible (delegates to shared {@link mobileNumberFormat}).
+ */
+export declare const formatPhone: (value: string) => string;
+/**
+ * Formats US phone while typing, e.g. (981) 828-7032.
+ * Keeps partial state as digits are entered (used by tests; progressive UX if wired later).
+ */
+export declare const formatPhoneTyping: (value: string) => string;

package/dist/utils/paypalConfig.d.ts

@@ -0,0 +1,5 @@
+import { PayPalConfig } from '../types';
+/**
+ * Type guard: value is a PayPal module config object (`merchantId` + `clientId`, optional `redirectUrl`).
+ */
+export declare function isPayPalConfig(value: unknown): value is PayPalConfig;