@basis-theory/react-elements 1.5.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -1
- package/dist/LICENSE +202 -0
- package/dist/README.md +126 -0
- package/dist/main/index.js +413 -0
- package/dist/module/module.js +391 -0
- package/dist/package.json +41 -0
- package/dist/types/index.d.ts +617 -0
- package/dist/types/react-elements/src/core/BasisTheoryProvider.d.ts +11 -0
- package/dist/types/react-elements/src/core/index.d.ts +4 -0
- package/dist/types/react-elements/src/core/useBasisTheory.d.ts +9 -0
- package/dist/types/react-elements/src/elements/CardElement.d.ts +26 -0
- package/dist/types/react-elements/src/elements/CardExpirationDateElement.d.ts +26 -0
- package/dist/types/react-elements/src/elements/CardNumberElement.d.ts +29 -0
- package/dist/types/react-elements/src/elements/CardVerificationCodeElement.d.ts +27 -0
- package/dist/types/react-elements/src/elements/TextElement.d.ts +35 -0
- package/dist/types/react-elements/src/elements/index.d.ts +10 -0
- package/dist/types/react-elements/src/elements/useBasisTheoryValue.d.ts +10 -0
- package/dist/types/react-elements/src/elements/useElement.d.ts +16 -0
- package/dist/types/react-elements/src/elements/useListener.d.ts +3 -0
- package/dist/types/react-elements/src/index.d.ts +2 -0
- package/dist/types/react-elements/src/types.d.ts +1 -0
- package/dist/types/web-elements/src/BasisTheory.d.ts +8 -0
- package/dist/types/web-elements/src/common/logging.d.ts +8 -0
- package/dist/types/web-elements/src/elements/constants.d.ts +9 -0
- package/dist/types/web-elements/src/elements/getOrCreateScriptElement.d.ts +1 -0
- package/dist/types/web-elements/src/elements/index.d.ts +2 -0
- package/dist/types/web-elements/src/elements/loadElements.d.ts +3 -0
- package/dist/types/web-elements/src/index.d.ts +8 -0
- package/dist/types/web-elements/src/types/elements/cardTypes.d.ts +29 -0
- package/dist/types/web-elements/src/types/elements/elements.d.ts +74 -0
- package/dist/types/web-elements/src/types/elements/events.d.ts +40 -0
- package/dist/types/web-elements/src/types/elements/index.d.ts +7 -0
- package/dist/types/web-elements/src/types/elements/options.d.ts +98 -0
- package/dist/types/web-elements/src/types/elements/services/index.d.ts +4 -0
- package/dist/types/web-elements/src/types/elements/services/proxy.d.ts +27 -0
- package/dist/types/web-elements/src/types/elements/services/sessions.d.ts +11 -0
- package/dist/types/web-elements/src/types/elements/services/shared.d.ts +21 -0
- package/dist/types/web-elements/src/types/elements/services/token-intents.d.ts +6 -0
- package/dist/types/web-elements/src/types/elements/services/tokenize.d.ts +8 -0
- package/dist/types/web-elements/src/types/elements/services/tokens.d.ts +7 -0
- package/dist/types/web-elements/src/types/elements/shared.d.ts +51 -0
- package/dist/types/web-elements/src/types/elements/styles.d.ts +25 -0
- package/dist/types/web-elements/src/types/index.d.ts +1 -0
- package/dist/types/web-elements/src/types/models/bin-details.d.ts +38 -0
- package/dist/types/web-elements/src/types/models/cards.d.ts +7 -0
- package/dist/types/web-elements/src/types/models/index.d.ts +7 -0
- package/dist/types/web-elements/src/types/models/shared.d.ts +22 -0
- package/dist/types/web-elements/src/types/models/token-intents.d.ts +28 -0
- package/dist/types/web-elements/src/types/models/tokenize.d.ts +7 -0
- package/dist/types/web-elements/src/types/models/tokens.d.ts +53 -0
- package/dist/types/web-elements/src/types/models/util.d.ts +11 -0
- package/dist/types/web-elements/src/types/sdk/index.d.ts +1 -0
- package/dist/types/web-elements/src/types/sdk/services/http.d.ts +11 -0
- package/dist/types/web-elements/src/types/sdk/services/index.d.ts +1 -0
- package/dist/types/web-elements/src/version.d.ts +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
|
+
import type { CardExpirationDateElement as ICardExpirationDateElement, CreateCardExpirationDateElementOptions, ElementEventListener, ElementStyle, CardExpirationDateElementEvents, CardExpirationDateValue, InputMode, CopyIconStyles } from '@basis-theory/basis-theory-js/types/elements';
|
|
3
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
4
|
+
interface CardExpirationDateElementProps {
|
|
5
|
+
'aria-label'?: string;
|
|
6
|
+
autoComplete?: CreateCardExpirationDateElementOptions['autoComplete'];
|
|
7
|
+
bt?: BasisTheoryElements;
|
|
8
|
+
copyIconStyles?: CopyIconStyles;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
enableCopy?: boolean;
|
|
11
|
+
id: string;
|
|
12
|
+
inputMode?: `${InputMode}`;
|
|
13
|
+
onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
|
|
14
|
+
onChange?: ElementEventListener<CardExpirationDateElementEvents, 'change'>;
|
|
15
|
+
onFocus?: ElementEventListener<CardExpirationDateElementEvents, 'focus'>;
|
|
16
|
+
onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
|
|
17
|
+
onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
readOnly?: boolean;
|
|
20
|
+
style?: ElementStyle;
|
|
21
|
+
validateOnChange?: boolean;
|
|
22
|
+
value?: CardExpirationDateValue<'static'> | string;
|
|
23
|
+
valueRef?: MutableRefObject<ICardExpirationDateElement | null>;
|
|
24
|
+
}
|
|
25
|
+
export declare const CardExpirationDateElement: React.ForwardRefExoticComponent<CardExpirationDateElementProps & React.RefAttributes<ICardExpirationDateElement>>;
|
|
26
|
+
export type { CardExpirationDateElementProps };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
|
+
import type { CardNumberElement as ICardNumberElement, CreateCardNumberElementOptions, ElementEventListener, ElementStyle, CardNumberElementEvents, SanitizedElementOptions, InputMode, CreditCardType, CopyIconStyles } from '@basis-theory/basis-theory-js/types/elements';
|
|
3
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
4
|
+
interface CardNumberElementProps {
|
|
5
|
+
'aria-label'?: string;
|
|
6
|
+
autoComplete?: CreateCardNumberElementOptions['autoComplete'];
|
|
7
|
+
bt?: BasisTheoryElements;
|
|
8
|
+
cardTypes?: CreditCardType[];
|
|
9
|
+
copyIconStyles?: CopyIconStyles;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
enableCopy?: boolean;
|
|
12
|
+
iconPosition?: SanitizedElementOptions['iconPosition'];
|
|
13
|
+
id: string;
|
|
14
|
+
inputMode?: `${InputMode}`;
|
|
15
|
+
onBlur?: ElementEventListener<CardNumberElementEvents, 'blur'>;
|
|
16
|
+
onChange?: ElementEventListener<CardNumberElementEvents, 'change'>;
|
|
17
|
+
onFocus?: ElementEventListener<CardNumberElementEvents, 'focus'>;
|
|
18
|
+
onKeyDown?: ElementEventListener<CardNumberElementEvents, 'keydown'>;
|
|
19
|
+
onReady?: ElementEventListener<CardNumberElementEvents, 'ready'>;
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
readOnly?: boolean;
|
|
22
|
+
skipLuhnValidation?: boolean;
|
|
23
|
+
style?: ElementStyle;
|
|
24
|
+
validateOnChange?: boolean;
|
|
25
|
+
value?: string;
|
|
26
|
+
valueRef?: MutableRefObject<ICardNumberElement | null>;
|
|
27
|
+
}
|
|
28
|
+
export declare const CardNumberElement: React.ForwardRefExoticComponent<CardNumberElementProps & React.RefAttributes<ICardNumberElement>>;
|
|
29
|
+
export type { CardNumberElementProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
|
+
import type { CardVerificationCodeElement as ICardVerificationCodeElement, CreateCardVerificationCodeElementOptions, ElementEventListener, ElementStyle, CardVerificationCodeElementEvents, Brand, InputMode, CopyIconStyles } from '@basis-theory/basis-theory-js/types/elements';
|
|
3
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
4
|
+
interface CardVerificationCodeElementProps {
|
|
5
|
+
'aria-label'?: string;
|
|
6
|
+
autoComplete?: CreateCardVerificationCodeElementOptions['autoComplete'];
|
|
7
|
+
bt?: BasisTheoryElements;
|
|
8
|
+
cardBrand?: Brand | string;
|
|
9
|
+
copyIconStyles?: CopyIconStyles;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
enableCopy?: boolean;
|
|
12
|
+
id: string;
|
|
13
|
+
inputMode?: `${InputMode}`;
|
|
14
|
+
onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
|
|
15
|
+
onChange?: ElementEventListener<CardVerificationCodeElementEvents, 'change'>;
|
|
16
|
+
onFocus?: ElementEventListener<CardVerificationCodeElementEvents, 'focus'>;
|
|
17
|
+
onKeyDown?: ElementEventListener<CardVerificationCodeElementEvents, 'keydown'>;
|
|
18
|
+
onReady?: ElementEventListener<CardVerificationCodeElementEvents, 'ready'>;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
readOnly?: boolean;
|
|
21
|
+
style?: ElementStyle;
|
|
22
|
+
validateOnChange?: boolean;
|
|
23
|
+
value?: string;
|
|
24
|
+
valueRef?: MutableRefObject<ICardVerificationCodeElement | null>;
|
|
25
|
+
}
|
|
26
|
+
export declare const CardVerificationCodeElement: React.ForwardRefExoticComponent<CardVerificationCodeElementProps & React.RefAttributes<ICardVerificationCodeElement>>;
|
|
27
|
+
export type { CardVerificationCodeElementProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
|
+
import type { TextElement as ITextElement, CreateTextElementOptions, ElementEventListener, ElementStyle, TextElementEvents, InputMode } from '@basis-theory/basis-theory-js/types/elements';
|
|
3
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
4
|
+
interface BaseTextElementProps {
|
|
5
|
+
'aria-label'?: string;
|
|
6
|
+
autoComplete?: CreateTextElementOptions['autoComplete'];
|
|
7
|
+
bt?: BasisTheoryElements;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
id: string;
|
|
10
|
+
inputMode?: `${InputMode}`;
|
|
11
|
+
maxLength?: HTMLInputElement['maxLength'];
|
|
12
|
+
onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
|
|
13
|
+
onChange?: ElementEventListener<TextElementEvents, 'change'>;
|
|
14
|
+
onFocus?: ElementEventListener<TextElementEvents, 'focus'>;
|
|
15
|
+
onKeyDown?: ElementEventListener<TextElementEvents, 'keydown'>;
|
|
16
|
+
onReady?: ElementEventListener<TextElementEvents, 'ready'>;
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
readOnly?: boolean;
|
|
19
|
+
style?: ElementStyle;
|
|
20
|
+
transform?: RegExp | [RegExp, string?];
|
|
21
|
+
validation?: RegExp;
|
|
22
|
+
value?: string;
|
|
23
|
+
valueRef?: MutableRefObject<ITextElement | null>;
|
|
24
|
+
}
|
|
25
|
+
interface MaskedTextElementProps extends BaseTextElementProps {
|
|
26
|
+
mask?: (RegExp | string)[];
|
|
27
|
+
password?: false;
|
|
28
|
+
}
|
|
29
|
+
interface PasswordTextElementProps extends BaseTextElementProps {
|
|
30
|
+
mask?: never;
|
|
31
|
+
password: true;
|
|
32
|
+
}
|
|
33
|
+
type TextElementProps = MaskedTextElementProps | PasswordTextElementProps;
|
|
34
|
+
export declare const TextElement: React.ForwardRefExoticComponent<TextElementProps & React.RefAttributes<ITextElement>>;
|
|
35
|
+
export type { TextElementProps };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { CardElement } from './CardElement';
|
|
2
|
+
export type { CardElementProps } from './CardElement';
|
|
3
|
+
export { TextElement } from './TextElement';
|
|
4
|
+
export type { TextElementProps } from './TextElement';
|
|
5
|
+
export { CardNumberElement } from './CardNumberElement';
|
|
6
|
+
export type { CardNumberElementProps } from './CardNumberElement';
|
|
7
|
+
export { CardExpirationDateElement } from './CardExpirationDateElement';
|
|
8
|
+
export type { CardExpirationDateElementProps } from './CardExpirationDateElement';
|
|
9
|
+
export { CardVerificationCodeElement } from './CardVerificationCodeElement';
|
|
10
|
+
export type { CardVerificationCodeElementProps } from './CardVerificationCodeElement';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
2
|
+
/**
|
|
3
|
+
* Resolves which BasisTheoryReact instance to use,
|
|
4
|
+
* by favoring the optional parameter.
|
|
5
|
+
* For internal use only.
|
|
6
|
+
* @param bt
|
|
7
|
+
* @returns parameter if it exists; instance from Context otherwise
|
|
8
|
+
*/
|
|
9
|
+
declare const useBasisTheoryValue: (bt?: BasisTheoryElements) => BasisTheoryElements | undefined;
|
|
10
|
+
export { useBasisTheoryValue };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ForwardedRef, MutableRefObject } from 'react';
|
|
2
|
+
import type { BaseElement, ElementType } from '@basis-theory/basis-theory-js/types/elements';
|
|
3
|
+
import type { BasisTheoryElements } from '@basis-theory/web-elements';
|
|
4
|
+
/**
|
|
5
|
+
* Creates, mounts and indexes an Element
|
|
6
|
+
* with React lifecycle
|
|
7
|
+
* @param id
|
|
8
|
+
* @param type
|
|
9
|
+
* @param options
|
|
10
|
+
* @param wrapperRef
|
|
11
|
+
* @param btFromProps
|
|
12
|
+
* @param ref optional ref to set the underlying element
|
|
13
|
+
* @returns created element and initial options used for mounting
|
|
14
|
+
*/
|
|
15
|
+
declare const useElement: <Element extends BaseElement<any, any>, Options extends unknown>(id: string, type: ElementType, wrapperRef: React.RefObject<HTMLDivElement>, options: Options, btFromProps?: BasisTheoryElements, ref?: ForwardedRef<Element>, targetValueRef?: MutableRefObject<Element | null>) => Element | undefined;
|
|
16
|
+
export { useElement };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { BaseElement, ElementEventListener, EventType } from '@basis-theory/basis-theory-js/types/elements';
|
|
2
|
+
declare const useListener: <T extends EventType, Ev, E extends BaseElement<unknown, Ev>>(eventType: T, element?: E, listener?: ElementEventListener<Ev, T>) => void;
|
|
3
|
+
export { useListener };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@basis-theory/basis-theory-js/types/elements';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BasisTheoryElements } from './types/elements';
|
|
2
|
+
interface BasisTheoryInitOptions {
|
|
3
|
+
_devMode?: boolean;
|
|
4
|
+
disableTelemetry?: boolean;
|
|
5
|
+
useSameOriginApi?: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare const basistheory: (apiKey: string, options?: BasisTheoryInitOptions) => Promise<BasisTheoryElements | undefined>;
|
|
8
|
+
export { basistheory, BasisTheoryInitOptions };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const logger: {
|
|
2
|
+
setTelemetryEnabled: (enabled: boolean) => void;
|
|
3
|
+
log: {
|
|
4
|
+
error: (message: string, attributes?: {}) => Promise<void>;
|
|
5
|
+
info: (message: string, attributes?: {}) => Promise<void>;
|
|
6
|
+
warn: (message: string, attributes?: {}) => Promise<void>;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare const ELEMENTS_INIT_ERROR_MESSAGE = "BasisTheory Elements was not properly initialized.";
|
|
2
|
+
declare const ELEMENTS_NON_DOM_ERROR_MESSAGE = "Tried to load BasisTheoryElements in a non-DOM environment.";
|
|
3
|
+
declare const ELEMENTS_SCRIPT_LOAD_ERROR_MESSAGE = "Basis Theory Elements did not load properly. Check network tab for more details.";
|
|
4
|
+
declare const ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE = "Unable to load the Elements script. This may be due to network restrictions or browser extensions like ad blockers interfering with script loading. Check browser settings or network connection and try again.";
|
|
5
|
+
declare const ELEMENTS_SCRIPT_FAILED_TO_DELIVER = "Failed to deliver Elements script from Basis Theory. Check your network connection and try again or contact support@basistheory.com";
|
|
6
|
+
declare const CARD_BRANDS: readonly ["visa", "mastercard", "american-express", "discover", "diners-club", "jcb", "unionpay", "maestro", "elo", "hiper", "hipercard", "mir", "unknown"];
|
|
7
|
+
declare const CARD_ICON_POSITIONS: readonly ["left", "right", "none"];
|
|
8
|
+
declare const AUTOCOMPLETE_VALUES: readonly ["additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "billing", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "fax", "given-name", "home", "honorific-prefix", "honorific-suffix", "language", "mobile", "name", "new-password", "nickname", "off", "on", "one-time-code", "organization-title", "organization", "page", "postal-code", "sex", "shipping", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username", "work"];
|
|
9
|
+
export { AUTOCOMPLETE_VALUES, CARD_BRANDS, CARD_ICON_POSITIONS, ELEMENTS_INIT_ERROR_MESSAGE, ELEMENTS_NON_DOM_ERROR_MESSAGE, ELEMENTS_SCRIPT_FAILED_TO_DELIVER, ELEMENTS_SCRIPT_LOAD_ERROR_MESSAGE, ELEMENTS_SCRIPT_UNKNOWN_ERROR_MESSAGE, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getOrCreateScriptElement: (url: string) => HTMLScriptElement;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
type CardBrandId = 'american-express' | 'diners-club' | 'discover' | 'elo' | 'hiper' | 'hipercard' | 'jcb' | 'maestro' | 'mastercard' | 'mir' | 'unionpay' | 'visa';
|
|
2
|
+
type CardBrandNiceType = 'American Express' | 'Diners Club' | 'Discover' | 'Elo' | 'Hiper' | 'Hipercard' | 'JCB' | 'Maestro' | 'Mastercard' | 'Mir' | 'UnionPay' | 'Visa';
|
|
3
|
+
type SecurityCodeLabel = 'CVV' | 'CVC' | 'CID' | 'CVN' | 'CVE' | 'CVP2';
|
|
4
|
+
type CreditCardType = {
|
|
5
|
+
code: {
|
|
6
|
+
size: number;
|
|
7
|
+
name: SecurityCodeLabel | string;
|
|
8
|
+
};
|
|
9
|
+
gaps: number[];
|
|
10
|
+
lengths: number[];
|
|
11
|
+
niceType: CardBrandNiceType | string;
|
|
12
|
+
patterns: (number | [number, number])[];
|
|
13
|
+
type: CardBrandId | string;
|
|
14
|
+
};
|
|
15
|
+
declare const VISA: CreditCardType;
|
|
16
|
+
declare const MASTERCARD: CreditCardType;
|
|
17
|
+
declare const AMERICAN_EXPRESS: CreditCardType;
|
|
18
|
+
declare const DINERS_CLUB: CreditCardType;
|
|
19
|
+
declare const DISCOVER: CreditCardType;
|
|
20
|
+
declare const JCB: CreditCardType;
|
|
21
|
+
declare const UNION_PAY: CreditCardType;
|
|
22
|
+
declare const MAESTRO: CreditCardType;
|
|
23
|
+
declare const ELO: CreditCardType;
|
|
24
|
+
declare const MIR: CreditCardType;
|
|
25
|
+
declare const HIPER: CreditCardType;
|
|
26
|
+
declare const HIPERCARD: CreditCardType;
|
|
27
|
+
declare const DEFAULT_CARD_TYPES: CreditCardType[];
|
|
28
|
+
export { AMERICAN_EXPRESS, DEFAULT_CARD_TYPES, DINERS_CLUB, DISCOVER, ELO, HIPER, HIPERCARD, JCB, MAESTRO, MASTERCARD, MIR, UNION_PAY, VISA, };
|
|
29
|
+
export type { CreditCardType };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import type { HttpClient } from '../../types/sdk';
|
|
2
|
+
import type { CardElementEvents, CardExpirationDateElementEvents, CardNumberElementEvents, CardVerificationCodeElementEvents, ElementEventListener, EventType, Subscription, TextElementEvents } from './events';
|
|
3
|
+
import type { CardElementValue, CardExpirationDateValue, CreateCardElementOptions, CreateCardExpirationDateElementOptions, CreateCardNumberElementOptions, CreateCardVerificationCodeElementOptions, CreateTextElementOptions, UpdateCardElementOptions, UpdateCardExpirationDateElementOptions, UpdateCardNumberElementOptions, UpdateCardVerificationCodeElementOptions, UpdateTextElementOptions } from './options';
|
|
4
|
+
import type { Proxy, Tokenize, Tokens, TokenIntents } from './services';
|
|
5
|
+
import type { CardMetadata, DataElementReference, ElementMetadata } from './shared';
|
|
6
|
+
import { Sessions } from './services/sessions';
|
|
7
|
+
interface BaseElement<UpdateOptions, ElementEvents> {
|
|
8
|
+
readonly mounted: boolean;
|
|
9
|
+
readonly metadata: ElementMetadata;
|
|
10
|
+
mount(selector: string): Promise<void>;
|
|
11
|
+
mount(element: Element): Promise<void>;
|
|
12
|
+
update(options: UpdateOptions): Promise<void>;
|
|
13
|
+
clear(): void;
|
|
14
|
+
focus(): void;
|
|
15
|
+
blur(): void;
|
|
16
|
+
unmount(): void;
|
|
17
|
+
on<T extends EventType>(eventType: T, listener: ElementEventListener<ElementEvents, T>): Subscription;
|
|
18
|
+
}
|
|
19
|
+
type CardElement = BaseElement<UpdateCardElementOptions, CardElementEvents> & {
|
|
20
|
+
readonly cardMetadata?: CardMetadata;
|
|
21
|
+
setValue(value: CardElementValue<'reference'>): void;
|
|
22
|
+
validate(): void;
|
|
23
|
+
};
|
|
24
|
+
type TextElement = BaseElement<UpdateTextElementOptions, TextElementEvents> & {
|
|
25
|
+
setValueRef(value: TextElement): void;
|
|
26
|
+
setValue(value: DataElementReference): void;
|
|
27
|
+
};
|
|
28
|
+
type CardNumberElement = BaseElement<UpdateCardNumberElementOptions, CardNumberElementEvents> & {
|
|
29
|
+
readonly cardMetadata?: CardMetadata;
|
|
30
|
+
setValueRef(value: CardNumberElement): void;
|
|
31
|
+
setValue(value: DataElementReference): void;
|
|
32
|
+
};
|
|
33
|
+
type CardExpirationDateElement = BaseElement<UpdateCardExpirationDateElementOptions, CardExpirationDateElementEvents> & {
|
|
34
|
+
setValueRef(value: CardExpirationDateElement): void;
|
|
35
|
+
setValue(value: CardExpirationDateValue<'reference'>): void;
|
|
36
|
+
month(): ElementWrapper<CardExpirationDateElement>;
|
|
37
|
+
year(): ElementWrapper<CardExpirationDateElement>;
|
|
38
|
+
format(dateFormat: string): ElementWrapper<CardExpirationDateElement>;
|
|
39
|
+
};
|
|
40
|
+
type CardVerificationCodeElement = BaseElement<UpdateCardVerificationCodeElementOptions, CardVerificationCodeElementEvents> & {
|
|
41
|
+
setValueRef(value: CardVerificationCodeElement): void;
|
|
42
|
+
setValue(value: DataElementReference): void;
|
|
43
|
+
};
|
|
44
|
+
type ElementWrapper<T extends BaseElement<any, any> = BaseElement<any, any>> = {
|
|
45
|
+
element: T;
|
|
46
|
+
method?: string;
|
|
47
|
+
formattingOptions?: {
|
|
48
|
+
format: string;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
type ElementValue = TextElement | CardElement | CardNumberElement | CardExpirationDateElement | CardVerificationCodeElement | ElementWrapper;
|
|
52
|
+
interface BasisTheoryElements {
|
|
53
|
+
tokens: Tokens;
|
|
54
|
+
proxy: Proxy;
|
|
55
|
+
sessions: Sessions;
|
|
56
|
+
tokenIntents: TokenIntents;
|
|
57
|
+
tokenize: Tokenize;
|
|
58
|
+
client: HttpClient;
|
|
59
|
+
createElement(type: 'card', options?: CreateCardElementOptions): CardElement;
|
|
60
|
+
createElement(type: 'text', options: CreateTextElementOptions): TextElement;
|
|
61
|
+
createElement(type: 'cardNumber', options: CreateCardNumberElementOptions): CardNumberElement;
|
|
62
|
+
createElement(type: 'cardExpirationDate', options: CreateCardExpirationDateElementOptions): CardExpirationDateElement;
|
|
63
|
+
createElement(type: 'cardVerificationCode', options: CreateCardVerificationCodeElementOptions): CardVerificationCodeElement;
|
|
64
|
+
}
|
|
65
|
+
interface BasisTheoryElementsInternal extends BasisTheoryElements {
|
|
66
|
+
init: (apiKey: string | undefined, elementsBaseUrl: string, elementsUseNgApi: boolean | undefined, disableTelemetry: boolean | undefined, elementsUseSameOriginApi: boolean | undefined) => Promise<BasisTheoryElements>;
|
|
67
|
+
hasElement: (payload: unknown) => boolean;
|
|
68
|
+
}
|
|
69
|
+
declare global {
|
|
70
|
+
interface Window {
|
|
71
|
+
BasisTheoryElements?: BasisTheoryElementsInternal;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
export type { BaseElement, CardElement, TextElement, CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement, ElementWrapper, ElementValue, BasisTheoryElements, BasisTheoryElementsInternal, };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { Brand, FieldError, ListenableKey, Targeted } from './shared';
|
|
2
|
+
type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown';
|
|
3
|
+
interface BaseEvent<T extends EventType> {
|
|
4
|
+
type: T;
|
|
5
|
+
}
|
|
6
|
+
type ReadyEvent = BaseEvent<'ready'>;
|
|
7
|
+
type ChangeEvent = BaseEvent<'change'> & {
|
|
8
|
+
empty: boolean;
|
|
9
|
+
complete: boolean;
|
|
10
|
+
valid?: boolean;
|
|
11
|
+
maskSatisfied?: boolean;
|
|
12
|
+
errors?: FieldError[];
|
|
13
|
+
};
|
|
14
|
+
type CardChangeEvent = ChangeEvent & {
|
|
15
|
+
cardBrand: Brand;
|
|
16
|
+
cardLast4?: string;
|
|
17
|
+
cardBin?: string;
|
|
18
|
+
};
|
|
19
|
+
type InputFocusEvent = BaseEvent<'focus'> & Targeted;
|
|
20
|
+
type InputBlurEvent = BaseEvent<'blur'> & Targeted;
|
|
21
|
+
type InputKeydownEvent = BaseEvent<'keydown'> & Targeted & {
|
|
22
|
+
key: ListenableKey;
|
|
23
|
+
} & Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey'>;
|
|
24
|
+
type BaseElementEvents = ReadyEvent | InputFocusEvent | InputBlurEvent | InputKeydownEvent;
|
|
25
|
+
type TextElementEvents = BaseElementEvents | ChangeEvent;
|
|
26
|
+
type CardElementEvents = BaseElementEvents | CardChangeEvent;
|
|
27
|
+
type CardNumberElementEvents = BaseElementEvents | CardChangeEvent;
|
|
28
|
+
type CardExpirationDateElementEvents = BaseElementEvents | ChangeEvent;
|
|
29
|
+
type CardVerificationCodeElementEvents = BaseElementEvents | ChangeEvent;
|
|
30
|
+
/**
|
|
31
|
+
* Utility type that helps find a Union type based on a `type` property
|
|
32
|
+
*/
|
|
33
|
+
type FindByType<Union, Type> = Union extends {
|
|
34
|
+
type: Type;
|
|
35
|
+
} ? Union : never;
|
|
36
|
+
type ElementEventListener<Events, Type> = (event: FindByType<Events, Type>) => void;
|
|
37
|
+
interface Subscription {
|
|
38
|
+
unsubscribe(): void;
|
|
39
|
+
}
|
|
40
|
+
export type { EventType, BaseEvent, ReadyEvent, ChangeEvent, CardChangeEvent, InputFocusEvent, InputBlurEvent, InputKeydownEvent, BaseElementEvents, TextElementEvents, CardElementEvents, CardNumberElementEvents, CardExpirationDateElementEvents, CardVerificationCodeElementEvents, ElementEventListener, Subscription, };
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { CreditCardType } from './cardTypes';
|
|
2
|
+
import { AutoCompleteValue, DataElementReference } from './shared';
|
|
3
|
+
import type { CopyIconStyles, ElementStyle } from './styles';
|
|
4
|
+
declare const ELEMENTS_TYPES: readonly ["card", "cardExpirationDate", "cardNumber", "cardVerificationCode", "data", "text"];
|
|
5
|
+
type ElementType = typeof ELEMENTS_TYPES[number];
|
|
6
|
+
interface ElementInternalOptions {
|
|
7
|
+
apiKey: string | undefined;
|
|
8
|
+
baseUrl: string;
|
|
9
|
+
type: ElementType;
|
|
10
|
+
useNgApi: boolean | undefined;
|
|
11
|
+
useSameOriginApi: boolean | undefined;
|
|
12
|
+
}
|
|
13
|
+
declare enum InputMode {
|
|
14
|
+
DECIMAL = "decimal",
|
|
15
|
+
EMAIL = "email",
|
|
16
|
+
NONE = "none",
|
|
17
|
+
NUMERIC = "numeric",
|
|
18
|
+
SEARCH = "search",
|
|
19
|
+
TEL = "tel",
|
|
20
|
+
TEXT = "text",
|
|
21
|
+
URL = "url"
|
|
22
|
+
}
|
|
23
|
+
interface SanitizedElementOptions {
|
|
24
|
+
ariaDescription?: string;
|
|
25
|
+
ariaLabel?: string;
|
|
26
|
+
autoComplete?: AutoCompleteValue;
|
|
27
|
+
cardBrand?: string;
|
|
28
|
+
cardTypes?: CreditCardType[];
|
|
29
|
+
copyIconStyles?: CopyIconStyles;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
enableCopy?: boolean;
|
|
32
|
+
iconPosition?: string;
|
|
33
|
+
inputMode?: `${InputMode}`;
|
|
34
|
+
mask?: (RegExp | string)[];
|
|
35
|
+
maxLength?: HTMLInputElement['maxLength'];
|
|
36
|
+
password?: boolean;
|
|
37
|
+
placeholder?: string;
|
|
38
|
+
readOnly?: boolean;
|
|
39
|
+
skipLuhnValidation?: boolean;
|
|
40
|
+
style?: ElementStyle;
|
|
41
|
+
targetId?: string;
|
|
42
|
+
transform?: [RegExp, string] | null;
|
|
43
|
+
validateOnChange?: boolean;
|
|
44
|
+
validation?: RegExp;
|
|
45
|
+
value?: CardElementValue<'static'> | CardExpirationDateValue<'static'> | string;
|
|
46
|
+
}
|
|
47
|
+
type ElementOptions = ElementInternalOptions & SanitizedElementOptions;
|
|
48
|
+
type Transform = RegExp | [RegExp, string?] | null;
|
|
49
|
+
interface TransformOption {
|
|
50
|
+
transform?: Transform;
|
|
51
|
+
}
|
|
52
|
+
interface AutoCompleteOption {
|
|
53
|
+
autoComplete?: AutoCompleteValue;
|
|
54
|
+
}
|
|
55
|
+
type CustomizableElementOptions = Pick<ElementOptions, 'cardTypes' | 'copyIconStyles' | 'disabled' | 'enableCopy' | 'inputMode' | 'readOnly' | 'skipLuhnValidation' | 'style' | 'validateOnChange'> & AutoCompleteOption;
|
|
56
|
+
type ElementValueType = 'static' | 'reference';
|
|
57
|
+
interface CardElementValue<T extends ElementValueType> {
|
|
58
|
+
cvc?: T extends 'reference' ? DataElementReference : string;
|
|
59
|
+
expiration_month?: T extends 'reference' ? DataElementReference : number;
|
|
60
|
+
expiration_year?: T extends 'reference' ? DataElementReference : number;
|
|
61
|
+
number?: T extends 'reference' ? DataElementReference : string;
|
|
62
|
+
}
|
|
63
|
+
interface CardElementPlaceholder {
|
|
64
|
+
cardNumber?: string;
|
|
65
|
+
cardExpirationDate?: string;
|
|
66
|
+
cardSecurityCode?: string;
|
|
67
|
+
}
|
|
68
|
+
interface CardExpirationDateValue<T extends ElementValueType> {
|
|
69
|
+
month: T extends 'reference' ? DataElementReference : number;
|
|
70
|
+
year: T extends 'reference' ? DataElementReference : number;
|
|
71
|
+
}
|
|
72
|
+
type CreateCardElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'cardTypes' | 'skipLuhnValidation'> & {
|
|
73
|
+
placeholder?: CardElementPlaceholder;
|
|
74
|
+
value?: CardElementValue<'static'>;
|
|
75
|
+
};
|
|
76
|
+
type UpdateCardElementOptions = Omit<CreateCardElementOptions, 'validateOnChange' | 'enableCopy'>;
|
|
77
|
+
type CreateTextElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'mask' | 'maxLength' | 'password' | 'validation'> & TransformOption & Required<Pick<ElementOptions, 'targetId'>> & {
|
|
78
|
+
'aria-label'?: string;
|
|
79
|
+
value?: string;
|
|
80
|
+
};
|
|
81
|
+
type UpdateTextElementOptions = Omit<CreateTextElementOptions, 'targetId' | 'mask' | 'validateOnChange'>;
|
|
82
|
+
type CreateCardNumberElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'iconPosition' | 'cardTypes' | 'skipLuhnValidation'> & Required<Pick<ElementOptions, 'targetId'>> & {
|
|
83
|
+
'aria-label'?: string;
|
|
84
|
+
value?: string;
|
|
85
|
+
};
|
|
86
|
+
type UpdateCardNumberElementOptions = Omit<CreateCardNumberElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
|
|
87
|
+
type CreateCardExpirationDateElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder'> & Required<Pick<ElementOptions, 'targetId'>> & {
|
|
88
|
+
'aria-label'?: string;
|
|
89
|
+
value?: CardExpirationDateValue<'static'> | string;
|
|
90
|
+
};
|
|
91
|
+
type UpdateCardExpirationDateElementOptions = Omit<CreateCardExpirationDateElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
|
|
92
|
+
type CreateCardVerificationCodeElementOptions = CustomizableElementOptions & Pick<ElementOptions, 'placeholder' | 'cardBrand'> & Required<Pick<ElementOptions, 'targetId'>> & {
|
|
93
|
+
'aria-label'?: string;
|
|
94
|
+
value?: string;
|
|
95
|
+
};
|
|
96
|
+
type UpdateCardVerificationCodeElementOptions = Omit<CreateCardVerificationCodeElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
|
|
97
|
+
export type { CardElementPlaceholder, CardElementValue, CardExpirationDateValue, CreateCardElementOptions, CreateCardExpirationDateElementOptions, CreateCardNumberElementOptions, CreateCardVerificationCodeElementOptions, CreateTextElementOptions, CustomizableElementOptions, ElementInternalOptions, ElementOptions, ElementType, InputMode, SanitizedElementOptions, Transform, UpdateCardElementOptions, UpdateCardExpirationDateElementOptions, UpdateCardNumberElementOptions, UpdateCardVerificationCodeElementOptions, UpdateTextElementOptions, };
|
|
98
|
+
export { ELEMENTS_TYPES };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { RequestOptions } from './shared';
|
|
2
|
+
type BasisTheoryProxyHeaders = {
|
|
3
|
+
[key: string]: string;
|
|
4
|
+
'BT-PROXY-URL': string;
|
|
5
|
+
'BT-PROXY-KEY': string;
|
|
6
|
+
};
|
|
7
|
+
type ProxyHeaders = Partial<BasisTheoryProxyHeaders>;
|
|
8
|
+
type BasisTheoryQueryParams = {
|
|
9
|
+
[key: string]: string;
|
|
10
|
+
'bt-proxy-key': string;
|
|
11
|
+
};
|
|
12
|
+
type ProxyQuery = Partial<BasisTheoryQueryParams>;
|
|
13
|
+
interface ProxyRequestOptions extends RequestOptions {
|
|
14
|
+
includeResponseHeaders?: boolean;
|
|
15
|
+
path?: string;
|
|
16
|
+
query?: ProxyQuery;
|
|
17
|
+
headers?: ProxyHeaders;
|
|
18
|
+
body?: unknown;
|
|
19
|
+
}
|
|
20
|
+
interface Proxy {
|
|
21
|
+
get(options?: ProxyRequestOptions): Promise<unknown>;
|
|
22
|
+
post(options?: ProxyRequestOptions): Promise<unknown>;
|
|
23
|
+
patch(options?: ProxyRequestOptions): Promise<unknown>;
|
|
24
|
+
put(options?: ProxyRequestOptions): Promise<unknown>;
|
|
25
|
+
delete(options?: ProxyRequestOptions): Promise<unknown>;
|
|
26
|
+
}
|
|
27
|
+
export type { Proxy, ProxyRequestOptions };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RequestOptions } from './shared';
|
|
2
|
+
type CreateSessionResponse = {
|
|
3
|
+
sessionKey: string;
|
|
4
|
+
nonce: string;
|
|
5
|
+
expiresAt: string;
|
|
6
|
+
_debug?: Record<string, unknown>;
|
|
7
|
+
};
|
|
8
|
+
interface Sessions {
|
|
9
|
+
create(options?: RequestOptions): Promise<CreateSessionResponse>;
|
|
10
|
+
}
|
|
11
|
+
export { CreateSessionResponse, Sessions };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface RequestOptions {
|
|
2
|
+
apiKey?: string;
|
|
3
|
+
correlationId?: string;
|
|
4
|
+
idempotencyKey?: string;
|
|
5
|
+
}
|
|
6
|
+
type Create<T, C> = {
|
|
7
|
+
create(model: C, options?: RequestOptions): Promise<T>;
|
|
8
|
+
};
|
|
9
|
+
type Retrieve<T> = {
|
|
10
|
+
retrieve(id: string, options?: RequestOptions): Promise<T>;
|
|
11
|
+
};
|
|
12
|
+
type Update<T, U> = {
|
|
13
|
+
update(id: string, model: U, options?: RequestOptions): Promise<T>;
|
|
14
|
+
};
|
|
15
|
+
type Patch<P> = {
|
|
16
|
+
patch(id: string, model: P, options?: RequestOptions): Promise<void>;
|
|
17
|
+
};
|
|
18
|
+
type Delete = {
|
|
19
|
+
delete(id: string, options?: RequestOptions): Promise<void>;
|
|
20
|
+
};
|
|
21
|
+
export { RequestOptions, Create, Retrieve, Update, Delete, Patch };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementValue } from '../../elements';
|
|
2
|
+
import type { CreateTokenIntent as CreateTokenIntentModel, TokenIntent } from '../../models';
|
|
3
|
+
import { Create } from './shared';
|
|
4
|
+
type CreateTokenIntent = CreateTokenIntentModel<ElementValue>;
|
|
5
|
+
type TokenIntents = Create<TokenIntent, CreateTokenIntent>;
|
|
6
|
+
export type { TokenIntents, CreateTokenIntent };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ElementValue } from '../';
|
|
2
|
+
import type { TokenizeData as TokenizeDataModel } from '../../models';
|
|
3
|
+
import { RequestOptions } from './shared';
|
|
4
|
+
type TokenizeData = TokenizeDataModel<ElementValue>;
|
|
5
|
+
interface Tokenize {
|
|
6
|
+
tokenize(tokens: TokenizeData, options?: RequestOptions): Promise<TokenizeDataModel>;
|
|
7
|
+
}
|
|
8
|
+
export type { Tokenize, TokenizeData };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ElementValue } from '../../elements';
|
|
2
|
+
import type { CreateToken as CreateTokenModel, UpdateToken as UpdateTokenModel, Token } from '../../models';
|
|
3
|
+
import { Create, Retrieve, Update } from './shared';
|
|
4
|
+
type CreateToken = CreateTokenModel<ElementValue>;
|
|
5
|
+
type UpdateToken = UpdateTokenModel<ElementValue>;
|
|
6
|
+
type Tokens = Create<Token, CreateToken> & Retrieve<Token<unknown>> & Update<Token, UpdateToken>;
|
|
7
|
+
export type { Tokens, CreateToken, UpdateToken };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { AUTOCOMPLETE_VALUES, CARD_BRANDS, CARD_ICON_POSITIONS } from '../../elements/constants';
|
|
2
|
+
type FieldErrorType = 'incomplete' | 'invalid';
|
|
3
|
+
type ConfigErrorType = 'missing-configuration' | 'missing-permission' | 'invalid-configuration';
|
|
4
|
+
interface ConfigError {
|
|
5
|
+
type: ConfigErrorType;
|
|
6
|
+
message: string;
|
|
7
|
+
}
|
|
8
|
+
interface Targeted {
|
|
9
|
+
targetId: string;
|
|
10
|
+
}
|
|
11
|
+
type ListenableKey = 'Escape' | 'Enter';
|
|
12
|
+
interface FieldError {
|
|
13
|
+
targetId: string;
|
|
14
|
+
type: FieldErrorType;
|
|
15
|
+
}
|
|
16
|
+
interface PropertyError {
|
|
17
|
+
type: FieldErrorType;
|
|
18
|
+
}
|
|
19
|
+
interface ElementMetadata {
|
|
20
|
+
complete: boolean;
|
|
21
|
+
valid: boolean;
|
|
22
|
+
maskSatisfied?: boolean;
|
|
23
|
+
empty: boolean;
|
|
24
|
+
errors?: FieldError[] | Omit<FieldError, 'targetId'>[];
|
|
25
|
+
}
|
|
26
|
+
interface CardMetadata {
|
|
27
|
+
cardBrand: Brand;
|
|
28
|
+
cardLast4?: string;
|
|
29
|
+
cardBin?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Card brands type
|
|
33
|
+
*/
|
|
34
|
+
type Brand = typeof CARD_BRANDS[number];
|
|
35
|
+
/**
|
|
36
|
+
* Icon position for card number element
|
|
37
|
+
*/
|
|
38
|
+
type CardIconPosition = typeof CARD_ICON_POSITIONS[number];
|
|
39
|
+
/**
|
|
40
|
+
* Values for the element input autocomplete attribute
|
|
41
|
+
*/
|
|
42
|
+
type AutoCompleteValue = typeof AUTOCOMPLETE_VALUES[number];
|
|
43
|
+
/**
|
|
44
|
+
* Type used for detokenization responses stored on Data Elements
|
|
45
|
+
*/
|
|
46
|
+
type DataElementReference = {
|
|
47
|
+
correlationId: string;
|
|
48
|
+
elementId: string;
|
|
49
|
+
path: string;
|
|
50
|
+
};
|
|
51
|
+
export type { AutoCompleteValue, Brand, CardIconPosition, CardMetadata, ConfigError, ConfigErrorType, DataElementReference, ElementMetadata, FieldError, FieldErrorType, ListenableKey, PropertyError, Targeted, };
|