@starfish-codes/hellgate 2.0.0-beta.2 → 2.0.0-beta.3

package/README.md

@@ -5,7 +5,7 @@
 
 ## Documentation
 
-https://developer.hellgate.io/docs/head-less-web-sdk-overview
+https://developer.hellgate.dev
 
 ## Development
 
@@ -15,19 +15,33 @@ https://developer.hellgate.io/docs/head-less-web-sdk-overview
 yarn
 ```
 
-### Start Demo App in dev mode
+### Start Iframe App in dev mode
 
-Create `demo/.env.dev` by copying `demo/.env.dev.example` and replace its variables with a real secrets
+```
+yarn iframe
+```
+
+Should be available on http://localhost:4044
+
+### Start Demo App in dev mode (Iframe app running is required)
+
+1. Create `demo/.env.dev` by copying `demo/.env.dev.example` (VITE_API_KEY is optional)
+
+```
+cp demo/.env.dev.example demo/.env.dev
+```
+
+2. Run demo app
 
 ```
-yarn start
+yarn demo
 ```
 
-Open http://127.0.0.1:5173/
+Open http://localhost:4040
 
-### Run tests locally in dev mode
+### Run tests locally in dev mode (Iframe app running is required)
 
-1. Create `.env.test` by copying `.env.test.example` and replace its variables with a real secrets
+1. Create `.env.test` by copying `.env.test.example`. (VITE_BT_API_KEY is required)
 
 ```
 cp .env.test.example .env.test

package/dist/{manifest.json → .vite/manifest.json}

@@ -1,7 +1,7 @@
 {
   "src/index.ts": {
     "file": "hellgate-sdk.umd.js",
-    "isEntry": true,
-    "src": "src/index.ts"
+    "src": "src/index.ts",
+    "isEntry": true
   }
 }

package/dist/__tests__/index.d.ts

@@ -0,0 +1 @@
+export * from './test-utils';

package/dist/__tests__/test-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function wait(milliseconds: number): Promise<unknown>;
+export declare function fill(input: HTMLInputElement, value: string): void;

package/dist/card/card-handler.d.ts

@@ -1,8 +1,9 @@
-import { BasisTheoryElements, CardElement, CardExpirationDateElement, CardNumberElement, CardVerificationCodeElement, ChangeEvent, CreateCardElementOptions } from '@basis-theory/basis-theory-js/types/elements';
 import { BasisTheory as IBasisTheory } from '@basis-theory/basis-theory-js/types/sdk';
 import { HellgateSession } from '../session';
-import { CreateCardFieldsOptions, PaymentAdditionalData, TokenizedData } from './typings';
-export type FormFieldState = Omit<ChangeEvent, 'type' | 'maskSatisfied'>;
+import { CreateCardFieldsOptions, CreateCardFormOptions, PaymentAdditionalData, TokenizedData } from './typings';
+import { CardElement, CardExpirationDateElement, CardNumberElement, CardVerificationCodeElement } from './ui/elements';
+import { CardValue, ChangeEvent, ElementBaseOptions } from './ui/typings';
+export type FormFieldState = Omit<ChangeEvent<CardValue>['data'], 'type'>;
 export declare class HellgateCardHandler {
     session: HellgateSession;
     private bt;
@@ -10,13 +11,14 @@ export declare class HellgateCardHandler {
     private cardElements;
     private stateChangeHandlers;
     static init(session: HellgateSession, bt_api_key: string): Promise<HellgateCardHandler>;
-    constructor(session: HellgateSession, bt: IBasisTheory & BasisTheoryElements);
-    createForm: (options?: CreateCardElementOptions) => CardElement;
+    constructor(session: HellgateSession, bt: IBasisTheory);
+    createForm: (options?: CreateCardFormOptions) => CardElement;
     createFormFields: (options?: CreateCardFieldsOptions) => {
         cardNumber: CardNumberElement;
         expiryDate: CardExpirationDateElement;
         securityCode: CardVerificationCodeElement;
     };
+    createTextField: (options?: ElementBaseOptions) => import("./ui/elements/text-element").TextElement;
     tokenize: () => Promise<TokenizedData>;
     onStateChange: (fn: (state: FormFieldState) => void) => void;
     clear: () => void;
@@ -27,6 +29,6 @@ export declare class HellgateCardHandler {
     private disableFormElements;
     private extractAdditionalData;
     private addElementStateListener;
-    private updateFormState;
+    updateFormState(): void;
     private createFieldDefaultState;
 }

package/dist/card/consts.d.ts

@@ -1,2 +1,2 @@
-import { ElementStyle } from '@basis-theory/basis-theory-js/types/elements';
+import { ElementStyle } from './ui/styles';
 export declare const FORM_ELEMENT_STYLE_DEFAULT: ElementStyle;

package/dist/card/index.d.ts

@@ -1,2 +1,3 @@
 export * from './card-handler';
 export * from './typings';
+export * from './ui';

package/dist/card/typings.d.ts

@@ -1,8 +1,11 @@
-import { CreateCardExpirationDateElementOptions, CreateCardNumberElementOptions, CreateCardVerificationCodeElementOptions } from '@basis-theory/basis-theory-js/types/elements';
-export type CreateCardFieldsOptions = Pick<CreateCardExpirationDateElementOptions, 'style' | 'disabled' | 'autoComplete' | 'validateOnChange'> & {
-    cardNumber?: Omit<CreateCardNumberElementOptions, 'targetId'>;
-    expiryDate?: Omit<CreateCardExpirationDateElementOptions, 'targetId'>;
-    securityCode?: Omit<CreateCardVerificationCodeElementOptions, 'targetId'>;
+import { ElementBaseOptions } from './ui/typings';
+export type CreateCardFormOptions = Pick<ElementBaseOptions, 'style' | 'disabled' | 'autocomplete' | 'placeholder' | 'ariaLabel'> & {
+    icon?: 'left' | 'right' | 'none';
+};
+export type CreateCardFieldsOptions = Pick<ElementBaseOptions, 'style' | 'disabled' | 'autocomplete'> & {
+    cardNumber?: ElementBaseOptions;
+    expiryDate?: ElementBaseOptions;
+    securityCode?: ElementBaseOptions;
 };
 export type PaymentAdditionalData = {
     cardholder_name?: string;
@@ -16,6 +19,7 @@ export type PaymentAdditionalData = {
         country?: string;
     };
 };
+export type TokenizeData = Record<string, unknown>;
 export type TokenizedData = {
     id: string;
 };

package/dist/card/ui/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const ELEMENTS_SELECTOR_INVALID = "DOM Element was not found";
+export declare const ELEMENTS_INIT_ERROR_MESSAGE = "WebSDK Elements was not properly initialized.";
+export declare const ELEMENTS_NON_DOM_ERROR_MESSAGE = "Tried to load WebSDKElements in a non-DOM environment.";
+export declare const ELEMENTS_SCRIPT_LOAD_ERROR_MESSAGE = "WebSDK Elements did not load properly.";
+export declare const ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE = "There was an unknown error when loading WebSDK Elements. Check the console for details.";
+export declare const CARD_BRANDS: readonly ["visa", "mastercard", "american-express", "discover", "diners-club", "jcb", "unionpay", "maestro", "elo", "hiper", "hipercard", "mir", "unknown"];
+export declare const CARD_ICON_POSITIONS: readonly ["left", "right", "none"];
+export declare const AUTOCOMPLETE_VALUES: readonly ["off", "on"];

package/dist/card/ui/elements/base-element.d.ts

@@ -0,0 +1,21 @@
+import { Explicit } from '../iframe/utils';
+import { CardElementEvents, ElementBaseOptions, ElementType, EventType, FindByType, Subscription } from '../typings';
+export declare abstract class CardElementBase<Value, IframeValue = string> {
+    readonly options: ElementBaseOptions<Value>;
+    private iframe;
+    private subscriptions;
+    value: Value | null;
+    protected abstract type: ElementType;
+    protected abstract extractValue: (rawValue: IframeValue | null) => Value | null;
+    protected abstract putValue: (rawValue: Value | null) => IframeValue | null;
+    constructor(options: ElementBaseOptions<Value>);
+    mount(selector: string | Element): Promise<void>;
+    update: ({ ...data }: ElementBaseOptions<Value>) => Promise<void>;
+    clear: () => void;
+    focus: () => void;
+    blur: () => void;
+    unmount: () => void;
+    on<T extends EventType>(eventType: T, listener: (event: FindByType<Explicit<CardElementEvents<Value>>, T>['data']) => void): Subscription;
+    private emitEvent;
+    private iframePostMessage;
+}

package/dist/card/ui/elements/card-expiration-date.d.ts

@@ -0,0 +1,14 @@
+import { CardExpirationDateValue, ElementType } from '../typings';
+import { CardElementBase } from './base-element';
+export declare function extractExpiryDateValue(rawValue: string | null): {
+    month: number | null;
+    year: number | null;
+};
+export declare function putExpiryDateValue(rawValue: CardExpirationDateValue | null): string | null;
+export declare class CardExpirationDateElement extends CardElementBase<CardExpirationDateValue> {
+    protected type: ElementType;
+    protected extractValue: typeof extractExpiryDateValue;
+    protected putValue: typeof putExpiryDateValue;
+    month: () => number | null;
+    year: () => number | null;
+}

package/dist/card/ui/elements/card-number.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from '../typings';
+import { CardElementBase } from './base-element';
+export declare function extractCardNumberValue(rawValue: string | null): string | null;
+export declare function putCardNumberValue(rawValue: string | null): string | null;
+export declare class CardNumberElement extends CardElementBase<string> {
+    protected type: ElementType;
+    protected extractValue: typeof extractCardNumberValue;
+    protected putValue: typeof putCardNumberValue;
+}

package/dist/card/ui/elements/card-verification-code.d.ts

@@ -0,0 +1,7 @@
+import { ElementType } from '../typings';
+import { CardElementBase } from './base-element';
+export declare class CardVerificationCodeElement extends CardElementBase<string> {
+    protected type: ElementType;
+    protected extractValue: (rawValue: string | null) => string | null;
+    protected putValue: (rawValue: string | null) => string | null;
+}

package/dist/card/ui/elements/card.d.ts

@@ -0,0 +1,19 @@
+import { IframeCardValue } from '../iframe/typings';
+import { CardValue, ElementType } from '../typings';
+import { CardElementBase } from './base-element';
+export declare class CardElement extends CardElementBase<CardValue, IframeCardValue> {
+    protected type: ElementType;
+    protected extractValue: (rawValue: IframeCardValue | null) => {
+        number: string | null;
+        expiry_date: {
+            month: number | null;
+            year: number | null;
+        } | null;
+        cvc: string | null;
+    } | null;
+    protected putValue: (rawValue: CardValue | null) => {
+        cardNumber: string | null;
+        cardExpirationDate: string | null;
+        cardVerificationCode: string | null;
+    } | null;
+}

package/dist/card/ui/elements/index.d.ts

@@ -0,0 +1,5 @@
+export * from './card';
+export * from './card-expiration-date';
+export * from './card-number';
+export * from './card-verification-code';
+export * from './utils';

package/dist/card/ui/elements/text-element.d.ts

@@ -0,0 +1,7 @@
+import { ElementType } from '../typings';
+import { CardElementBase } from './base-element';
+export declare class TextElement extends CardElementBase<string> {
+    protected type: ElementType;
+    protected extractValue: (rawValue: string | null) => string | null;
+    protected putValue: (rawValue: string | null) => string | null;
+}

package/dist/card/ui/elements/utils.d.ts

@@ -0,0 +1,15 @@
+import { ElementBaseOptions } from '../typings';
+import { CardElement } from './card';
+import { CardExpirationDateElement } from './card-expiration-date';
+import { CardNumberElement } from './card-number';
+import { CardVerificationCodeElement } from './card-verification-code';
+import { TextElement } from './text-element';
+type Elements = {
+    card: CardElement;
+    cardNumber: CardNumberElement;
+    cardExpirationDate: CardExpirationDateElement;
+    cardVerificationCode: CardVerificationCodeElement;
+    text: TextElement;
+};
+export declare function createElement<T extends keyof Elements>(type: T, options: ElementBaseOptions): Elements[T];
+export {};

package/dist/card/ui/iframe/__tests__/iframe-elements.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/card/ui/iframe/elements/base-element.d.ts

@@ -0,0 +1,34 @@
+import { CreditCardType } from 'credit-card-type/dist/types';
+import { FactoryArg, InputMask, Masked } from 'imask';
+import { BaseElement, CardElementEvents, ElementBaseOptions, ElementEventListener, ElementMetadata, ElementType, EventType, Subscription } from '../../typings';
+export type PostMessageOptions = {
+    postMessageOrigin: string;
+    postMessageRoot: Window;
+};
+export declare abstract class IframeCardElementBase implements BaseElement<ElementBaseOptions, CardElementEvents<string>, string> {
+    protected rootNode: Element;
+    protected postMessageOptions: PostMessageOptions;
+    protected inputNode?: HTMLInputElement;
+    protected subscriptions: {
+        [Key in EventType]: ElementEventListener<CardElementEvents<string>, Key>[];
+    };
+    abstract readonly type: ElementType;
+    protected abstract options: ElementBaseOptions;
+    protected abstract inputMaskOptions: FactoryArg;
+    protected inputMask?: InputMask<FactoryArg>;
+    private id;
+    cardType?: CreditCardType;
+    value: null;
+    constructor(rootNode: Element, postMessageOptions: PostMessageOptions);
+    mount(): Promise<void>;
+    unmount(): void;
+    focus(): void;
+    blur(): void;
+    clear(): void;
+    updateCardType(cardTypeName: string | undefined): void;
+    update(options: ElementBaseOptions): Promise<void>;
+    on<T extends EventType>(eventType: T, listener: ElementEventListener<CardElementEvents<string>, T>): Subscription;
+    private emitEvent;
+    protected validate(masked: Masked): ElementMetadata;
+    protected renderHTML(): string;
+}

package/dist/card/ui/iframe/elements/card-expiration-date.d.ts

@@ -0,0 +1,10 @@
+import { FactoryArg, Masked } from 'imask';
+import { ElementBaseOptions, ElementMetadata, ElementType, ITextElement } from '../../typings';
+import { IframeCardElementBase } from './base-element';
+export declare class IframeCardExpirationDate extends IframeCardElementBase implements ITextElement {
+    readonly type: ElementType;
+    protected options: ElementBaseOptions;
+    compiledMask?: Masked;
+    protected inputMaskOptions: FactoryArg;
+    protected validate(masked: Masked): ElementMetadata;
+}

package/dist/card/ui/iframe/elements/card-number.d.ts

@@ -0,0 +1,12 @@
+import { FactoryArg, Masked } from 'imask';
+import { CardNumberAdditionalData, ElementBaseOptions, ElementMetadata, ElementType, ITextElement } from '../../typings';
+import { IframeCardElementBase } from './base-element';
+export type IconPosition = 'left' | 'right' | 'none';
+export declare class IframeCardNumber extends IframeCardElementBase implements ITextElement {
+    readonly type: ElementType;
+    protected options: ElementBaseOptions;
+    protected inputMaskOptions: FactoryArg;
+    update(options: ElementBaseOptions): Promise<void>;
+    protected validate(masked: Masked): ElementMetadata & CardNumberAdditionalData;
+    protected renderHTML(): string;
+}

package/dist/card/ui/iframe/elements/card-verification-code.d.ts

@@ -0,0 +1,8 @@
+import { FactoryArg } from 'imask';
+import { ElementBaseOptions, ElementType, ITextElement } from '../../typings';
+import { IframeCardElementBase } from './base-element';
+export declare class IframeCardVerificationCode extends IframeCardElementBase implements ITextElement {
+    readonly type: ElementType;
+    protected options: ElementBaseOptions;
+    protected inputMaskOptions: FactoryArg;
+}

package/dist/card/ui/iframe/elements/card.d.ts

@@ -0,0 +1,25 @@
+import { CardElementEvents, ElementBaseOptions, ElementEventListener, ElementType, EventType, ICardElement, Subscription } from '../../typings';
+import { IframeCardValue } from '../typings';
+import { PostMessageOptions } from './base-element';
+export declare class IframeCard implements ICardElement<IframeCardValue> {
+    protected rootNode: Element;
+    protected postMessageOptions: PostMessageOptions;
+    protected type: ElementType;
+    private elements;
+    value: IframeCardValue;
+    private options;
+    protected subscriptions: {
+        [Key in EventType]: ElementEventListener<CardElementEvents<IframeCardValue>, Key>[];
+    };
+    private id;
+    constructor(rootNode: Element, postMessageOptions: PostMessageOptions);
+    mount(): Promise<void>;
+    unmount(): void;
+    clear(): void;
+    focus(): void;
+    blur(): void;
+    update({ style, ...options }: ElementBaseOptions<IframeCardValue>): Promise<void>;
+    on<T extends EventType>(eventType: T, listener: ElementEventListener<CardElementEvents<IframeCardValue>, T>): Subscription;
+    private onFieldChange;
+    private emitEvent;
+}

package/dist/card/ui/iframe/elements/text-element.d.ts

@@ -0,0 +1,8 @@
+import { FactoryArg } from 'imask';
+import { ElementBaseOptions, ElementType, ITextElement } from '../../typings';
+import { IframeCardElementBase } from './base-element';
+export declare class IframeTextElement extends IframeCardElementBase implements ITextElement {
+    readonly type: ElementType;
+    protected options: ElementBaseOptions;
+    protected inputMaskOptions: FactoryArg;
+}

package/dist/card/ui/iframe/elements/typings.d.ts

@@ -0,0 +1,16 @@
+import { ElementEventListener, ElementMetadata, EventType, Subscription } from '../../typings';
+export type IframeBaseElement = {
+    mount(): void;
+};
+export interface BaseElement<UpdateOptions, ElementEvents> {
+    readonly mounted: boolean;
+    readonly metadata: ElementMetadata;
+    mount(selector: string): Promise<void>;
+    mount(element: Element | string): Promise<void>;
+    update(options: UpdateOptions): Promise<void>;
+    clear(): void;
+    focus(): void;
+    blur(): void;
+    unmount(): void;
+    on<T extends EventType>(eventType: T, listener: ElementEventListener<ElementEvents, T>): Subscription;
+}

package/dist/card/ui/iframe/iframe.d.ts

@@ -0,0 +1,2 @@
+export declare function initElementsIframe(rootId: string): void;
+export declare function mountElements(rootId: string): Promise<void>;

package/dist/card/ui/iframe/index.d.ts

@@ -0,0 +1 @@
+export * from './iframe';

package/dist/card/ui/iframe/typings.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement, ElementBaseOptions, ElementType } from '../typings';
+type IframeEventType = keyof Pick<BaseElement<ElementBaseOptions, unknown, string>, 'blur' | 'clear' | 'focus' | 'mount' | 'unmount' | 'update'>;
+interface IframeBaseEvent<T extends IframeEventType> {
+    type: T;
+}
+export type IframeCardValue = Partial<Record<Exclude<ElementType, 'card'>, string | null>>;
+export type IframeEvent<Value = unknown> = IframeBaseEvent<'blur'> | IframeBaseEvent<'clear'> | IframeBaseEvent<'focus'> | IframeBaseEvent<'mount'> | IframeBaseEvent<'unmount'> | (IframeBaseEvent<'update'> & {
+    data: ElementBaseOptions<Value>;
+});
+export {};

package/dist/card/ui/iframe/utils.d.ts

@@ -0,0 +1,24 @@
+import { ElementStyle } from '../styles';
+import { ElementBaseOptions, ElementType } from '../typings';
+type IframeSearchParams = {
+    field: ElementType;
+    origin: string;
+};
+export declare function parseURLSearchParams(): IframeSearchParams;
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+type ObjectKeys = string | number | symbol;
+type Keys<TUnion> = TUnion extends unknown ? keyof TUnion : never;
+export type Explicit<T> = Keys<T> extends infer K ? T extends unknown ? T & {
+    [key in K extends ObjectKeys ? K extends keyof T ? never : K : never]?: undefined;
+} extends infer X ? {
+    [k in keyof X]: X[k];
+} : never : never : never;
+export declare function camelCaseToDashCase(value: string): string;
+export declare function findStyleElement(name: string): Element | null;
+export declare function appendStyleElement(name: string): void;
+export declare function appendFontElement(href: string): void;
+export declare function generateElementId(type: ElementType): string;
+export declare function mergeOptions(options1: ElementBaseOptions, options2: ElementBaseOptions): ElementBaseOptions;
+export declare function mergeStyles(style1: ElementStyle, style2: ElementStyle): ElementStyle;
+export declare function applyStyle(id: string, { fonts, ...styles }: ElementStyle): void;
+export {};

package/dist/card/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './elements';

package/dist/card/ui/styles.d.ts

@@ -0,0 +1,20 @@
+import type { Properties as CSSProperties } from 'csstype';
+declare const SAFE_CSS_PROPERTIES: readonly ["backgroundColor", "color", "fontFamily", "fontSize", "fontSmooth", "fontStyle", "fontVariant", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "padding", "textDecoration", "textShadow", "textTransform"];
+type SafeCSSProperty = (typeof SAFE_CSS_PROPERTIES)[number];
+declare const SAFE_CSS_PROPERTIES_ALTERNATES: Partial<Record<SafeCSSProperty, string[]>>;
+declare const SAFE_CSS_PROPERTIES_WITH_ALTERNATES: string[];
+type SafeStyle = Pick<CSSProperties, SafeCSSProperty>;
+declare const CARD_ELEMENT_STYLE_VARIANT_SELECTORS: readonly [":hover", ":focus", ":read-only", "::placeholder", "::selection", ":disabled"];
+type CardElementStyleVariantSelector = (typeof CARD_ELEMENT_STYLE_VARIANT_SELECTORS)[number];
+type CardElementStyleVariantStyle = SafeStyle & Partial<Record<CardElementStyleVariantSelector, SafeStyle>>;
+declare const CARD_ELEMENT_STYLE_VARIANTS: readonly ["base", "complete", "invalid", "empty"];
+declare const CARD_ELEMENT_STYLE_FONTS_ATTR: "fonts";
+type CardElementStyleVariant = (typeof CARD_ELEMENT_STYLE_VARIANTS)[number];
+type CardElementStyleFontAttr = typeof CARD_ELEMENT_STYLE_FONTS_ATTR;
+type FontSource = string;
+type FontSources = FontSource[];
+type Fonts = Record<CardElementStyleFontAttr, FontSources>;
+type CardElementStyle = Partial<Record<CardElementStyleVariant, CardElementStyleVariantStyle> & Fonts>;
+type ElementStyle = CardElementStyle;
+export { CARD_ELEMENT_STYLE_FONTS_ATTR, CARD_ELEMENT_STYLE_VARIANTS, CARD_ELEMENT_STYLE_VARIANT_SELECTORS, SAFE_CSS_PROPERTIES, SAFE_CSS_PROPERTIES_ALTERNATES, SAFE_CSS_PROPERTIES_WITH_ALTERNATES, };
+export type { CardElementStyle, CardElementStyleVariant, CardElementStyleVariantSelector, CardElementStyleVariantStyle, ElementStyle, FontSources, Fonts, SafeCSSProperty, SafeStyle, };

package/dist/card/ui/typings.d.ts

@@ -0,0 +1,86 @@
+import { IconPosition } from './iframe/elements/card-number';
+import { ElementStyle } from './styles';
+export type ListenableKey = 'Escape' | 'Enter';
+export declare const LISTENABLE_KEYS: ListenableKey[];
+type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown';
+export declare const EVENT_TYPES: EventType[];
+type BaseEvent<T extends EventType, TData = unknown> = {
+    type: T;
+    element: ElementType;
+} & (TData extends object ? {
+    data: TData;
+} : unknown);
+type ReadyEvent = BaseEvent<'ready'>;
+type ChangeEvent<Value> = BaseEvent<'change', {
+    empty: boolean;
+    complete: boolean;
+    valid?: boolean;
+    error?: string;
+    value: Value | null;
+}>;
+type InputFocusEvent = BaseEvent<'focus'>;
+type InputBlurEvent = BaseEvent<'blur'>;
+type InputKeydownEvent = BaseEvent<'keydown', {
+    key: ListenableKey;
+} & Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey'>>;
+type BaseElementEvents = ReadyEvent | InputFocusEvent | InputBlurEvent | InputKeydownEvent;
+type CardElementEvents<Value> = BaseElementEvents | ChangeEvent<Value>;
+/**
+ * Utility type that helps find a Union type based on a `type` property
+ */
+type FindByType<Union, Type extends EventType> = Union extends {
+    type: Type;
+} ? Union : never;
+type ElementEventListener<Events, Type extends EventType> = (event: FindByType<Events, Type>) => void;
+interface Subscription {
+    unsubscribe(): void;
+}
+export type { BaseElementEvents, BaseEvent, CardElementEvents, ChangeEvent, ElementEventListener, EventType, FindByType, InputBlurEvent, InputFocusEvent, InputKeydownEvent, ReadyEvent, Subscription, };
+export type ElementType = 'card' | 'cardNumber' | 'cardExpirationDate' | 'cardVerificationCode' | 'text';
+export declare const ELEMENT_TYPES: ElementType[];
+export type ElementMetadata = {
+    complete: boolean;
+    valid: boolean;
+    empty: boolean;
+    error?: string;
+};
+export interface BaseElement<UpdateOptions, ElementEvents, Value> {
+    value: Value | null;
+    mount(selector: string): Promise<void>;
+    mount(element: Element | string): Promise<void>;
+    update(options: UpdateOptions): Promise<void>;
+    clear(): void;
+    focus(): void;
+    blur(): void;
+    unmount(): void;
+    on<T extends EventType>(eventType: T, listener: ElementEventListener<ElementEvents, T>): Subscription;
+}
+export type ElementBaseOptions<Value = unknown> = {
+    style?: ElementStyle;
+    disabled?: boolean;
+    autocomplete?: 'on' | 'off';
+    placeholder?: string;
+    ariaLabel?: string;
+    icon?: IconPosition;
+    value?: Value;
+};
+/**
+ * Card brands type
+ */
+export type ICardNumberElement = BaseElement<ElementBaseOptions, CardElementEvents<string>, string>;
+export type CardNumberAdditionalData = {
+    cardBrand?: string;
+};
+export type CardExpirationDateValue = {
+    month: number | null;
+    year: number | null;
+};
+export type ICardExpirationDateElement = BaseElement<ElementBaseOptions, CardElementEvents<CardExpirationDateValue>, CardExpirationDateValue>;
+export type ICardVerificationCodeElement = BaseElement<ElementBaseOptions, CardElementEvents<string>, string>;
+export type ITextElement = BaseElement<ElementBaseOptions, CardElementEvents<string>, string>;
+export type CardValue = {
+    number: string | null;
+    expiry_date: CardExpirationDateValue | null;
+    cvc: string | null;
+};
+export type ICardElement<Value = CardValue> = BaseElement<ElementBaseOptions, CardElementEvents<Value>, Value>;