@basis-theory/web-elements 3.0.0-beta.4 → 3.0.0-beta.6
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/dist/.vite/manifest.json +22 -11
- package/dist/basis-theory-sdk.es.js +2 -2
- package/dist/basis-theory-sdk.umd.js +1 -1
- package/dist/basis-theory-sdk.umd.js.map +1 -1
- package/dist/{create-card-B5zEHyRg.js → create-card-C0MwL3Ou.js} +21 -14
- package/dist/create-card-C0MwL3Ou.js.map +1 -0
- package/dist/create-card-display-DscvxIs4.js +291 -0
- package/dist/create-card-display-DscvxIs4.js.map +1 -0
- package/dist/{create-copy-button-DrAz8g0m.js → create-copy-button-DlJ3VvAn.js} +40 -12
- package/dist/create-copy-button-DlJ3VvAn.js.map +1 -0
- package/dist/{index-BOedIhUN.js → index-DPhSs28B.js} +432 -121
- package/dist/index-DPhSs28B.js.map +1 -0
- package/dist/index.d.ts +1133 -0
- package/dist/loader/basis-theory.min.js +1 -1
- package/dist/sri.json +9 -9
- package/dist/stats.html +1 -1
- package/package.json +12 -12
- package/dist/api-client/src/api-client.d.ts +0 -11
- package/dist/api-client/src/api-client.d.ts.map +0 -1
- package/dist/api-client/src/bin-lookup-transform.d.ts +0 -35
- package/dist/api-client/src/bin-lookup-transform.d.ts.map +0 -1
- package/dist/api-client/src/http-client.d.ts +0 -24
- package/dist/api-client/src/http-client.d.ts.map +0 -1
- package/dist/api-client/src/index.d.ts +0 -9
- package/dist/api-client/src/index.d.ts.map +0 -1
- package/dist/api-client/src/services/sessions.d.ts +0 -19
- package/dist/api-client/src/services/sessions.d.ts.map +0 -1
- package/dist/api-client/src/services/token-intents.d.ts +0 -17
- package/dist/api-client/src/services/token-intents.d.ts.map +0 -1
- package/dist/api-client/src/services/tokens.d.ts +0 -19
- package/dist/api-client/src/services/tokens.d.ts.map +0 -1
- package/dist/api-client/src/types.d.ts +0 -421
- package/dist/api-client/src/types.d.ts.map +0 -1
- package/dist/create-card-B5zEHyRg.js.map +0 -1
- package/dist/create-copy-button-DrAz8g0m.js.map +0 -1
- package/dist/index-BOedIhUN.js.map +0 -1
- package/dist/postmessage/src/client.d.ts +0 -7
- package/dist/postmessage/src/client.d.ts.map +0 -1
- package/dist/postmessage/src/event-map.d.ts +0 -139
- package/dist/postmessage/src/event-map.d.ts.map +0 -1
- package/dist/postmessage/src/index.d.ts +0 -9
- package/dist/postmessage/src/index.d.ts.map +0 -1
- package/dist/postmessage/src/server.d.ts +0 -11
- package/dist/postmessage/src/server.d.ts.map +0 -1
- package/dist/postmessage/src/types.d.ts +0 -75
- package/dist/postmessage/src/types.d.ts.map +0 -1
- package/dist/shared/src/api-url-resolver.d.ts +0 -22
- package/dist/shared/src/api-url-resolver.d.ts.map +0 -1
- package/dist/shared/src/debug-logger.d.ts +0 -16
- package/dist/shared/src/debug-logger.d.ts.map +0 -1
- package/dist/shared/src/deep-sanitization.d.ts +0 -24
- package/dist/shared/src/deep-sanitization.d.ts.map +0 -1
- package/dist/shared/src/errors.d.ts +0 -93
- package/dist/shared/src/errors.d.ts.map +0 -1
- package/dist/shared/src/generate-id.d.ts +0 -13
- package/dist/shared/src/generate-id.d.ts.map +0 -1
- package/dist/shared/src/index.d.ts +0 -14
- package/dist/shared/src/index.d.ts.map +0 -1
- package/dist/shared/src/logger-context.d.ts +0 -25
- package/dist/shared/src/logger-context.d.ts.map +0 -1
- package/dist/shared/src/proxy-validation.d.ts +0 -93
- package/dist/shared/src/proxy-validation.d.ts.map +0 -1
- package/dist/web-elements/src/BasisTheory.d.ts +0 -47
- package/dist/web-elements/src/BasisTheory.d.ts.map +0 -1
- package/dist/web-elements/src/basis-theory.d.ts +0 -85
- package/dist/web-elements/src/basis-theory.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-card-number.d.ts +0 -15
- package/dist/web-elements/src/elements/create-card-number.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-card.d.ts +0 -50
- package/dist/web-elements/src/elements/create-card.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-copy-button.d.ts +0 -19
- package/dist/web-elements/src/elements/create-copy-button.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-cvv.d.ts +0 -11
- package/dist/web-elements/src/elements/create-cvv.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-expiry.d.ts +0 -11
- package/dist/web-elements/src/elements/create-expiry.d.ts.map +0 -1
- package/dist/web-elements/src/elements/create-text.d.ts +0 -14
- package/dist/web-elements/src/elements/create-text.d.ts.map +0 -1
- package/dist/web-elements/src/index.d.ts +0 -27
- package/dist/web-elements/src/index.d.ts.map +0 -1
- package/dist/web-elements/src/mounter/create-mounter.d.ts +0 -11
- package/dist/web-elements/src/mounter/create-mounter.d.ts.map +0 -1
- package/dist/web-elements/src/theme/default-theme.d.ts +0 -22
- package/dist/web-elements/src/theme/default-theme.d.ts.map +0 -1
- package/dist/web-elements/src/theme/inject-theme-dark.d.ts +0 -13
- package/dist/web-elements/src/theme/inject-theme-dark.d.ts.map +0 -1
- package/dist/web-elements/src/theme/inject-theme.d.ts +0 -20
- package/dist/web-elements/src/theme/inject-theme.d.ts.map +0 -1
- package/dist/web-elements/src/types/events.d.ts +0 -165
- package/dist/web-elements/src/types/events.d.ts.map +0 -1
- package/dist/web-elements/src/types/theme.d.ts +0 -91
- package/dist/web-elements/src/types/theme.d.ts.map +0 -1
- package/dist/web-elements/src/types.d.ts +0 -667
- package/dist/web-elements/src/types.d.ts.map +0 -1
- package/dist/web-elements/src/utils/create-event-dispatcher.d.ts +0 -47
- package/dist/web-elements/src/utils/create-event-dispatcher.d.ts.map +0 -1
- package/dist/web-elements/src/utils/create-iframe.d.ts +0 -10
- package/dist/web-elements/src/utils/create-iframe.d.ts.map +0 -1
- package/dist/web-elements/src/utils/resolve-element-references.d.ts +0 -20
- package/dist/web-elements/src/utils/resolve-element-references.d.ts.map +0 -1
- package/dist/web-elements/src/utils/validate-element-options.d.ts +0 -11
- package/dist/web-elements/src/utils/validate-element-options.d.ts.map +0 -1
- package/dist/web-elements/src/utils/validate-sdk-config.d.ts +0 -15
- package/dist/web-elements/src/utils/validate-sdk-config.d.ts.map +0 -1
- package/dist/web-elements/src/utils/warn-unknown-keys.d.ts +0 -15
- package/dist/web-elements/src/utils/warn-unknown-keys.d.ts.map +0 -1
- package/dist/web-elements/src/version.d.ts +0 -25
- package/dist/web-elements/src/version.d.ts.map +0 -1
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1133 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base event detail - all element events include this metadata
|
|
3
|
+
*/
|
|
4
|
+
export declare interface BaseEventDetail {
|
|
5
|
+
/** Element type that fired this event */
|
|
6
|
+
elementType: ElementType;
|
|
7
|
+
/** Unique element ID (for distinguishing multiple elements) */
|
|
8
|
+
elementId: string;
|
|
9
|
+
/** Event timestamp (Unix milliseconds) */
|
|
10
|
+
timestamp: number;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Creates a BasisTheory SDK instance
|
|
15
|
+
* Factory function (no class, pure functional approach)
|
|
16
|
+
*
|
|
17
|
+
* @param apiKey - Your Basis Theory public API key (starts with 'pk_')
|
|
18
|
+
* @param options - SDK configuration options
|
|
19
|
+
* @param queuedCommands - Optional: Commands queued by loader before SDK loaded
|
|
20
|
+
* @returns SDK instance with methods to create and tokenize elements
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```typescript
|
|
24
|
+
* import BasisTheory from '@basis-theory/web-elements';
|
|
25
|
+
*
|
|
26
|
+
* const bt = BasisTheory('pk_test_YOUR_API_KEY');
|
|
27
|
+
*
|
|
28
|
+
* const cardNumber = bt.createElement('cardNumber', {
|
|
29
|
+
* placeholder: '4111 1111 1111 1111'
|
|
30
|
+
* });
|
|
31
|
+
*
|
|
32
|
+
* await cardNumber.mount('#card-number');
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
declare const BasisTheory: (apiKey: string, options?: SDKOptions, queuedCommands?: QueuedCommand[]) => BasisTheorySDK;
|
|
36
|
+
export default BasisTheory;
|
|
37
|
+
|
|
38
|
+
export declare interface BasisTheorySDK {
|
|
39
|
+
/**
|
|
40
|
+
* Create a new element instance
|
|
41
|
+
* Returns Element instance immediately (synchronous)
|
|
42
|
+
*/
|
|
43
|
+
createElement(type: 'card', options?: ElementOptions): CardElement;
|
|
44
|
+
createElement(type: 'copyButton', options: CopyButtonOptions): CopyButtonElement;
|
|
45
|
+
createElement(type: 'cardDisplay', options: CardDisplayOptions): CardDisplayElement;
|
|
46
|
+
createElement(type: Exclude<ElementType, 'card' | 'copyButton' | 'cardDisplay'>, options?: ElementOptions): Element_2;
|
|
47
|
+
createElement(type: ElementType, options?: ElementOptions | CopyButtonOptions): Element_2 | CardElement | CopyButtonElement;
|
|
48
|
+
createElement(type: ElementType, options?: ElementOptions | CardDisplayOptions): Element_2 | CardElement | CardDisplayElement;
|
|
49
|
+
/**
|
|
50
|
+
* Tokenize data (creates a token)
|
|
51
|
+
*/
|
|
52
|
+
tokenize(data: ElementInputObject): Promise<TokenizeResult>;
|
|
53
|
+
/**
|
|
54
|
+
* Token CRUD operations
|
|
55
|
+
* Supports Element references - automatically resolves to secure values
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```typescript
|
|
59
|
+
* // Create token with Elements (element references resolved automatically)
|
|
60
|
+
* const token = await bt.tokens.create({
|
|
61
|
+
* type: 'card',
|
|
62
|
+
* data: {
|
|
63
|
+
* number: cardNumberElement,
|
|
64
|
+
* expiration_month: expiryElement,
|
|
65
|
+
* cvc: cvvElement
|
|
66
|
+
* }
|
|
67
|
+
* });
|
|
68
|
+
*
|
|
69
|
+
* // Retrieve token
|
|
70
|
+
* const retrieved = await bt.tokens.retrieve(token.id);
|
|
71
|
+
*
|
|
72
|
+
* // Update token metadata
|
|
73
|
+
* await bt.tokens.update(token.id, {
|
|
74
|
+
* metadata: { source: 'updated' }
|
|
75
|
+
* });
|
|
76
|
+
*
|
|
77
|
+
* // Encrypt token with client-side JWE
|
|
78
|
+
* const encrypted = await bt.tokens.encrypt(
|
|
79
|
+
* { type: 'card', data: { number: cardNumberElement } },
|
|
80
|
+
* publicKeyPEM,
|
|
81
|
+
* 'key-id-123'
|
|
82
|
+
* );
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
tokens: {
|
|
86
|
+
create(data: TokenCreateRequest): Promise<TokenizeResult>;
|
|
87
|
+
retrieve(id: string, options?: {
|
|
88
|
+
apiKey?: string;
|
|
89
|
+
}): Promise<TokenizeResult>;
|
|
90
|
+
update(id: string, data: TokenUpdateRequest): Promise<TokenizeResult>;
|
|
91
|
+
encrypt(tokenData: EncryptToken | Record<string, EncryptToken>, publicKeyPEM: string, keyId: string): Promise<EncryptedToken | Record<string, EncryptedToken>>;
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Token Intent operations (short-lived sensitive data validation)
|
|
95
|
+
* Supports Element references - automatically resolves to secure values
|
|
96
|
+
*
|
|
97
|
+
* @example
|
|
98
|
+
* ```typescript
|
|
99
|
+
* // Create token intent with Elements
|
|
100
|
+
* const intent = await bt.tokenIntents.create({
|
|
101
|
+
* type: 'card',
|
|
102
|
+
* data: {
|
|
103
|
+
* number: cardNumberElement,
|
|
104
|
+
* expiration_month: 12,
|
|
105
|
+
* expiration_year: 2025,
|
|
106
|
+
* cvc: cvvElement
|
|
107
|
+
* }
|
|
108
|
+
* });
|
|
109
|
+
*
|
|
110
|
+
* // Retrieve token intent
|
|
111
|
+
* const retrieved = await bt.tokenIntents.get(intent.id);
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
tokenIntents: {
|
|
115
|
+
create(data: TokenIntentRequest, options?: {
|
|
116
|
+
apiKey?: string;
|
|
117
|
+
}): Promise<TokenIntent>;
|
|
118
|
+
get(id: string, options?: {
|
|
119
|
+
apiKey?: string;
|
|
120
|
+
}): Promise<TokenIntent>;
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* Session management for temporary elevated access
|
|
124
|
+
*
|
|
125
|
+
* Creates a session that provides temporary elevated access to tokenized data.
|
|
126
|
+
* Sessions MUST be authorized by a Private Application on your backend.
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```typescript
|
|
130
|
+
* // Create a session (frontend)
|
|
131
|
+
* const session = await bt.sessions.create();
|
|
132
|
+
* console.log('Session nonce:', session.nonce);
|
|
133
|
+
*
|
|
134
|
+
* // Session must be authorized on backend before use
|
|
135
|
+
* // Once authorized, use the session API key with tokens.retrieve()
|
|
136
|
+
* const token = await bt.tokens.retrieve(tokenId, {
|
|
137
|
+
* apiKey: sessionApiKey // From authorized session
|
|
138
|
+
* });
|
|
139
|
+
* ```
|
|
140
|
+
*/
|
|
141
|
+
sessions: {
|
|
142
|
+
create(): Promise<Session>;
|
|
143
|
+
};
|
|
144
|
+
/**
|
|
145
|
+
* Proxy HTTP requests through Basis Theory (Element references in `body` are resolved in the coordinator).
|
|
146
|
+
*/
|
|
147
|
+
proxy: {
|
|
148
|
+
get(options: ProxyRequestOptions & {
|
|
149
|
+
includeResponseHeaders: true;
|
|
150
|
+
}): Promise<ProxyResponse>;
|
|
151
|
+
get(options?: ProxyRequestOptions): Promise<unknown>;
|
|
152
|
+
post(options: ProxyRequestOptions & {
|
|
153
|
+
includeResponseHeaders: true;
|
|
154
|
+
}): Promise<ProxyResponse>;
|
|
155
|
+
post(options?: ProxyRequestOptions): Promise<unknown>;
|
|
156
|
+
put(options: ProxyRequestOptions & {
|
|
157
|
+
includeResponseHeaders: true;
|
|
158
|
+
}): Promise<ProxyResponse>;
|
|
159
|
+
put(options?: ProxyRequestOptions): Promise<unknown>;
|
|
160
|
+
patch(options: ProxyRequestOptions & {
|
|
161
|
+
includeResponseHeaders: true;
|
|
162
|
+
}): Promise<ProxyResponse>;
|
|
163
|
+
patch(options?: ProxyRequestOptions): Promise<unknown>;
|
|
164
|
+
delete(options: ProxyRequestOptions & {
|
|
165
|
+
includeResponseHeaders: true;
|
|
166
|
+
}): Promise<ProxyResponse>;
|
|
167
|
+
delete(options?: ProxyRequestOptions): Promise<unknown>;
|
|
168
|
+
};
|
|
169
|
+
/**
|
|
170
|
+
* Update the theme mode for all mounted elements
|
|
171
|
+
*
|
|
172
|
+
* @param mode - Theme mode to apply ('light', 'dark', or 'auto')
|
|
173
|
+
* @returns Promise that resolves when all elements have been updated
|
|
174
|
+
*
|
|
175
|
+
* @example
|
|
176
|
+
* ```typescript
|
|
177
|
+
* await bt.updateThemeMode('dark');
|
|
178
|
+
* ```
|
|
179
|
+
*/
|
|
180
|
+
updateThemeMode(mode: ThemeMode): Promise<void>;
|
|
181
|
+
/**
|
|
182
|
+
* Destroys this instance and removes its elements from the page. Once
|
|
183
|
+
* destroyed, its other methods throw; create a new instance with
|
|
184
|
+
* BasisTheory() to recover. Safe to call more than once.
|
|
185
|
+
*/
|
|
186
|
+
destroy(): Promise<void>;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* Blur event - fired when element loses focus
|
|
191
|
+
*/
|
|
192
|
+
export declare interface BlurEventDetail extends BaseEventDetail {
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* ISO 8601 timestamp when the SDK was built
|
|
197
|
+
* @example
|
|
198
|
+
* ```typescript
|
|
199
|
+
* import { buildDate } from '@basis-theory/web-elements';
|
|
200
|
+
* console.log(`Built on ${buildDate}`);
|
|
201
|
+
* ```
|
|
202
|
+
*/
|
|
203
|
+
export declare const buildDate: string;
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* Change event detail for cardDisplay
|
|
207
|
+
*/
|
|
208
|
+
export declare interface CardDisplayChangeEventDetail {
|
|
209
|
+
loaded: boolean;
|
|
210
|
+
brand?: string;
|
|
211
|
+
last4?: string;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Card display element interface (read-only, no input methods)
|
|
216
|
+
*/
|
|
217
|
+
export declare interface CardDisplayElement extends Element_2 {
|
|
218
|
+
/**
|
|
219
|
+
* Element type
|
|
220
|
+
*/
|
|
221
|
+
readonly type: 'cardDisplay';
|
|
222
|
+
/**
|
|
223
|
+
* Update element configuration
|
|
224
|
+
* Changing tokenId triggers a reload
|
|
225
|
+
*/
|
|
226
|
+
update(options: Partial<CardDisplayOptions>): Promise<void>;
|
|
227
|
+
/**
|
|
228
|
+
* Listen for element events
|
|
229
|
+
*/
|
|
230
|
+
on(eventType: CardDisplayEventType, listener: EventListener_2): () => void;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Card display event types
|
|
235
|
+
*/
|
|
236
|
+
export declare type CardDisplayEventType = 'ready' | 'change' | 'error';
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Display mode for card display fields
|
|
240
|
+
*/
|
|
241
|
+
declare type CardDisplayMode = 'masked' | 'hidden' | 'visible';
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Options for cardDisplay element
|
|
245
|
+
*/
|
|
246
|
+
export declare interface CardDisplayOptions extends ElementOptions {
|
|
247
|
+
/**
|
|
248
|
+
* Token ID to load and display
|
|
249
|
+
*/
|
|
250
|
+
tokenId: string;
|
|
251
|
+
/**
|
|
252
|
+
* Card number display configuration
|
|
253
|
+
* @default { display: 'masked' }
|
|
254
|
+
*/
|
|
255
|
+
number?: FieldDisplayConfig;
|
|
256
|
+
/**
|
|
257
|
+
* CVC display configuration
|
|
258
|
+
* @default { display: 'masked' }
|
|
259
|
+
*/
|
|
260
|
+
cvc?: FieldDisplayConfig;
|
|
261
|
+
/**
|
|
262
|
+
* Expiration date display configuration
|
|
263
|
+
* @default { display: 'masked' }
|
|
264
|
+
*/
|
|
265
|
+
expiration?: FieldDisplayConfig;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* Card element with sub-field refs
|
|
270
|
+
*/
|
|
271
|
+
export declare interface CardElement extends Element_2 {
|
|
272
|
+
number: SubElementRef;
|
|
273
|
+
expiryDate: SubElementRef;
|
|
274
|
+
cvc: SubElementRef;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Card element specific change event detail (unified card element)
|
|
279
|
+
* Extends base with unified card state for all 3 sub-fields
|
|
280
|
+
*/
|
|
281
|
+
export declare interface CardElementChangeEventDetail extends ChangeEventDetail {
|
|
282
|
+
/** Detected card brand (Visa, Mastercard, etc.) */
|
|
283
|
+
cardBrand?: string;
|
|
284
|
+
/** Last 4 digits (PCI-safe, for display) */
|
|
285
|
+
last4?: string | null;
|
|
286
|
+
/** BIN (Bank Identification Number) - first 6-8 digits */
|
|
287
|
+
bin?: string | null;
|
|
288
|
+
/** Co-badge (when BIN enrichment returns multiple networks) */
|
|
289
|
+
networks?: string[];
|
|
290
|
+
selectedNetwork?: string;
|
|
291
|
+
/** Validation errors from all sub-fields (cardNumber, expirationDate, cvc) */
|
|
292
|
+
errors?: Array<{
|
|
293
|
+
field: string;
|
|
294
|
+
code: string;
|
|
295
|
+
message: string;
|
|
296
|
+
}> | null;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* Card element options
|
|
301
|
+
*/
|
|
302
|
+
export declare interface CardElementOptions {
|
|
303
|
+
/** CSS styling */
|
|
304
|
+
style?: Record<string, any>;
|
|
305
|
+
/** Placeholder text for each sub-field */
|
|
306
|
+
placeholder?: {
|
|
307
|
+
cardNumber?: string;
|
|
308
|
+
expiryDate?: string;
|
|
309
|
+
cvc?: string;
|
|
310
|
+
};
|
|
311
|
+
/** Accessibility label */
|
|
312
|
+
ariaLabel?: string;
|
|
313
|
+
/** Disabled state (applies to all 3 sub-fields) */
|
|
314
|
+
disabled?: boolean;
|
|
315
|
+
/** Read-only state (applies to all 3 sub-fields) */
|
|
316
|
+
readOnly?: boolean;
|
|
317
|
+
/** Layout mode */
|
|
318
|
+
layout?: 'row' | 'column' | 'auto';
|
|
319
|
+
/** Stack threshold in pixels (only applies when layout: 'auto') */
|
|
320
|
+
stackAt?: number;
|
|
321
|
+
/** Icon position */
|
|
322
|
+
iconPosition?: 'left' | 'right' | 'none';
|
|
323
|
+
/** Restrict accepted card brands */
|
|
324
|
+
cardBrands?: string[];
|
|
325
|
+
/**
|
|
326
|
+
* BIN enrichment for the card number field. Setting `coBadge` turns enrichment on and
|
|
327
|
+
* overrides this — an explicit `binLookup: false` is ignored when `coBadge` is set.
|
|
328
|
+
*/
|
|
329
|
+
binLookup?: boolean | {
|
|
330
|
+
enabled?: boolean;
|
|
331
|
+
debounceMs?: number;
|
|
332
|
+
};
|
|
333
|
+
/** Co-badge options; forces BIN enrichment on when set, overriding `binLookup`. */
|
|
334
|
+
coBadge?: {
|
|
335
|
+
preferredNetworks?: string[];
|
|
336
|
+
mode?: 'auto' | 'manual';
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/**
|
|
341
|
+
* Card number specific change event detail
|
|
342
|
+
* Extends base with card brand detection metadata
|
|
343
|
+
*/
|
|
344
|
+
export declare interface CardNumberChangeEventDetail extends ChangeEventDetail {
|
|
345
|
+
/** Detected card brand (Visa, Mastercard, etc.) */
|
|
346
|
+
cardBrand?: string;
|
|
347
|
+
/** Last 4 digits (PCI-safe, for display) */
|
|
348
|
+
last4?: string | null;
|
|
349
|
+
/** BIN (Bank Identification Number) - first 6-8 digits */
|
|
350
|
+
bin?: string | null;
|
|
351
|
+
/** CVV lengths for detected brand (for coordinating with CVV element) */
|
|
352
|
+
cvvLengths?: number[] | null;
|
|
353
|
+
/** All brands that could potentially match */
|
|
354
|
+
potentialBrands?: string[];
|
|
355
|
+
/** Match confidence (0-1, higher = more confident) */
|
|
356
|
+
matchStrength?: number;
|
|
357
|
+
/** Co-badge networks from BIN enrichment (multi-network cards only) */
|
|
358
|
+
networks?: string[];
|
|
359
|
+
/** Selected payment network (kebab-case, multi-network cards only) */
|
|
360
|
+
selectedNetwork?: string;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/**
|
|
364
|
+
* Base change event detail - common to all element types
|
|
365
|
+
*/
|
|
366
|
+
export declare interface ChangeEventDetail extends BaseEventDetail {
|
|
367
|
+
/** Whether the current value is valid */
|
|
368
|
+
isValid: boolean;
|
|
369
|
+
/** Whether the input is empty */
|
|
370
|
+
isEmpty: boolean;
|
|
371
|
+
/** Validation error (null if valid) */
|
|
372
|
+
error: ValidationError | null;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/**
|
|
376
|
+
* CopyButton element with setValueRef method
|
|
377
|
+
*/
|
|
378
|
+
export declare interface CopyButtonElement extends Element_2 {
|
|
379
|
+
/**
|
|
380
|
+
* Link this copy button to another element's value
|
|
381
|
+
* When clicked, copies the linked element's current value
|
|
382
|
+
*
|
|
383
|
+
* @param element - The element to link to (e.g., cardNumber, text)
|
|
384
|
+
*
|
|
385
|
+
* @example
|
|
386
|
+
* ```typescript
|
|
387
|
+
* const cardNumber = bt.createElement('cardNumber');
|
|
388
|
+
* const copyBtn = bt.createElement('copyButton', { allowClipboard: true });
|
|
389
|
+
*
|
|
390
|
+
* copyBtn.setValueRef(cardNumber);
|
|
391
|
+
*
|
|
392
|
+
* // Now clicking copyBtn will copy the card number value
|
|
393
|
+
* ```
|
|
394
|
+
*/
|
|
395
|
+
setValueRef(element: Element_2): Promise<void>;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
/**
|
|
399
|
+
* Options specific to the CopyButton element
|
|
400
|
+
*
|
|
401
|
+
* SECURITY NOTE: This element is opt-in only via allowClipboard: true.
|
|
402
|
+
* Clipboard access for raw card data may not be PCI compliant and must
|
|
403
|
+
* never be enabled inadvertently.
|
|
404
|
+
*/
|
|
405
|
+
export declare interface CopyButtonOptions {
|
|
406
|
+
/**
|
|
407
|
+
* REQUIRED: Explicitly opt-in to clipboard access
|
|
408
|
+
* Must be set to true - throws ConfigurationError if missing
|
|
409
|
+
*
|
|
410
|
+
* @security This flag exists because clipboard access for raw card data
|
|
411
|
+
* may not be PCI compliant and must never be enabled inadvertently.
|
|
412
|
+
*/
|
|
413
|
+
allowClipboard: true;
|
|
414
|
+
/**
|
|
415
|
+
* Static string value to copy when clicked
|
|
416
|
+
* Overridden by setValueRef() if called
|
|
417
|
+
*/
|
|
418
|
+
value?: string;
|
|
419
|
+
/**
|
|
420
|
+
* Label text displayed on the button
|
|
421
|
+
* @default 'Copy'
|
|
422
|
+
*/
|
|
423
|
+
text?: string;
|
|
424
|
+
/**
|
|
425
|
+
* Disable the button
|
|
426
|
+
* @default false
|
|
427
|
+
*/
|
|
428
|
+
disabled?: boolean;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/**
|
|
432
|
+
* Copy event - fired when copy button is clicked
|
|
433
|
+
* Only available on copyButton element type
|
|
434
|
+
*/
|
|
435
|
+
export declare interface CopyEventDetail extends BaseEventDetail {
|
|
436
|
+
/** Whether the copy operation succeeded */
|
|
437
|
+
success: boolean;
|
|
438
|
+
/** Error message if copy failed (no sensitive data) */
|
|
439
|
+
error?: string;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
declare interface Element_2 {
|
|
443
|
+
/**
|
|
444
|
+
* Unique identifier for the element
|
|
445
|
+
*/
|
|
446
|
+
readonly id: string;
|
|
447
|
+
/**
|
|
448
|
+
* Element type ('cardNumber', 'cvv', 'expiry')
|
|
449
|
+
*/
|
|
450
|
+
readonly type: ElementType;
|
|
451
|
+
/**
|
|
452
|
+
* Whether the element is currently mounted to the DOM
|
|
453
|
+
*/
|
|
454
|
+
readonly mounted: boolean;
|
|
455
|
+
/**
|
|
456
|
+
* Whether the element is currently loaded
|
|
457
|
+
*/
|
|
458
|
+
readonly loaded: boolean;
|
|
459
|
+
/**
|
|
460
|
+
* Mount the element to a DOM container
|
|
461
|
+
* @param selector - CSS selector or HTMLElement
|
|
462
|
+
*/
|
|
463
|
+
mount(selector: string | HTMLElement): Promise<void>;
|
|
464
|
+
/**
|
|
465
|
+
* Unmount the element from the DOM
|
|
466
|
+
*/
|
|
467
|
+
unmount(): void;
|
|
468
|
+
/**
|
|
469
|
+
* Update element configuration (placeholder, style, theme mode, etc.)
|
|
470
|
+
*/
|
|
471
|
+
update(options: Partial<ElementOptions> & {
|
|
472
|
+
themeMode?: 'light' | 'dark' | 'auto';
|
|
473
|
+
}): Promise<void>;
|
|
474
|
+
/**
|
|
475
|
+
* Focus the input
|
|
476
|
+
*/
|
|
477
|
+
focus(): void;
|
|
478
|
+
/**
|
|
479
|
+
* Blur the input
|
|
480
|
+
*/
|
|
481
|
+
blur(): void;
|
|
482
|
+
/**
|
|
483
|
+
* Clear the input value
|
|
484
|
+
*/
|
|
485
|
+
clear(): void;
|
|
486
|
+
/**
|
|
487
|
+
* Listen for element events
|
|
488
|
+
* @returns Unsubscribe function
|
|
489
|
+
*/
|
|
490
|
+
on(eventType: EventType, listener: EventListener_2): () => void;
|
|
491
|
+
/**
|
|
492
|
+
* Override selected payment network for co-badge cards (card number element only)
|
|
493
|
+
*/
|
|
494
|
+
setNetwork?(network: string): Promise<void>;
|
|
495
|
+
}
|
|
496
|
+
export { Element_2 as Element }
|
|
497
|
+
|
|
498
|
+
/** Array that may contain Element references at any depth */
|
|
499
|
+
export declare type ElementInputArray = Array<ElementLeaf | ElementInputObject | ElementInputArray>;
|
|
500
|
+
|
|
501
|
+
/** Freeform object that may contain Element references at any depth */
|
|
502
|
+
export declare interface ElementInputObject {
|
|
503
|
+
[key: string]: ElementLeaf | ElementInputObject | ElementInputArray;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/** Primitive or an Element reference — resolved to a value during tokenization */
|
|
507
|
+
export declare type ElementLeaf = string | number | boolean | null | undefined | Element_2;
|
|
508
|
+
|
|
509
|
+
export declare interface ElementOptions {
|
|
510
|
+
/**
|
|
511
|
+
* Placeholder text displayed when input is empty.
|
|
512
|
+
* For card elements, an object with per-field placeholders.
|
|
513
|
+
*/
|
|
514
|
+
placeholder?: string | {
|
|
515
|
+
cardNumber?: string;
|
|
516
|
+
expiryDate?: string;
|
|
517
|
+
cvc?: string;
|
|
518
|
+
};
|
|
519
|
+
/**
|
|
520
|
+
* ARIA label for accessibility
|
|
521
|
+
* @default Based on element type (e.g., 'Card Number')
|
|
522
|
+
*/
|
|
523
|
+
ariaLabel?: string;
|
|
524
|
+
/**
|
|
525
|
+
* Disable the input
|
|
526
|
+
* @default false
|
|
527
|
+
*/
|
|
528
|
+
disabled?: boolean;
|
|
529
|
+
/**
|
|
530
|
+
* Make the input read-only
|
|
531
|
+
* @default false
|
|
532
|
+
*/
|
|
533
|
+
readOnly?: boolean;
|
|
534
|
+
/**
|
|
535
|
+
* RegExp pattern for validation
|
|
536
|
+
* Only applicable to text elements
|
|
537
|
+
* @example /^[a-zA-Z\s]{2,50}$/ for names
|
|
538
|
+
* @example /^\d{3}-\d{2}-\d{4}$/ for SSN
|
|
539
|
+
*/
|
|
540
|
+
validation?: RegExp;
|
|
541
|
+
/**
|
|
542
|
+
* Whether the field is required
|
|
543
|
+
* Only applicable to text elements
|
|
544
|
+
* @default false
|
|
545
|
+
*/
|
|
546
|
+
required?: boolean;
|
|
547
|
+
/**
|
|
548
|
+
* Maximum input length
|
|
549
|
+
* Only applicable to text elements
|
|
550
|
+
* @example 50 for name fields
|
|
551
|
+
*/
|
|
552
|
+
maxLength?: number;
|
|
553
|
+
/**
|
|
554
|
+
* Enable password mode (type="password")
|
|
555
|
+
* Only applicable to text elements
|
|
556
|
+
* @default false
|
|
557
|
+
*/
|
|
558
|
+
password?: boolean;
|
|
559
|
+
/**
|
|
560
|
+
* Mobile keyboard hint
|
|
561
|
+
* Only applicable to text elements
|
|
562
|
+
* @example 'numeric', 'tel', 'email'
|
|
563
|
+
*/
|
|
564
|
+
inputMode?: string;
|
|
565
|
+
/**
|
|
566
|
+
* Input masking pattern (lazy-loaded ~5KB module)
|
|
567
|
+
* Only applicable to text elements
|
|
568
|
+
*
|
|
569
|
+
* @example
|
|
570
|
+
* // SSN: XXX-XX-XXXX
|
|
571
|
+
* mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
|
|
572
|
+
*
|
|
573
|
+
* // Phone: (XXX) XXX-XXXX
|
|
574
|
+
* mask: ['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
|
|
575
|
+
*/
|
|
576
|
+
mask?: (RegExp | string)[];
|
|
577
|
+
/**
|
|
578
|
+
* Transform pattern before tokenization
|
|
579
|
+
* Only applicable to text elements
|
|
580
|
+
*
|
|
581
|
+
* @example
|
|
582
|
+
* // Remove dashes from SSN before tokenization
|
|
583
|
+
* transform: [/-/g, '']
|
|
584
|
+
*/
|
|
585
|
+
transform?: Transform;
|
|
586
|
+
/**
|
|
587
|
+
* Renders a show/hide toggle button inside the CVV field.
|
|
588
|
+
* Clicking toggles between `type="password"` and `type="text"`.
|
|
589
|
+
* CVV element only. Set at creation time only — runtime updates via
|
|
590
|
+
* `element.update()` are not supported.
|
|
591
|
+
* @default false
|
|
592
|
+
*/
|
|
593
|
+
showToggle?: boolean;
|
|
594
|
+
/* Excluded from this release type: cardBrand */
|
|
595
|
+
/* Excluded from this release type: cvvLengths */
|
|
596
|
+
/**
|
|
597
|
+
* Layout mode for unified card element
|
|
598
|
+
* Only applicable to card elements
|
|
599
|
+
* @default 'auto'
|
|
600
|
+
*/
|
|
601
|
+
layout?: 'row' | 'column' | 'auto';
|
|
602
|
+
/**
|
|
603
|
+
* Stack threshold in pixels (only applies when layout: 'auto')
|
|
604
|
+
* Only applicable to card elements
|
|
605
|
+
* @default 400
|
|
606
|
+
*/
|
|
607
|
+
stackAt?: number;
|
|
608
|
+
/**
|
|
609
|
+
* Icon position for card brand icon
|
|
610
|
+
* Only applicable to card elements
|
|
611
|
+
* @default 'right'
|
|
612
|
+
*/
|
|
613
|
+
iconPosition?: 'left' | 'right' | 'none';
|
|
614
|
+
/**
|
|
615
|
+
* Restrict accepted card brands
|
|
616
|
+
* Only applicable to card elements
|
|
617
|
+
*/
|
|
618
|
+
cardBrands?: string[];
|
|
619
|
+
/**
|
|
620
|
+
* Enable BIN enrichment (6-digit) for the card number field (standalone or unified card).
|
|
621
|
+
* When true, co-badge networks are detected and `selectedNetwork` is available when applicable.
|
|
622
|
+
* Setting `coBadge` turns BIN enrichment on and overrides this — an explicit
|
|
623
|
+
* `binLookup: false` (or `{ enabled: false }`) is ignored when `coBadge` is set.
|
|
624
|
+
*/
|
|
625
|
+
binLookup?: boolean | {
|
|
626
|
+
enabled?: boolean;
|
|
627
|
+
debounceMs?: number;
|
|
628
|
+
};
|
|
629
|
+
/**
|
|
630
|
+
* Co-badge: network priority and optional in-iframe network selector (manual mode).
|
|
631
|
+
* Forces BIN enrichment on when set, overriding `binLookup`; you only need to pass
|
|
632
|
+
* `binLookup` when you want to tune `debounceMs`.
|
|
633
|
+
*/
|
|
634
|
+
coBadge?: {
|
|
635
|
+
preferredNetworks?: string[];
|
|
636
|
+
mode?: 'auto' | 'manual';
|
|
637
|
+
};
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
/**
|
|
641
|
+
* Event type definitions for Basis Theory Elements v3
|
|
642
|
+
* All events follow a consistent contract with base metadata
|
|
643
|
+
*/
|
|
644
|
+
/**
|
|
645
|
+
* Element types
|
|
646
|
+
*/
|
|
647
|
+
export declare type ElementType = 'cardNumber' | 'cvv' | 'expiry' | 'text' | 'card' | 'copyButton' | 'cardDisplay';
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* Encrypted token result
|
|
651
|
+
*/
|
|
652
|
+
export declare interface EncryptedToken {
|
|
653
|
+
encrypted: string;
|
|
654
|
+
type: string;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
/**
|
|
658
|
+
* Token data for encryption
|
|
659
|
+
*/
|
|
660
|
+
export declare interface EncryptToken {
|
|
661
|
+
type: string;
|
|
662
|
+
data: ElementInputObject;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/**
|
|
666
|
+
* Error codes
|
|
667
|
+
*/
|
|
668
|
+
export declare type ErrorCode = 'MOUNT_ERROR' | 'POSTMESSAGE_TIMEOUT' | 'IFRAME_LOAD_ERROR' | 'INITIALIZATION_ERROR' | 'API_ERROR' | 'NETWORK_ERROR' | 'VALIDATION_ERROR' | 'INVALID_CONFIGURATION' | 'UNKNOWN_ERROR' | 'SESSION_CREATION_FAILED' | 'SESSION_AUTHORIZATION_FAILED' | 'TOKEN_NOT_FOUND' | 'TOKEN_RETRIEVAL_FAILED' | 'SESSION_NOT_FOUND' | 'INVALID_TOKEN_TYPE' | 'INVALID_TOKEN_DATA' | 'LOADING_TIMEOUT';
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* Error event detail - fired when errors occur during element operations
|
|
672
|
+
*/
|
|
673
|
+
export declare interface ErrorEventDetail extends BaseEventDetail {
|
|
674
|
+
/** Machine-readable error code */
|
|
675
|
+
code: ErrorCode;
|
|
676
|
+
/** Human-readable error message */
|
|
677
|
+
message: string;
|
|
678
|
+
/** HTTP status code (for API errors) */
|
|
679
|
+
status?: number;
|
|
680
|
+
/** Field-level validation errors from API */
|
|
681
|
+
validationErrors?: Record<string, string[]>;
|
|
682
|
+
/** Additional error context */
|
|
683
|
+
metadata?: {
|
|
684
|
+
/** Error source (e.g., 'tokenize', 'mount') */
|
|
685
|
+
source?: string;
|
|
686
|
+
/** Number of retry attempts */
|
|
687
|
+
retryCount?: number;
|
|
688
|
+
/** Full API response body (for debugging) */
|
|
689
|
+
body?: unknown;
|
|
690
|
+
/** Original error object */
|
|
691
|
+
originalError?: Error;
|
|
692
|
+
};
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
declare type EventListener_2 = (event: CustomEvent) => void;
|
|
696
|
+
export { EventListener_2 as EventListener }
|
|
697
|
+
|
|
698
|
+
export declare type EventType = 'change' | 'ready' | 'networkChanged' | 'focus' | 'blur' | 'error' | 'copy';
|
|
699
|
+
|
|
700
|
+
/**
|
|
701
|
+
* Per-field display configuration
|
|
702
|
+
*/
|
|
703
|
+
declare interface FieldDisplayConfig {
|
|
704
|
+
display?: CardDisplayMode;
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
/**
|
|
708
|
+
* Focus event - fired when element receives focus
|
|
709
|
+
*/
|
|
710
|
+
export declare interface FocusEventDetail extends BaseEventDetail {
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
/**
|
|
714
|
+
* Fired when the selected payment network changes (co-badge)
|
|
715
|
+
*/
|
|
716
|
+
export declare interface NetworkChangedEventDetail extends BaseEventDetail {
|
|
717
|
+
network: string;
|
|
718
|
+
previousNetwork?: string;
|
|
719
|
+
availableNetworks: string[];
|
|
720
|
+
selectionMode: 'auto' | 'manual' | 'user';
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
/**
|
|
724
|
+
* Options for {@link BasisTheorySDK.proxy} — HTTP verb is chosen by the method name.
|
|
725
|
+
*/
|
|
726
|
+
export declare interface ProxyRequestOptions {
|
|
727
|
+
/** Destination URL (ephemeral proxy). Mutually exclusive with `proxyKey`. */
|
|
728
|
+
url?: string;
|
|
729
|
+
/** Pre-configured proxy key. Mutually exclusive with `url`. */
|
|
730
|
+
proxyKey?: string;
|
|
731
|
+
/** Headers forwarded to the destination request */
|
|
732
|
+
headers?: Record<string, string>;
|
|
733
|
+
/** Request body; may contain Element references */
|
|
734
|
+
body?: ElementInputObject | unknown;
|
|
735
|
+
/** When true, the API may return response metadata alongside data */
|
|
736
|
+
includeResponseHeaders?: boolean;
|
|
737
|
+
/** Overrides the key supplied at SDK initialization for this request only */
|
|
738
|
+
apiKey?: string;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/**
|
|
742
|
+
* Proxy result when `includeResponseHeaders` is true (matches common API envelope).
|
|
743
|
+
*/
|
|
744
|
+
export declare interface ProxyResponse {
|
|
745
|
+
data: unknown;
|
|
746
|
+
headers: Record<string, string>;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
/**
|
|
750
|
+
* Queued command from loader
|
|
751
|
+
* Commands are queued before SDK loads, then replayed
|
|
752
|
+
*/
|
|
753
|
+
declare interface QueuedCommand {
|
|
754
|
+
method: 'createElement' | 'tokenize' | 'updateThemeMode';
|
|
755
|
+
args: any[];
|
|
756
|
+
resolve: (result: any) => void;
|
|
757
|
+
reject: (error: Error) => void;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
/**
|
|
761
|
+
* Ready event - fired when element iframe loads and is ready for interaction
|
|
762
|
+
*/
|
|
763
|
+
export declare interface ReadyEventDetail extends BaseEventDetail {
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
export declare interface SDKOptions {
|
|
767
|
+
/**
|
|
768
|
+
* Base URL where element iframes are hosted
|
|
769
|
+
* FRD-2026-003: Now defaults to production CDN (build-time injected, environment-specific)
|
|
770
|
+
* @default 'https://js.basistheory.com/{version}/elements' (production)
|
|
771
|
+
* @example 'http://localhost:4243' (for local development)
|
|
772
|
+
*/
|
|
773
|
+
elementsBaseUrl?: string;
|
|
774
|
+
/**
|
|
775
|
+
* Whitelabel origin (https) for npm consumers. Derives `elementsBaseUrl` from
|
|
776
|
+
* this origin; ignored when `elementsBaseUrl` is set explicitly.
|
|
777
|
+
* @example 'https://pay.customer.com'
|
|
778
|
+
*/
|
|
779
|
+
whitelabelDomain?: string;
|
|
780
|
+
/**
|
|
781
|
+
* @deprecated Use `elementsBaseUrl` instead
|
|
782
|
+
* Origin of the iframe host (where element.html is served)
|
|
783
|
+
*/
|
|
784
|
+
iframeOrigin?: string;
|
|
785
|
+
/**
|
|
786
|
+
* API base URL for tokenization and API operations
|
|
787
|
+
* Auto-detects based on page origin by default:
|
|
788
|
+
* - localhost/flock-dev.com → https://js.flock-dev.com/api (dev)
|
|
789
|
+
* - btsandbox.com → https://js.btsandbox.com/api (uat)
|
|
790
|
+
* - basistheory.com → https://js.basistheory.com/api (prod)
|
|
791
|
+
* - other origins → https://js.basistheory.com/api (prod default)
|
|
792
|
+
*
|
|
793
|
+
* Override for:
|
|
794
|
+
* - Testing against custom API environments
|
|
795
|
+
* - Corporate proxies routing API calls
|
|
796
|
+
* - Regional API endpoints
|
|
797
|
+
*
|
|
798
|
+
* @default Auto-detected based on window.location.origin
|
|
799
|
+
* @example 'https://api-proxy.company.com/basistheory'
|
|
800
|
+
*/
|
|
801
|
+
apiBaseUrl?: string;
|
|
802
|
+
/**
|
|
803
|
+
* Enable debug logging
|
|
804
|
+
* @default false
|
|
805
|
+
*/
|
|
806
|
+
debug?: boolean;
|
|
807
|
+
/**
|
|
808
|
+
* Allow copy buttons to read values from other elements.
|
|
809
|
+
*
|
|
810
|
+
* Required at init to use the `copyButton` element, on top of the per-element
|
|
811
|
+
* `allowClipboard: true`. The coordinator freezes this at initialization and
|
|
812
|
+
* refuses every copy reference unless it was enabled here, so a script that
|
|
813
|
+
* gains execution on the page later can't turn clipboard access on.
|
|
814
|
+
*
|
|
815
|
+
* Clipboard access for raw card data may not be PCI compliant.
|
|
816
|
+
* @default false
|
|
817
|
+
*/
|
|
818
|
+
allowClipboard?: boolean;
|
|
819
|
+
/**
|
|
820
|
+
* Enable performance monitoring (bundle size, load times, compression metrics)
|
|
821
|
+
* When enabled, automatically measures and logs performance after elements load
|
|
822
|
+
* @default false
|
|
823
|
+
*/
|
|
824
|
+
measurePerformance?: boolean;
|
|
825
|
+
/**
|
|
826
|
+
* PostMessage timeout (milliseconds)
|
|
827
|
+
* Increase this for slow network connections (3G, etc.)
|
|
828
|
+
* @default 30000
|
|
829
|
+
*/
|
|
830
|
+
timeoutMs?: number;
|
|
831
|
+
/**
|
|
832
|
+
* PostMessage retry configuration
|
|
833
|
+
*/
|
|
834
|
+
retryConfig?: {
|
|
835
|
+
maxRetries: number;
|
|
836
|
+
delayMs: number;
|
|
837
|
+
backoffFactor: number;
|
|
838
|
+
};
|
|
839
|
+
/**
|
|
840
|
+
* Theme mode: 'light', 'dark', or 'auto' (follows prefers-color-scheme)
|
|
841
|
+
* @default 'auto'
|
|
842
|
+
*/
|
|
843
|
+
themeMode?: ThemeMode;
|
|
844
|
+
/**
|
|
845
|
+
* Theme configuration (design tokens)
|
|
846
|
+
* CSS variables will be injected into element iframes
|
|
847
|
+
*
|
|
848
|
+
* Supports light/dark themes via themeMode or separate theme/darkTheme objects
|
|
849
|
+
*
|
|
850
|
+
* @example
|
|
851
|
+
* ```typescript
|
|
852
|
+
* theme: {
|
|
853
|
+
* colors: {
|
|
854
|
+
* primary: '#007bff',
|
|
855
|
+
* error: '#EA4B97',
|
|
856
|
+
* text: '#1a1a1a',
|
|
857
|
+
* },
|
|
858
|
+
* typography: {
|
|
859
|
+
* fontFamily: 'Inter, sans-serif',
|
|
860
|
+
* fontSize: { base: '16px' },
|
|
861
|
+
* fontWeight: { normal: '400' },
|
|
862
|
+
* },
|
|
863
|
+
* spacing: { sm: '8px', md: '12px', lg: '16px' },
|
|
864
|
+
* borders: {
|
|
865
|
+
* radius: { base: '4px' },
|
|
866
|
+
* width: { base: '2px' },
|
|
867
|
+
* },
|
|
868
|
+
* }
|
|
869
|
+
* ```
|
|
870
|
+
*/
|
|
871
|
+
theme?: ThemeTokens;
|
|
872
|
+
/**
|
|
873
|
+
* Optional dark theme configuration
|
|
874
|
+
* Used when themeMode is 'dark' or 'auto' in dark mode
|
|
875
|
+
*
|
|
876
|
+
* If not provided, will use theme with adjusted colors for dark mode
|
|
877
|
+
*/
|
|
878
|
+
darkTheme?: ThemeTokens;
|
|
879
|
+
/**
|
|
880
|
+
* URL of your backend endpoint that authorizes sessions.
|
|
881
|
+
* Required for cardDisplay element.
|
|
882
|
+
*
|
|
883
|
+
* The SDK will POST { nonce } to this URL after creating a session.
|
|
884
|
+
* Your backend must call POST /sessions/{nonce}/authorize with your private key.
|
|
885
|
+
*
|
|
886
|
+
* @example '/api/authorize-session'
|
|
887
|
+
* @example 'https://api.mycompany.com/bt/authorize'
|
|
888
|
+
*/
|
|
889
|
+
sessionAuthorizationUrl?: string;
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* Session response (snake_case to match BasisTheory API)
|
|
894
|
+
*/
|
|
895
|
+
export declare interface Session {
|
|
896
|
+
/** Unique session nonce */
|
|
897
|
+
nonce: string;
|
|
898
|
+
/** Session expiration timestamp (ISO 8601 format) */
|
|
899
|
+
expires_at?: string;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
/**
|
|
903
|
+
* Sub-element reference for tokenization (used in CardElement)
|
|
904
|
+
*/
|
|
905
|
+
export declare interface SubElementRef {
|
|
906
|
+
id: string;
|
|
907
|
+
type: string;
|
|
908
|
+
mounted: boolean;
|
|
909
|
+
mount: () => never;
|
|
910
|
+
unmount: () => void;
|
|
911
|
+
update: () => Promise<void>;
|
|
912
|
+
focus: () => void;
|
|
913
|
+
blur: () => void;
|
|
914
|
+
clear: () => void;
|
|
915
|
+
on: () => () => void;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/**
|
|
919
|
+
* Theme System Types
|
|
920
|
+
* Implements Hybrid approach: CSS variables for theming + property overrides
|
|
921
|
+
*
|
|
922
|
+
* Uses semantic nesting for better DX:
|
|
923
|
+
* - Magnitude scales: fontSize.sm/base/lg
|
|
924
|
+
* - State variants: border.default/hover/focus
|
|
925
|
+
* - Semantic groups: text.primary/secondary/placeholder
|
|
926
|
+
*
|
|
927
|
+
* Supports light/dark themes via prefers-color-scheme or explicit theme prop
|
|
928
|
+
*/
|
|
929
|
+
declare type ThemeMode = 'light' | 'dark' | 'auto';
|
|
930
|
+
|
|
931
|
+
declare interface ThemeTokens {
|
|
932
|
+
colors: {
|
|
933
|
+
primary: string;
|
|
934
|
+
error: string;
|
|
935
|
+
success: string;
|
|
936
|
+
text: {
|
|
937
|
+
primary: string;
|
|
938
|
+
secondary?: string;
|
|
939
|
+
placeholder?: string;
|
|
940
|
+
disabled?: string;
|
|
941
|
+
};
|
|
942
|
+
background: {
|
|
943
|
+
default: string;
|
|
944
|
+
hover?: string;
|
|
945
|
+
focus?: string;
|
|
946
|
+
disabled?: string;
|
|
947
|
+
};
|
|
948
|
+
border: {
|
|
949
|
+
default: string;
|
|
950
|
+
hover?: string;
|
|
951
|
+
focus?: string;
|
|
952
|
+
error?: string;
|
|
953
|
+
};
|
|
954
|
+
};
|
|
955
|
+
typography: {
|
|
956
|
+
fontFamily: string;
|
|
957
|
+
fontSize: {
|
|
958
|
+
sm?: string;
|
|
959
|
+
base: string;
|
|
960
|
+
lg?: string;
|
|
961
|
+
};
|
|
962
|
+
fontWeight: {
|
|
963
|
+
normal: string;
|
|
964
|
+
medium?: string;
|
|
965
|
+
semibold?: string;
|
|
966
|
+
};
|
|
967
|
+
lineHeight?: {
|
|
968
|
+
tight?: string;
|
|
969
|
+
normal?: string;
|
|
970
|
+
relaxed?: string;
|
|
971
|
+
};
|
|
972
|
+
};
|
|
973
|
+
spacing: {
|
|
974
|
+
xs?: string;
|
|
975
|
+
sm: string;
|
|
976
|
+
md: string;
|
|
977
|
+
lg: string;
|
|
978
|
+
xl?: string;
|
|
979
|
+
};
|
|
980
|
+
borders: {
|
|
981
|
+
radius: {
|
|
982
|
+
none?: string;
|
|
983
|
+
sm?: string;
|
|
984
|
+
base: string;
|
|
985
|
+
md?: string;
|
|
986
|
+
lg?: string;
|
|
987
|
+
full?: string;
|
|
988
|
+
};
|
|
989
|
+
width: {
|
|
990
|
+
thin?: string;
|
|
991
|
+
base: string;
|
|
992
|
+
thick?: string;
|
|
993
|
+
};
|
|
994
|
+
};
|
|
995
|
+
shadows?: {
|
|
996
|
+
none?: string;
|
|
997
|
+
sm?: string;
|
|
998
|
+
base?: string;
|
|
999
|
+
md?: string;
|
|
1000
|
+
lg?: string;
|
|
1001
|
+
focus?: string;
|
|
1002
|
+
};
|
|
1003
|
+
transitions?: {
|
|
1004
|
+
fast?: string;
|
|
1005
|
+
base?: string;
|
|
1006
|
+
slow?: string;
|
|
1007
|
+
};
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
export declare interface TokenCreateRequest {
|
|
1011
|
+
type: string;
|
|
1012
|
+
data: ElementInputObject;
|
|
1013
|
+
metadata?: Record<string, string>;
|
|
1014
|
+
containers?: string[];
|
|
1015
|
+
mask?: Record<string, unknown>;
|
|
1016
|
+
aliases?: string[];
|
|
1017
|
+
search_indexes?: string[];
|
|
1018
|
+
fingerprint_expression?: string;
|
|
1019
|
+
expires_at?: string;
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
/**
|
|
1023
|
+
* Token Intent Response
|
|
1024
|
+
*/
|
|
1025
|
+
export declare interface TokenIntent {
|
|
1026
|
+
/** Token Intent ID */
|
|
1027
|
+
id: string;
|
|
1028
|
+
/** Tenant ID */
|
|
1029
|
+
tenant_id: string;
|
|
1030
|
+
/** Token type */
|
|
1031
|
+
type: string;
|
|
1032
|
+
/** Intent status (e.g. 'created') */
|
|
1033
|
+
status?: string;
|
|
1034
|
+
/** Card details (when type is 'card') */
|
|
1035
|
+
card?: {
|
|
1036
|
+
bin?: string;
|
|
1037
|
+
last4?: string;
|
|
1038
|
+
expiration_month?: number;
|
|
1039
|
+
expiration_year?: number;
|
|
1040
|
+
brand?: string;
|
|
1041
|
+
funding?: string;
|
|
1042
|
+
issuer_country?: {
|
|
1043
|
+
alpha2?: string;
|
|
1044
|
+
name?: string;
|
|
1045
|
+
numeric?: string;
|
|
1046
|
+
};
|
|
1047
|
+
authentication?: string;
|
|
1048
|
+
};
|
|
1049
|
+
/** Bank details (when type is 'bank') */
|
|
1050
|
+
bank?: {
|
|
1051
|
+
routing_number?: string;
|
|
1052
|
+
account_number_last4?: string;
|
|
1053
|
+
};
|
|
1054
|
+
/** Fingerprint */
|
|
1055
|
+
fingerprint?: string;
|
|
1056
|
+
/** Created by application ID */
|
|
1057
|
+
created_by?: string;
|
|
1058
|
+
/** Creation timestamp */
|
|
1059
|
+
created_at: string;
|
|
1060
|
+
/** Expiration timestamp */
|
|
1061
|
+
expires_at: string;
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
export declare interface TokenIntentRequest {
|
|
1065
|
+
type: string;
|
|
1066
|
+
data: ElementInputObject;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
export declare type TokenizeInput = {
|
|
1070
|
+
cardNumber: Element_2;
|
|
1071
|
+
} | {
|
|
1072
|
+
number: Element_2;
|
|
1073
|
+
cvv: Element_2;
|
|
1074
|
+
expiry: Element_2;
|
|
1075
|
+
};
|
|
1076
|
+
|
|
1077
|
+
export declare interface TokenizeResult {
|
|
1078
|
+
id: string;
|
|
1079
|
+
type: 'card' | 'token';
|
|
1080
|
+
mask?: string;
|
|
1081
|
+
brand?: string;
|
|
1082
|
+
expiry?: {
|
|
1083
|
+
month: number;
|
|
1084
|
+
year: number;
|
|
1085
|
+
};
|
|
1086
|
+
metadata?: Record<string, unknown>;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
/** Token `type` is immutable after creation */
|
|
1090
|
+
export declare type TokenUpdateRequest = Omit<Partial<TokenCreateRequest>, 'type'>;
|
|
1091
|
+
|
|
1092
|
+
/**
|
|
1093
|
+
* Transform pattern for modifying input before tokenization
|
|
1094
|
+
* [pattern, replacement] - uses String.prototype.replace(pattern, replacement)
|
|
1095
|
+
*
|
|
1096
|
+
* @example
|
|
1097
|
+
* // Remove dashes from SSN: "123-45-6789" → "123456789"
|
|
1098
|
+
* const ssnTransform: Transform = [/-/g, ''];
|
|
1099
|
+
*
|
|
1100
|
+
* @example
|
|
1101
|
+
* // Remove all non-digits from phone: "(555) 123-4567" → "5551234567"
|
|
1102
|
+
* const phoneTransform: Transform = [/\D/g, ''];
|
|
1103
|
+
*/
|
|
1104
|
+
declare type Transform = [RegExp, string];
|
|
1105
|
+
|
|
1106
|
+
/**
|
|
1107
|
+
* Validation error structure
|
|
1108
|
+
*/
|
|
1109
|
+
export declare interface ValidationError {
|
|
1110
|
+
/** Machine-readable error code */
|
|
1111
|
+
code: string;
|
|
1112
|
+
/** Human-readable error message */
|
|
1113
|
+
message: string;
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
/**
|
|
1117
|
+
* SDK version from package.json
|
|
1118
|
+
* @example
|
|
1119
|
+
* ```typescript
|
|
1120
|
+
* import { version } from '@basis-theory/web-elements';
|
|
1121
|
+
* console.log(`Using SDK version ${version}`);
|
|
1122
|
+
* ```
|
|
1123
|
+
*/
|
|
1124
|
+
export declare const version: string;
|
|
1125
|
+
|
|
1126
|
+
export { }
|
|
1127
|
+
|
|
1128
|
+
|
|
1129
|
+
declare global {
|
|
1130
|
+
interface Window {
|
|
1131
|
+
BasisTheory?: typeof BasisTheory;
|
|
1132
|
+
}
|
|
1133
|
+
}
|