@ozura/elements 1.3.1-next.68 → 1.3.1-next.69
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/oz-elements.esm.js +60 -22
- package/dist/oz-elements.esm.js.map +1 -1
- package/dist/oz-elements.umd.js +60 -22
- package/dist/oz-elements.umd.js.map +1 -1
- package/dist/react/index.cjs.js +61 -23
- package/dist/react/index.cjs.js.map +1 -1
- package/dist/react/index.esm.js +61 -23
- package/dist/react/index.esm.js.map +1 -1
- package/dist/react/react/index.d.ts +3 -1
- package/dist/react/sdk/OzVault.d.ts +23 -0
- package/dist/react/types/index.d.ts +19 -1
- package/dist/react/vue/index.d.ts +24 -1
- package/dist/server/sdk/OzVault.d.ts +23 -0
- package/dist/server/types/index.d.ts +19 -1
- package/dist/server/vue/index.d.ts +24 -1
- package/dist/types/sdk/OzVault.d.ts +23 -0
- package/dist/types/types/index.d.ts +19 -1
- package/dist/types/vue/index.d.ts +24 -1
- package/dist/vue/index.cjs.js +68 -23
- package/dist/vue/index.cjs.js.map +1 -1
- package/dist/vue/index.esm.js +68 -23
- package/dist/vue/index.esm.js.map +1 -1
- package/dist/vue/sdk/OzVault.d.ts +23 -0
- package/dist/vue/types/index.d.ts +19 -1
- package/dist/vue/vue/index.d.ts +24 -1
- package/package.json +1 -1
|
@@ -223,8 +223,14 @@ export interface VaultOptions {
|
|
|
223
223
|
/**
|
|
224
224
|
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
225
225
|
* Use this to show a fallback UI (e.g. "Unable to load payment fields").
|
|
226
|
+
*
|
|
227
|
+
* Receives an optional `info` object with a `source` field identifying which
|
|
228
|
+
* iframe timed out. Currently always `'tokenizer'` — element-level load errors
|
|
229
|
+
* fire the `loaderror` event on the individual element instead.
|
|
226
230
|
*/
|
|
227
|
-
onLoadError?: (
|
|
231
|
+
onLoadError?: (info?: {
|
|
232
|
+
source: 'tokenizer';
|
|
233
|
+
}) => void;
|
|
228
234
|
/** How long to wait (ms) for the tokenizer iframe before calling `onLoadError`. Default: 10 000.
|
|
229
235
|
* Only takes effect when `onLoadError` is also provided — setting this without `onLoadError` has no effect. */
|
|
230
236
|
loadTimeoutMs?: number;
|
|
@@ -354,6 +360,13 @@ export interface BankTokenizeOptions {
|
|
|
354
360
|
firstName: string;
|
|
355
361
|
/** Account holder last name. Required. */
|
|
356
362
|
lastName: string;
|
|
363
|
+
/**
|
|
364
|
+
* Optional billing details for the account holder.
|
|
365
|
+
* When provided, firstName and lastName inside `billing` take precedence
|
|
366
|
+
* over the top-level fields. The normalized details are echoed back in
|
|
367
|
+
* `BankTokenResponse.billing` for convenience.
|
|
368
|
+
*/
|
|
369
|
+
billing?: BillingDetails;
|
|
357
370
|
}
|
|
358
371
|
/** Non-sensitive bank account metadata returned alongside the token. */
|
|
359
372
|
export interface BankAccountMetadata {
|
|
@@ -406,6 +419,11 @@ export interface BankTokenResponse {
|
|
|
406
419
|
token: string;
|
|
407
420
|
/** Non-sensitive bank account metadata. */
|
|
408
421
|
bank?: BankAccountMetadata;
|
|
422
|
+
/**
|
|
423
|
+
* Validated, normalized billing details — echoed back when billing was
|
|
424
|
+
* passed to createBankToken(). Ready to spread into your ACH processor request.
|
|
425
|
+
*/
|
|
426
|
+
billing?: BillingDetails;
|
|
409
427
|
}
|
|
410
428
|
/**
|
|
411
429
|
* Full request body for the Ozura Pay API cardSale endpoint.
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
26
|
import { type Ref, type PropType, type ComputedRef } from 'vue';
|
|
27
|
-
import type { TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
27
|
+
import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
28
28
|
export interface OzElementsProps {
|
|
29
29
|
/** Omit when using a test vault key from a Test project at ozuravault.com.
|
|
30
30
|
* Required for production vault keys. */
|
|
@@ -40,6 +40,14 @@ export interface OzElementsProps {
|
|
|
40
40
|
onSessionRefresh?: () => void;
|
|
41
41
|
/** Called once when the vault tokenizer and all mounted field iframes are ready. */
|
|
42
42
|
onReady?: () => void;
|
|
43
|
+
/**
|
|
44
|
+
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
45
|
+
* Use this to show a fallback UI (e.g. "Payment fields failed to load").
|
|
46
|
+
* Receives an optional info object with `source: 'tokenizer'`.
|
|
47
|
+
*/
|
|
48
|
+
onLoadError?: (info?: {
|
|
49
|
+
source: 'tokenizer';
|
|
50
|
+
}) => void;
|
|
43
51
|
/**
|
|
44
52
|
* Maximum number of tokenize calls before the vault proactively refreshes the session.
|
|
45
53
|
* Must match the `sessionLimit` passed to `createSession()` on your server.
|
|
@@ -94,6 +102,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
94
102
|
type: PropType<() => void>;
|
|
95
103
|
default: undefined;
|
|
96
104
|
};
|
|
105
|
+
onLoadError: {
|
|
106
|
+
type: PropType<() => void>;
|
|
107
|
+
default: undefined;
|
|
108
|
+
};
|
|
97
109
|
sessionLimit: {
|
|
98
110
|
type: PropType<number | null>;
|
|
99
111
|
default: undefined;
|
|
@@ -145,6 +157,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
145
157
|
type: PropType<() => void>;
|
|
146
158
|
default: undefined;
|
|
147
159
|
};
|
|
160
|
+
onLoadError: {
|
|
161
|
+
type: PropType<() => void>;
|
|
162
|
+
default: undefined;
|
|
163
|
+
};
|
|
148
164
|
sessionLimit: {
|
|
149
165
|
type: PropType<number | null>;
|
|
150
166
|
default: undefined;
|
|
@@ -164,6 +180,7 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
164
180
|
maxTokenizeCalls: number;
|
|
165
181
|
sessionUrl: string;
|
|
166
182
|
getSessionKey: (sessionId: string) => Promise<string>;
|
|
183
|
+
onLoadError: () => void;
|
|
167
184
|
onSessionRefresh: () => void;
|
|
168
185
|
onReady: () => void;
|
|
169
186
|
appearance: Appearance;
|
|
@@ -204,6 +221,12 @@ export interface UseOzElementsReturn {
|
|
|
204
221
|
* @throws {Error} if called outside an <OzElements> provider
|
|
205
222
|
*/
|
|
206
223
|
export declare function useOzElements(): UseOzElementsReturn;
|
|
224
|
+
/** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
|
|
225
|
+
export interface OzFieldProps {
|
|
226
|
+
placeholder?: string;
|
|
227
|
+
disabled?: boolean;
|
|
228
|
+
style?: ElementOptions['style'];
|
|
229
|
+
}
|
|
207
230
|
/** Card number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
|
|
208
231
|
export declare const OzCardNumber: import("vue").DefineComponent<{
|
|
209
232
|
placeholder?: string | undefined;
|
|
@@ -107,6 +107,29 @@ export declare class OzVault {
|
|
|
107
107
|
* payButton.textContent = remaining > 0 ? `Pay (${remaining} attempts left)` : 'Pay';
|
|
108
108
|
*/
|
|
109
109
|
get tokenizeCount(): number;
|
|
110
|
+
/**
|
|
111
|
+
* `true` when every mounted field has reported `complete && valid` via its
|
|
112
|
+
* last `change` event. `false` if no fields have been created, or if any
|
|
113
|
+
* field is incomplete or invalid.
|
|
114
|
+
*
|
|
115
|
+
* Use this to gate the pay button in vanilla JS integrations without having
|
|
116
|
+
* to wire up individual `change` event listeners:
|
|
117
|
+
*
|
|
118
|
+
* @example
|
|
119
|
+
* vault.getElement('cardNumber')!.on('change', () => {
|
|
120
|
+
* payBtn.disabled = !vault.isComplete;
|
|
121
|
+
* });
|
|
122
|
+
*/
|
|
123
|
+
get isComplete(): boolean;
|
|
124
|
+
/**
|
|
125
|
+
* `true` while a `createToken()` or `createBankToken()` call is in progress
|
|
126
|
+
* (including the transparent wax-key refresh phase). Use this to keep the pay
|
|
127
|
+
* button disabled during tokenization to prevent double-submission.
|
|
128
|
+
*
|
|
129
|
+
* @example
|
|
130
|
+
* payBtn.disabled = vault.isTokenizing;
|
|
131
|
+
*/
|
|
132
|
+
get isTokenizing(): boolean;
|
|
110
133
|
/**
|
|
111
134
|
* Creates a new OzElement of the given type. Call `.mount(selector)` on the
|
|
112
135
|
* returned element to attach it to the DOM.
|
|
@@ -223,8 +223,14 @@ export interface VaultOptions {
|
|
|
223
223
|
/**
|
|
224
224
|
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
225
225
|
* Use this to show a fallback UI (e.g. "Unable to load payment fields").
|
|
226
|
+
*
|
|
227
|
+
* Receives an optional `info` object with a `source` field identifying which
|
|
228
|
+
* iframe timed out. Currently always `'tokenizer'` — element-level load errors
|
|
229
|
+
* fire the `loaderror` event on the individual element instead.
|
|
226
230
|
*/
|
|
227
|
-
onLoadError?: (
|
|
231
|
+
onLoadError?: (info?: {
|
|
232
|
+
source: 'tokenizer';
|
|
233
|
+
}) => void;
|
|
228
234
|
/** How long to wait (ms) for the tokenizer iframe before calling `onLoadError`. Default: 10 000.
|
|
229
235
|
* Only takes effect when `onLoadError` is also provided — setting this without `onLoadError` has no effect. */
|
|
230
236
|
loadTimeoutMs?: number;
|
|
@@ -354,6 +360,13 @@ export interface BankTokenizeOptions {
|
|
|
354
360
|
firstName: string;
|
|
355
361
|
/** Account holder last name. Required. */
|
|
356
362
|
lastName: string;
|
|
363
|
+
/**
|
|
364
|
+
* Optional billing details for the account holder.
|
|
365
|
+
* When provided, firstName and lastName inside `billing` take precedence
|
|
366
|
+
* over the top-level fields. The normalized details are echoed back in
|
|
367
|
+
* `BankTokenResponse.billing` for convenience.
|
|
368
|
+
*/
|
|
369
|
+
billing?: BillingDetails;
|
|
357
370
|
}
|
|
358
371
|
/** Non-sensitive bank account metadata returned alongside the token. */
|
|
359
372
|
export interface BankAccountMetadata {
|
|
@@ -406,6 +419,11 @@ export interface BankTokenResponse {
|
|
|
406
419
|
token: string;
|
|
407
420
|
/** Non-sensitive bank account metadata. */
|
|
408
421
|
bank?: BankAccountMetadata;
|
|
422
|
+
/**
|
|
423
|
+
* Validated, normalized billing details — echoed back when billing was
|
|
424
|
+
* passed to createBankToken(). Ready to spread into your ACH processor request.
|
|
425
|
+
*/
|
|
426
|
+
billing?: BillingDetails;
|
|
409
427
|
}
|
|
410
428
|
/**
|
|
411
429
|
* Full request body for the Ozura Pay API cardSale endpoint.
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
26
|
import { type Ref, type PropType, type ComputedRef } from 'vue';
|
|
27
|
-
import type { TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
27
|
+
import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
28
28
|
export interface OzElementsProps {
|
|
29
29
|
/** Omit when using a test vault key from a Test project at ozuravault.com.
|
|
30
30
|
* Required for production vault keys. */
|
|
@@ -40,6 +40,14 @@ export interface OzElementsProps {
|
|
|
40
40
|
onSessionRefresh?: () => void;
|
|
41
41
|
/** Called once when the vault tokenizer and all mounted field iframes are ready. */
|
|
42
42
|
onReady?: () => void;
|
|
43
|
+
/**
|
|
44
|
+
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
45
|
+
* Use this to show a fallback UI (e.g. "Payment fields failed to load").
|
|
46
|
+
* Receives an optional info object with `source: 'tokenizer'`.
|
|
47
|
+
*/
|
|
48
|
+
onLoadError?: (info?: {
|
|
49
|
+
source: 'tokenizer';
|
|
50
|
+
}) => void;
|
|
43
51
|
/**
|
|
44
52
|
* Maximum number of tokenize calls before the vault proactively refreshes the session.
|
|
45
53
|
* Must match the `sessionLimit` passed to `createSession()` on your server.
|
|
@@ -94,6 +102,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
94
102
|
type: PropType<() => void>;
|
|
95
103
|
default: undefined;
|
|
96
104
|
};
|
|
105
|
+
onLoadError: {
|
|
106
|
+
type: PropType<() => void>;
|
|
107
|
+
default: undefined;
|
|
108
|
+
};
|
|
97
109
|
sessionLimit: {
|
|
98
110
|
type: PropType<number | null>;
|
|
99
111
|
default: undefined;
|
|
@@ -145,6 +157,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
145
157
|
type: PropType<() => void>;
|
|
146
158
|
default: undefined;
|
|
147
159
|
};
|
|
160
|
+
onLoadError: {
|
|
161
|
+
type: PropType<() => void>;
|
|
162
|
+
default: undefined;
|
|
163
|
+
};
|
|
148
164
|
sessionLimit: {
|
|
149
165
|
type: PropType<number | null>;
|
|
150
166
|
default: undefined;
|
|
@@ -168,6 +184,7 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
168
184
|
appearance: Appearance;
|
|
169
185
|
onSessionRefresh: () => void;
|
|
170
186
|
onReady: () => void;
|
|
187
|
+
onLoadError: () => void;
|
|
171
188
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
172
189
|
export interface UseOzElementsReturn {
|
|
173
190
|
/**
|
|
@@ -204,6 +221,12 @@ export interface UseOzElementsReturn {
|
|
|
204
221
|
* @throws {Error} if called outside an <OzElements> provider
|
|
205
222
|
*/
|
|
206
223
|
export declare function useOzElements(): UseOzElementsReturn;
|
|
224
|
+
/** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
|
|
225
|
+
export interface OzFieldProps {
|
|
226
|
+
placeholder?: string;
|
|
227
|
+
disabled?: boolean;
|
|
228
|
+
style?: ElementOptions['style'];
|
|
229
|
+
}
|
|
207
230
|
/** Card number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
|
|
208
231
|
export declare const OzCardNumber: import("vue").DefineComponent<{
|
|
209
232
|
placeholder?: string | undefined;
|
|
@@ -107,6 +107,29 @@ export declare class OzVault {
|
|
|
107
107
|
* payButton.textContent = remaining > 0 ? `Pay (${remaining} attempts left)` : 'Pay';
|
|
108
108
|
*/
|
|
109
109
|
get tokenizeCount(): number;
|
|
110
|
+
/**
|
|
111
|
+
* `true` when every mounted field has reported `complete && valid` via its
|
|
112
|
+
* last `change` event. `false` if no fields have been created, or if any
|
|
113
|
+
* field is incomplete or invalid.
|
|
114
|
+
*
|
|
115
|
+
* Use this to gate the pay button in vanilla JS integrations without having
|
|
116
|
+
* to wire up individual `change` event listeners:
|
|
117
|
+
*
|
|
118
|
+
* @example
|
|
119
|
+
* vault.getElement('cardNumber')!.on('change', () => {
|
|
120
|
+
* payBtn.disabled = !vault.isComplete;
|
|
121
|
+
* });
|
|
122
|
+
*/
|
|
123
|
+
get isComplete(): boolean;
|
|
124
|
+
/**
|
|
125
|
+
* `true` while a `createToken()` or `createBankToken()` call is in progress
|
|
126
|
+
* (including the transparent wax-key refresh phase). Use this to keep the pay
|
|
127
|
+
* button disabled during tokenization to prevent double-submission.
|
|
128
|
+
*
|
|
129
|
+
* @example
|
|
130
|
+
* payBtn.disabled = vault.isTokenizing;
|
|
131
|
+
*/
|
|
132
|
+
get isTokenizing(): boolean;
|
|
110
133
|
/**
|
|
111
134
|
* Creates a new OzElement of the given type. Call `.mount(selector)` on the
|
|
112
135
|
* returned element to attach it to the DOM.
|
|
@@ -223,8 +223,14 @@ export interface VaultOptions {
|
|
|
223
223
|
/**
|
|
224
224
|
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
225
225
|
* Use this to show a fallback UI (e.g. "Unable to load payment fields").
|
|
226
|
+
*
|
|
227
|
+
* Receives an optional `info` object with a `source` field identifying which
|
|
228
|
+
* iframe timed out. Currently always `'tokenizer'` — element-level load errors
|
|
229
|
+
* fire the `loaderror` event on the individual element instead.
|
|
226
230
|
*/
|
|
227
|
-
onLoadError?: (
|
|
231
|
+
onLoadError?: (info?: {
|
|
232
|
+
source: 'tokenizer';
|
|
233
|
+
}) => void;
|
|
228
234
|
/** How long to wait (ms) for the tokenizer iframe before calling `onLoadError`. Default: 10 000.
|
|
229
235
|
* Only takes effect when `onLoadError` is also provided — setting this without `onLoadError` has no effect. */
|
|
230
236
|
loadTimeoutMs?: number;
|
|
@@ -354,6 +360,13 @@ export interface BankTokenizeOptions {
|
|
|
354
360
|
firstName: string;
|
|
355
361
|
/** Account holder last name. Required. */
|
|
356
362
|
lastName: string;
|
|
363
|
+
/**
|
|
364
|
+
* Optional billing details for the account holder.
|
|
365
|
+
* When provided, firstName and lastName inside `billing` take precedence
|
|
366
|
+
* over the top-level fields. The normalized details are echoed back in
|
|
367
|
+
* `BankTokenResponse.billing` for convenience.
|
|
368
|
+
*/
|
|
369
|
+
billing?: BillingDetails;
|
|
357
370
|
}
|
|
358
371
|
/** Non-sensitive bank account metadata returned alongside the token. */
|
|
359
372
|
export interface BankAccountMetadata {
|
|
@@ -406,6 +419,11 @@ export interface BankTokenResponse {
|
|
|
406
419
|
token: string;
|
|
407
420
|
/** Non-sensitive bank account metadata. */
|
|
408
421
|
bank?: BankAccountMetadata;
|
|
422
|
+
/**
|
|
423
|
+
* Validated, normalized billing details — echoed back when billing was
|
|
424
|
+
* passed to createBankToken(). Ready to spread into your ACH processor request.
|
|
425
|
+
*/
|
|
426
|
+
billing?: BillingDetails;
|
|
409
427
|
}
|
|
410
428
|
/**
|
|
411
429
|
* Full request body for the Ozura Pay API cardSale endpoint.
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* ```
|
|
25
25
|
*/
|
|
26
26
|
import { type Ref, type PropType, type ComputedRef } from 'vue';
|
|
27
|
-
import type { TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
27
|
+
import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
|
|
28
28
|
export interface OzElementsProps {
|
|
29
29
|
/** Omit when using a test vault key from a Test project at ozuravault.com.
|
|
30
30
|
* Required for production vault keys. */
|
|
@@ -40,6 +40,14 @@ export interface OzElementsProps {
|
|
|
40
40
|
onSessionRefresh?: () => void;
|
|
41
41
|
/** Called once when the vault tokenizer and all mounted field iframes are ready. */
|
|
42
42
|
onReady?: () => void;
|
|
43
|
+
/**
|
|
44
|
+
* Called if the tokenizer iframe fails to signal ready within `loadTimeoutMs`.
|
|
45
|
+
* Use this to show a fallback UI (e.g. "Payment fields failed to load").
|
|
46
|
+
* Receives an optional info object with `source: 'tokenizer'`.
|
|
47
|
+
*/
|
|
48
|
+
onLoadError?: (info?: {
|
|
49
|
+
source: 'tokenizer';
|
|
50
|
+
}) => void;
|
|
43
51
|
/**
|
|
44
52
|
* Maximum number of tokenize calls before the vault proactively refreshes the session.
|
|
45
53
|
* Must match the `sessionLimit` passed to `createSession()` on your server.
|
|
@@ -94,6 +102,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
94
102
|
type: PropType<() => void>;
|
|
95
103
|
default: undefined;
|
|
96
104
|
};
|
|
105
|
+
onLoadError: {
|
|
106
|
+
type: PropType<() => void>;
|
|
107
|
+
default: undefined;
|
|
108
|
+
};
|
|
97
109
|
sessionLimit: {
|
|
98
110
|
type: PropType<number | null>;
|
|
99
111
|
default: undefined;
|
|
@@ -145,6 +157,10 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
145
157
|
type: PropType<() => void>;
|
|
146
158
|
default: undefined;
|
|
147
159
|
};
|
|
160
|
+
onLoadError: {
|
|
161
|
+
type: PropType<() => void>;
|
|
162
|
+
default: undefined;
|
|
163
|
+
};
|
|
148
164
|
sessionLimit: {
|
|
149
165
|
type: PropType<number | null>;
|
|
150
166
|
default: undefined;
|
|
@@ -168,6 +184,7 @@ export declare const OzElements: import("vue").DefineComponent<import("vue").Ext
|
|
|
168
184
|
appearance: Appearance;
|
|
169
185
|
onSessionRefresh: () => void;
|
|
170
186
|
onReady: () => void;
|
|
187
|
+
onLoadError: () => void;
|
|
171
188
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
172
189
|
export interface UseOzElementsReturn {
|
|
173
190
|
/**
|
|
@@ -204,6 +221,12 @@ export interface UseOzElementsReturn {
|
|
|
204
221
|
* @throws {Error} if called outside an <OzElements> provider
|
|
205
222
|
*/
|
|
206
223
|
export declare function useOzElements(): UseOzElementsReturn;
|
|
224
|
+
/** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
|
|
225
|
+
export interface OzFieldProps {
|
|
226
|
+
placeholder?: string;
|
|
227
|
+
disabled?: boolean;
|
|
228
|
+
style?: ElementOptions['style'];
|
|
229
|
+
}
|
|
207
230
|
/** Card number field. Emits `change` (ElementChangeEvent), `focus`, `blur`. */
|
|
208
231
|
export declare const OzCardNumber: import("vue").DefineComponent<{
|
|
209
232
|
placeholder?: string | undefined;
|
package/dist/vue/index.cjs.js
CHANGED
|
@@ -1116,7 +1116,7 @@ class OzVault {
|
|
|
1116
1116
|
this.loadErrorTimeoutId = setTimeout(() => {
|
|
1117
1117
|
this.loadErrorTimeoutId = null;
|
|
1118
1118
|
if (!this._destroyed && !this.tokenizerReady) {
|
|
1119
|
-
options.onLoadError();
|
|
1119
|
+
options.onLoadError({ source: 'tokenizer' });
|
|
1120
1120
|
}
|
|
1121
1121
|
}, timeout);
|
|
1122
1122
|
}
|
|
@@ -1249,6 +1249,39 @@ class OzVault {
|
|
|
1249
1249
|
get tokenizeCount() {
|
|
1250
1250
|
return this._tokenizeSuccessCount;
|
|
1251
1251
|
}
|
|
1252
|
+
/**
|
|
1253
|
+
* `true` when every mounted field has reported `complete && valid` via its
|
|
1254
|
+
* last `change` event. `false` if no fields have been created, or if any
|
|
1255
|
+
* field is incomplete or invalid.
|
|
1256
|
+
*
|
|
1257
|
+
* Use this to gate the pay button in vanilla JS integrations without having
|
|
1258
|
+
* to wire up individual `change` event listeners:
|
|
1259
|
+
*
|
|
1260
|
+
* @example
|
|
1261
|
+
* vault.getElement('cardNumber')!.on('change', () => {
|
|
1262
|
+
* payBtn.disabled = !vault.isComplete;
|
|
1263
|
+
* });
|
|
1264
|
+
*/
|
|
1265
|
+
get isComplete() {
|
|
1266
|
+
if (this.elements.size === 0)
|
|
1267
|
+
return false;
|
|
1268
|
+
for (const frameId of this.elements.keys()) {
|
|
1269
|
+
if (this.completionState.get(frameId) !== true)
|
|
1270
|
+
return false;
|
|
1271
|
+
}
|
|
1272
|
+
return true;
|
|
1273
|
+
}
|
|
1274
|
+
/**
|
|
1275
|
+
* `true` while a `createToken()` or `createBankToken()` call is in progress
|
|
1276
|
+
* (including the transparent wax-key refresh phase). Use this to keep the pay
|
|
1277
|
+
* button disabled during tokenization to prevent double-submission.
|
|
1278
|
+
*
|
|
1279
|
+
* @example
|
|
1280
|
+
* payBtn.disabled = vault.isTokenizing;
|
|
1281
|
+
*/
|
|
1282
|
+
get isTokenizing() {
|
|
1283
|
+
return this._tokenizing !== null;
|
|
1284
|
+
}
|
|
1252
1285
|
/**
|
|
1253
1286
|
* Creates a new OzElement of the given type. Call `.mount(selector)` on the
|
|
1254
1287
|
* returned element to attach it to the DOM.
|
|
@@ -1331,17 +1364,29 @@ class OzVault {
|
|
|
1331
1364
|
? 'A card tokenization is already in progress. Wait for it to complete before calling createBankToken().'
|
|
1332
1365
|
: 'A bank tokenization is already in progress. Wait for it to complete before calling createBankToken() again.');
|
|
1333
1366
|
}
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1367
|
+
// Validate billing details if provided — billing.firstName/lastName take
|
|
1368
|
+
// precedence over the top-level params (mirrors createToken() behaviour).
|
|
1369
|
+
let normalizedBankBilling;
|
|
1370
|
+
let bankFirstName = ((_a = options.firstName) !== null && _a !== void 0 ? _a : '').trim();
|
|
1371
|
+
let bankLastName = ((_b = options.lastName) !== null && _b !== void 0 ? _b : '').trim();
|
|
1372
|
+
if (options.billing) {
|
|
1373
|
+
const result = validateBilling(options.billing);
|
|
1374
|
+
if (!result.valid) {
|
|
1375
|
+
throw new OzError(`Invalid billing details: ${result.errors.join('; ')}`);
|
|
1376
|
+
}
|
|
1377
|
+
normalizedBankBilling = result.normalized;
|
|
1378
|
+
bankFirstName = normalizedBankBilling.firstName;
|
|
1379
|
+
bankLastName = normalizedBankBilling.lastName;
|
|
1342
1380
|
}
|
|
1343
|
-
|
|
1344
|
-
|
|
1381
|
+
else {
|
|
1382
|
+
if (!bankFirstName)
|
|
1383
|
+
throw new OzError('firstName is required for bank account tokenization.');
|
|
1384
|
+
if (!bankLastName)
|
|
1385
|
+
throw new OzError('lastName is required for bank account tokenization.');
|
|
1386
|
+
if (bankFirstName.length > 50)
|
|
1387
|
+
throw new OzError('firstName must be 50 characters or fewer.');
|
|
1388
|
+
if (bankLastName.length > 50)
|
|
1389
|
+
throw new OzError('lastName must be 50 characters or fewer.');
|
|
1345
1390
|
}
|
|
1346
1391
|
const accountEl = this.bankElementsByType.get('accountNumber');
|
|
1347
1392
|
const routingEl = this.bankElementsByType.get('routingNumber');
|
|
@@ -1367,14 +1412,7 @@ class OzVault {
|
|
|
1367
1412
|
if (this._resetCount === resetCountAtStart)
|
|
1368
1413
|
this._tokenizing = null;
|
|
1369
1414
|
};
|
|
1370
|
-
this.bankTokenizeResolvers.set(requestId, {
|
|
1371
|
-
resolve: (v) => { cleanup(); resolve(v); },
|
|
1372
|
-
reject: (e) => { cleanup(); reject(e); },
|
|
1373
|
-
firstName: options.firstName.trim(),
|
|
1374
|
-
lastName: options.lastName.trim(),
|
|
1375
|
-
readyElements: readyBankElements,
|
|
1376
|
-
fieldCount: readyBankElements.length,
|
|
1377
|
-
});
|
|
1415
|
+
this.bankTokenizeResolvers.set(requestId, Object.assign(Object.assign({ resolve: (v) => { cleanup(); resolve(v); }, reject: (e) => { cleanup(); reject(e); }, firstName: bankFirstName, lastName: bankLastName }, (normalizedBankBilling ? { billing: normalizedBankBilling } : {})), { readyElements: readyBankElements, fieldCount: readyBankElements.length }));
|
|
1378
1416
|
try {
|
|
1379
1417
|
const bankChannels = readyBankElements.map(() => new MessageChannel());
|
|
1380
1418
|
const bankTokenizeStartMs = Date.now();
|
|
@@ -1383,8 +1421,8 @@ class OzVault {
|
|
|
1383
1421
|
requestId,
|
|
1384
1422
|
tokenizationSessionId: this.tokenizationSessionId,
|
|
1385
1423
|
pubKey: (_a = this.pubKey) !== null && _a !== void 0 ? _a : '',
|
|
1386
|
-
firstName:
|
|
1387
|
-
lastName:
|
|
1424
|
+
firstName: bankFirstName,
|
|
1425
|
+
lastName: bankLastName,
|
|
1388
1426
|
fieldCount: readyBankElements.length,
|
|
1389
1427
|
}, bankChannels.map(ch => ch.port1));
|
|
1390
1428
|
this.log('OZ_BANK_TOKENIZE sent', { requestIdPrefix: `${requestId.slice(0, 12)}...`, fieldCount: readyBankElements.length });
|
|
@@ -2106,7 +2144,7 @@ class OzVault {
|
|
|
2106
2144
|
break;
|
|
2107
2145
|
}
|
|
2108
2146
|
const bank = isBankAccountMetadata(msg.bank) ? msg.bank : undefined;
|
|
2109
|
-
pending.resolve(Object.assign({ token }, (bank ? { bank } : {})));
|
|
2147
|
+
pending.resolve(Object.assign(Object.assign({ token }, (bank ? { bank } : {})), (pending.billing ? { billing: pending.billing } : {})));
|
|
2110
2148
|
this.log('bank token received', {
|
|
2111
2149
|
elapsedMs: pending.tokenizeStartMs != null ? Date.now() - pending.tokenizeStartMs : null,
|
|
2112
2150
|
tokenPresent: true,
|
|
@@ -2273,6 +2311,7 @@ const OzElements = vue.defineComponent({
|
|
|
2273
2311
|
debug: { type: Boolean, default: undefined },
|
|
2274
2312
|
onSessionRefresh: { type: Function, default: undefined },
|
|
2275
2313
|
onReady: { type: Function, default: undefined },
|
|
2314
|
+
onLoadError: { type: Function, default: undefined },
|
|
2276
2315
|
sessionLimit: { type: Number, default: undefined },
|
|
2277
2316
|
maxTokenizeCalls: { type: Number, default: undefined },
|
|
2278
2317
|
},
|
|
@@ -2318,7 +2357,7 @@ const OzElements = vue.defineComponent({
|
|
|
2318
2357
|
vue.onMounted(() => {
|
|
2319
2358
|
const ac = new AbortController();
|
|
2320
2359
|
abortController = ac;
|
|
2321
|
-
OzVault.create(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ pubKey: props.pubKey }, (props.sessionUrl ? { sessionUrl: props.sessionUrl } : {})), (props.getSessionKey ? { getSessionKey: props.getSessionKey } : {})), (props.frameBaseUrl ? { frameBaseUrl: props.frameBaseUrl } : {})), (props.fonts ? { fonts: props.fonts } : {})), (props.appearance ? { appearance: props.appearance } : {})), (props.loadTimeoutMs !== undefined ? { loadTimeoutMs: props.loadTimeoutMs } : {})), (props.debug ? { debug: props.debug } : {})), {
|
|
2360
|
+
OzVault.create(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ pubKey: props.pubKey }, (props.sessionUrl ? { sessionUrl: props.sessionUrl } : {})), (props.getSessionKey ? { getSessionKey: props.getSessionKey } : {})), (props.frameBaseUrl ? { frameBaseUrl: props.frameBaseUrl } : {})), (props.fonts ? { fonts: props.fonts } : {})), (props.appearance ? { appearance: props.appearance } : {})), (props.loadTimeoutMs !== undefined ? { loadTimeoutMs: props.loadTimeoutMs } : {})), (props.onLoadError ? { onLoadError: props.onLoadError } : {})), (props.debug ? { debug: props.debug } : {})), {
|
|
2322
2361
|
// Session lifecycle — wire refresh callback and reset tokenizeCount so the
|
|
2323
2362
|
// counter stays accurate across proactive key refreshes (mirrors React provider).
|
|
2324
2363
|
// Deferred by one microtask for the same reason as React: notifyTokenize fires
|
|
@@ -2340,6 +2379,12 @@ const OzElements = vue.defineComponent({
|
|
|
2340
2379
|
if (ac.signal.aborted)
|
|
2341
2380
|
return;
|
|
2342
2381
|
initError.value = err instanceof Error ? err : new Error('OzVault.create() failed.');
|
|
2382
|
+
if (props.onLoadError) {
|
|
2383
|
+
props.onLoadError({ source: 'tokenizer' });
|
|
2384
|
+
}
|
|
2385
|
+
else {
|
|
2386
|
+
console.error('[OzElements] OzVault.create() failed. Provide an `onLoadError` prop to handle this gracefully.', err);
|
|
2387
|
+
}
|
|
2343
2388
|
});
|
|
2344
2389
|
});
|
|
2345
2390
|
vue.onUnmounted(() => {
|