@idonatedev/idonate-sdk 1.1.0-dev7 → 1.1.0-dev9
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/tokenize/CardConnectTokenizer.d.ts +1 -0
- package/dist/tokenize/CardConnectTokenizer.js +101 -45
- package/dist/tokenize/SpreedlyTokenizer.d.ts +1 -0
- package/dist/tokenize/SpreedlyTokenizer.js +270 -129
- package/dist/tokenize/styles.d.ts +1 -0
- package/dist/tokenize/styles.js +9 -0
- package/dist/tokenize/types.d.ts +3 -0
- package/package.json +2 -2
- package/umd/idonate-sdk.js +1 -1
|
@@ -21,10 +21,11 @@ const tokenizer_utils_1 = require("./tokenizer-utils");
|
|
|
21
21
|
const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
|
|
22
22
|
const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
|
|
23
23
|
class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
24
|
-
constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false) {
|
|
24
|
+
constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line') {
|
|
25
25
|
super();
|
|
26
26
|
this.environmentKey = environmentKey;
|
|
27
27
|
this.containerId = containerId;
|
|
28
|
+
this.layout = layout;
|
|
28
29
|
this.isReady = false;
|
|
29
30
|
this.bankCountry = 'US';
|
|
30
31
|
this.enableTestMode = false;
|
|
@@ -58,7 +59,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
58
59
|
expiry: { isValid: false, isEmpty: true },
|
|
59
60
|
};
|
|
60
61
|
}
|
|
61
|
-
this.mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, styles);
|
|
62
|
+
this.mergedStyles = (0, styles_1.getContainerStylesForLayout)((0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, styles), this.layout);
|
|
62
63
|
const fieldIds = this.generateFieldIds(containerId);
|
|
63
64
|
this.numberEl = fieldIds.numberId;
|
|
64
65
|
this.cvvEl = fieldIds.cvvId;
|
|
@@ -77,20 +78,22 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
77
78
|
if (!environmentKey) {
|
|
78
79
|
environmentKey = '';
|
|
79
80
|
}
|
|
80
|
-
const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false);
|
|
81
|
+
const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line');
|
|
81
82
|
tokenizer.organizationId = config.organizationId;
|
|
82
83
|
tokenizer.embedId = config.embedId;
|
|
83
84
|
tokenizer.clientConfig = config.clientConfig;
|
|
84
85
|
tokenizer.createInternalElements();
|
|
85
86
|
let securityArgs;
|
|
86
87
|
if (container.mode === 'credit_card' &&
|
|
87
|
-
|
|
88
|
-
(config
|
|
88
|
+
config.clientConfig.enableSpreedlySecureTokenization) {
|
|
89
|
+
if (!config.organizationId || !config.embedId) {
|
|
90
|
+
throw new Error('Secure tokenization is enabled but organizationId and embedId are required');
|
|
91
|
+
}
|
|
89
92
|
try {
|
|
90
93
|
securityArgs = yield (0, spreedly_secure_1.fetchSpreedlySecurityArgs)(config.clientConfig, config.organizationId, config.embedId);
|
|
91
94
|
}
|
|
92
95
|
catch (error) {
|
|
93
|
-
|
|
96
|
+
throw new Error(`Secure tokenization is enabled but failed to initialize: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
94
97
|
}
|
|
95
98
|
}
|
|
96
99
|
yield tokenizer.init(securityArgs);
|
|
@@ -255,64 +258,127 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
255
258
|
});
|
|
256
259
|
}
|
|
257
260
|
createCanadianBankAccountFields(container) {
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
this.
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
this.
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
306
|
-
this.
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
261
|
+
if (this.layout === 'two-line') {
|
|
262
|
+
this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
|
|
263
|
+
Object.assign(this.accountTypeEl.style, {
|
|
264
|
+
flex: '2',
|
|
265
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
|
|
266
|
+
});
|
|
267
|
+
this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
|
|
268
|
+
container.appendChild(this.accountTypeEl);
|
|
269
|
+
this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
|
|
270
|
+
Object.assign(this.institutionNumberEl.style, {
|
|
271
|
+
flex: '1',
|
|
272
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
|
|
273
|
+
});
|
|
274
|
+
this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
|
|
275
|
+
this.institutionNumberEl.addEventListener('blur', () => {
|
|
276
|
+
const isValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
|
|
277
|
+
if (!isValid && this.institutionNumberEl.value) {
|
|
278
|
+
this.applyErrorStyles(this.institutionNumberEl);
|
|
279
|
+
}
|
|
280
|
+
else {
|
|
281
|
+
this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'middle');
|
|
282
|
+
}
|
|
283
|
+
this.updateBankAccountValidation();
|
|
284
|
+
});
|
|
285
|
+
container.appendChild(this.institutionNumberEl);
|
|
286
|
+
this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
|
|
287
|
+
Object.assign(this.transitNumberEl.style, {
|
|
288
|
+
flex: '2',
|
|
289
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
|
|
290
|
+
});
|
|
291
|
+
this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
|
|
292
|
+
this.transitNumberEl.addEventListener('blur', () => {
|
|
293
|
+
const isValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
|
|
294
|
+
if (!isValid && this.transitNumberEl.value) {
|
|
295
|
+
this.applyErrorStyles(this.transitNumberEl);
|
|
296
|
+
}
|
|
297
|
+
else {
|
|
298
|
+
this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'right');
|
|
299
|
+
}
|
|
300
|
+
this.updateBankAccountValidation();
|
|
301
|
+
});
|
|
302
|
+
container.appendChild(this.transitNumberEl);
|
|
303
|
+
this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
|
|
304
|
+
Object.assign(this.accountNumberEl.style, {
|
|
305
|
+
flex: '1',
|
|
306
|
+
flexBasis: '100%',
|
|
307
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
|
|
308
|
+
});
|
|
309
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
|
|
310
|
+
this.accountNumberEl.addEventListener('blur', () => {
|
|
311
|
+
const isValid = (0, tokenizer_utils_1.validateCanadianAccountNumber)(this.accountNumberEl.value);
|
|
312
|
+
if (!isValid && this.accountNumberEl.value) {
|
|
313
|
+
this.applyErrorStyles(this.accountNumberEl);
|
|
314
|
+
}
|
|
315
|
+
else {
|
|
316
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
|
|
317
|
+
}
|
|
318
|
+
this.updateBankAccountValidation();
|
|
319
|
+
});
|
|
320
|
+
container.appendChild(this.accountNumberEl);
|
|
321
|
+
}
|
|
322
|
+
else {
|
|
323
|
+
this.institutionNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-institution`, 'text', 'Inst *', 3);
|
|
324
|
+
Object.assign(this.institutionNumberEl.style, {
|
|
325
|
+
flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.flex,
|
|
326
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.institutionNumber.minWidth,
|
|
327
|
+
});
|
|
328
|
+
this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
|
|
329
|
+
this.institutionNumberEl.addEventListener('blur', () => {
|
|
330
|
+
const isValid = (0, tokenizer_utils_1.validateInstitutionNumber)(this.institutionNumberEl.value);
|
|
331
|
+
if (!isValid && this.institutionNumberEl.value) {
|
|
332
|
+
this.applyErrorStyles(this.institutionNumberEl);
|
|
333
|
+
}
|
|
334
|
+
else {
|
|
335
|
+
this.applyInputStyles(this.institutionNumberEl, this.mergedStyles, 'left');
|
|
336
|
+
}
|
|
337
|
+
this.updateBankAccountValidation();
|
|
338
|
+
});
|
|
339
|
+
container.appendChild(this.institutionNumberEl);
|
|
340
|
+
this.transitNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-transit`, 'text', 'Transit *', 5);
|
|
341
|
+
Object.assign(this.transitNumberEl.style, {
|
|
342
|
+
flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.flex,
|
|
343
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.transitNumber.minWidth,
|
|
344
|
+
});
|
|
345
|
+
this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
|
|
346
|
+
this.transitNumberEl.addEventListener('blur', () => {
|
|
347
|
+
const isValid = (0, tokenizer_utils_1.validateTransitNumber)(this.transitNumberEl.value);
|
|
348
|
+
if (!isValid && this.transitNumberEl.value) {
|
|
349
|
+
this.applyErrorStyles(this.transitNumberEl);
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
this.applyInputStyles(this.transitNumberEl, this.mergedStyles, 'middle');
|
|
353
|
+
}
|
|
354
|
+
this.updateBankAccountValidation();
|
|
355
|
+
});
|
|
356
|
+
container.appendChild(this.transitNumberEl);
|
|
357
|
+
this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *');
|
|
358
|
+
Object.assign(this.accountNumberEl.style, {
|
|
359
|
+
flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.flex,
|
|
360
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountNumber.minWidth,
|
|
361
|
+
});
|
|
362
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
|
|
363
|
+
this.accountNumberEl.addEventListener('blur', () => {
|
|
364
|
+
const isValid = (0, tokenizer_utils_1.validateCanadianAccountNumber)(this.accountNumberEl.value);
|
|
365
|
+
if (!isValid && this.accountNumberEl.value) {
|
|
366
|
+
this.applyErrorStyles(this.accountNumberEl);
|
|
367
|
+
}
|
|
368
|
+
else {
|
|
369
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
|
|
370
|
+
}
|
|
371
|
+
this.updateBankAccountValidation();
|
|
372
|
+
});
|
|
373
|
+
container.appendChild(this.accountNumberEl);
|
|
374
|
+
this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
|
|
375
|
+
Object.assign(this.accountTypeEl.style, {
|
|
376
|
+
flex: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.flex,
|
|
377
|
+
minWidth: tokenizer_constants_1.CANADIAN_BANK_FIELD_FLEX.accountType.minWidth,
|
|
378
|
+
});
|
|
379
|
+
this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
|
|
380
|
+
container.appendChild(this.accountTypeEl);
|
|
381
|
+
}
|
|
316
382
|
}
|
|
317
383
|
tokenizeBankAccountInternal(bankData) {
|
|
318
384
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -659,7 +725,8 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
659
725
|
isValid: inputProperties.validNumber || false,
|
|
660
726
|
isEmpty: inputProperties.numberLength === 0,
|
|
661
727
|
};
|
|
662
|
-
if (inputProperties.cardType &&
|
|
728
|
+
if (inputProperties.cardType &&
|
|
729
|
+
inputProperties.cardType !== 'unknown') {
|
|
663
730
|
this.emit('cardTypeChange', {
|
|
664
731
|
cardType: this.normalizeCardType(inputProperties.cardType),
|
|
665
732
|
});
|
|
@@ -698,29 +765,57 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
698
765
|
}
|
|
699
766
|
}
|
|
700
767
|
createCreditCardFields(container) {
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
768
|
+
if (this.layout === 'two-line') {
|
|
769
|
+
const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, '1', tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
|
|
770
|
+
cardNumberDiv.style.height = this.mergedStyles.input.height;
|
|
771
|
+
cardNumberDiv.style.flexBasis = '100%';
|
|
772
|
+
container.appendChild(cardNumberDiv);
|
|
773
|
+
this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
|
|
774
|
+
Object.assign(this.expiryEl.style, {
|
|
775
|
+
flex: '1',
|
|
776
|
+
minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
|
|
777
|
+
});
|
|
778
|
+
this.applyInputStyles(this.expiryEl, this.mergedStyles, 'left');
|
|
779
|
+
this.addExpiryFormatter(this.expiryEl);
|
|
780
|
+
this.expiryEl.addEventListener('input', () => {
|
|
781
|
+
var _a;
|
|
782
|
+
const expiry = this.parseExpiry(this.expiryEl);
|
|
783
|
+
this.currentValidationState.expiry = {
|
|
784
|
+
isValid: !!expiry,
|
|
785
|
+
isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
|
|
786
|
+
};
|
|
787
|
+
this.updateOverallValidation();
|
|
788
|
+
});
|
|
789
|
+
container.appendChild(this.expiryEl);
|
|
790
|
+
const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, '1', tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
|
|
791
|
+
cvvDiv.style.height = this.mergedStyles.input.height;
|
|
792
|
+
container.appendChild(cvvDiv);
|
|
793
|
+
}
|
|
794
|
+
else {
|
|
795
|
+
const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
|
|
796
|
+
cardNumberDiv.style.height = this.mergedStyles.input.height;
|
|
797
|
+
container.appendChild(cardNumberDiv);
|
|
798
|
+
this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
|
|
799
|
+
Object.assign(this.expiryEl.style, {
|
|
800
|
+
flex: tokenizer_constants_1.FIELD_FLEX.expiry.flex,
|
|
801
|
+
minWidth: tokenizer_constants_1.FIELD_FLEX.expiry.minWidth,
|
|
802
|
+
});
|
|
803
|
+
this.applyInputStyles(this.expiryEl, this.mergedStyles, 'middle');
|
|
804
|
+
this.addExpiryFormatter(this.expiryEl);
|
|
805
|
+
this.expiryEl.addEventListener('input', () => {
|
|
806
|
+
var _a;
|
|
807
|
+
const expiry = this.parseExpiry(this.expiryEl);
|
|
808
|
+
this.currentValidationState.expiry = {
|
|
809
|
+
isValid: !!expiry,
|
|
810
|
+
isEmpty: !((_a = this.expiryEl) === null || _a === void 0 ? void 0 : _a.value),
|
|
811
|
+
};
|
|
812
|
+
this.updateOverallValidation();
|
|
813
|
+
});
|
|
814
|
+
container.appendChild(this.expiryEl);
|
|
815
|
+
const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
|
|
816
|
+
cvvDiv.style.height = this.mergedStyles.input.height;
|
|
817
|
+
container.appendChild(cvvDiv);
|
|
818
|
+
}
|
|
724
819
|
}
|
|
725
820
|
createBankAccountFields(container) {
|
|
726
821
|
if (this.bankCountry === 'CA') {
|
|
@@ -731,47 +826,93 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
|
|
|
731
826
|
}
|
|
732
827
|
}
|
|
733
828
|
createUSBankAccountFields(container) {
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
this.
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
}
|
|
765
|
-
this.
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
829
|
+
if (this.layout === 'two-line') {
|
|
830
|
+
this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
|
|
831
|
+
Object.assign(this.accountTypeEl.style, {
|
|
832
|
+
flex: '1',
|
|
833
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
|
|
834
|
+
});
|
|
835
|
+
this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'left');
|
|
836
|
+
container.appendChild(this.accountTypeEl);
|
|
837
|
+
this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
|
|
838
|
+
Object.assign(this.routingNumberEl.style, {
|
|
839
|
+
flex: '1',
|
|
840
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
|
|
841
|
+
});
|
|
842
|
+
this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
|
|
843
|
+
this.routingNumberEl.addEventListener('blur', () => {
|
|
844
|
+
const isValid = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
|
|
845
|
+
if (!isValid && this.routingNumberEl.value) {
|
|
846
|
+
this.applyErrorStyles(this.routingNumberEl);
|
|
847
|
+
}
|
|
848
|
+
else {
|
|
849
|
+
this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'right');
|
|
850
|
+
}
|
|
851
|
+
this.updateBankAccountValidation();
|
|
852
|
+
});
|
|
853
|
+
container.appendChild(this.routingNumberEl);
|
|
854
|
+
this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
|
|
855
|
+
Object.assign(this.accountNumberEl.style, {
|
|
856
|
+
flex: '1',
|
|
857
|
+
flexBasis: '100%',
|
|
858
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
|
|
859
|
+
});
|
|
860
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
|
|
861
|
+
this.accountNumberEl.addEventListener('blur', () => {
|
|
862
|
+
const isValid = (0, tokenizer_utils_1.validateAccountNumber)(this.accountNumberEl.value);
|
|
863
|
+
if (!isValid && this.accountNumberEl.value) {
|
|
864
|
+
this.applyErrorStyles(this.accountNumberEl);
|
|
865
|
+
}
|
|
866
|
+
else {
|
|
867
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles);
|
|
868
|
+
}
|
|
869
|
+
this.updateBankAccountValidation();
|
|
870
|
+
});
|
|
871
|
+
container.appendChild(this.accountNumberEl);
|
|
872
|
+
}
|
|
873
|
+
else {
|
|
874
|
+
this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
|
|
875
|
+
Object.assign(this.routingNumberEl.style, {
|
|
876
|
+
flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
|
|
877
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
|
|
878
|
+
});
|
|
879
|
+
this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
|
|
880
|
+
this.routingNumberEl.addEventListener('blur', () => {
|
|
881
|
+
const isValid = (0, tokenizer_utils_1.validateRoutingNumber)(this.routingNumberEl.value);
|
|
882
|
+
if (!isValid && this.routingNumberEl.value) {
|
|
883
|
+
this.applyErrorStyles(this.routingNumberEl);
|
|
884
|
+
}
|
|
885
|
+
else {
|
|
886
|
+
this.applyInputStyles(this.routingNumberEl, this.mergedStyles, 'left');
|
|
887
|
+
}
|
|
888
|
+
this.updateBankAccountValidation();
|
|
889
|
+
});
|
|
890
|
+
container.appendChild(this.routingNumberEl);
|
|
891
|
+
this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
|
|
892
|
+
Object.assign(this.accountNumberEl.style, {
|
|
893
|
+
flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
|
|
894
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
|
|
895
|
+
});
|
|
896
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
|
|
897
|
+
this.accountNumberEl.addEventListener('blur', () => {
|
|
898
|
+
const isValid = (0, tokenizer_utils_1.validateAccountNumber)(this.accountNumberEl.value);
|
|
899
|
+
if (!isValid && this.accountNumberEl.value) {
|
|
900
|
+
this.applyErrorStyles(this.accountNumberEl);
|
|
901
|
+
}
|
|
902
|
+
else {
|
|
903
|
+
this.applyInputStyles(this.accountNumberEl, this.mergedStyles, 'middle');
|
|
904
|
+
}
|
|
905
|
+
this.updateBankAccountValidation();
|
|
906
|
+
});
|
|
907
|
+
container.appendChild(this.accountNumberEl);
|
|
908
|
+
this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
|
|
909
|
+
Object.assign(this.accountTypeEl.style, {
|
|
910
|
+
flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.flex,
|
|
911
|
+
minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
|
|
912
|
+
});
|
|
913
|
+
this.applyInputStyles(this.accountTypeEl, this.mergedStyles, 'right');
|
|
914
|
+
container.appendChild(this.accountTypeEl);
|
|
915
|
+
}
|
|
775
916
|
}
|
|
776
917
|
updateBankAccountValidation() {
|
|
777
918
|
if (this.bankCountry === 'CA') {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { TokenizerStyling, TokenizerStylingComplete } from './types';
|
|
2
2
|
export declare const DEFAULT_UNIFIED_STYLES: TokenizerStylingComplete;
|
|
3
3
|
export declare function mergeStyles(defaults: TokenizerStylingComplete, userStyles?: TokenizerStyling): TokenizerStylingComplete;
|
|
4
|
+
export declare function getContainerStylesForLayout(baseStyles: TokenizerStylingComplete, layout?: 'single-line' | 'two-line'): TokenizerStylingComplete;
|
package/dist/tokenize/styles.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.DEFAULT_UNIFIED_STYLES = void 0;
|
|
4
4
|
exports.mergeStyles = mergeStyles;
|
|
5
|
+
exports.getContainerStylesForLayout = getContainerStylesForLayout;
|
|
5
6
|
exports.DEFAULT_UNIFIED_STYLES = {
|
|
6
7
|
input: {
|
|
7
8
|
height: '40px',
|
|
@@ -28,6 +29,8 @@ exports.DEFAULT_UNIFIED_STYLES = {
|
|
|
28
29
|
display: 'flex',
|
|
29
30
|
gap: '1rem',
|
|
30
31
|
alignItems: 'center',
|
|
32
|
+
flexWrap: 'nowrap',
|
|
33
|
+
rowGap: '1rem',
|
|
31
34
|
},
|
|
32
35
|
};
|
|
33
36
|
function mergeStyles(defaults, userStyles) {
|
|
@@ -40,3 +43,9 @@ function mergeStyles(defaults, userStyles) {
|
|
|
40
43
|
container: Object.assign(Object.assign({}, defaults.container), userStyles.container),
|
|
41
44
|
};
|
|
42
45
|
}
|
|
46
|
+
function getContainerStylesForLayout(baseStyles, layout = 'single-line') {
|
|
47
|
+
if (layout === 'two-line') {
|
|
48
|
+
return Object.assign(Object.assign({}, baseStyles), { container: Object.assign(Object.assign({}, baseStyles.container), { flexWrap: 'wrap', rowGap: baseStyles.container.rowGap || baseStyles.container.gap }) });
|
|
49
|
+
}
|
|
50
|
+
return baseStyles;
|
|
51
|
+
}
|
package/dist/tokenize/types.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export interface TokenizerContainer {
|
|
|
18
18
|
mode?: PaymentMethodMode;
|
|
19
19
|
bankCountry?: 'US' | 'CA';
|
|
20
20
|
enableTestMode?: boolean;
|
|
21
|
+
layout?: 'single-line' | 'two-line';
|
|
21
22
|
}
|
|
22
23
|
export interface TokenizerStylingComplete {
|
|
23
24
|
input: {
|
|
@@ -48,6 +49,8 @@ export interface TokenizerStylingComplete {
|
|
|
48
49
|
display: string;
|
|
49
50
|
gap: string;
|
|
50
51
|
alignItems: string;
|
|
52
|
+
flexWrap?: string;
|
|
53
|
+
rowGap?: string;
|
|
51
54
|
};
|
|
52
55
|
}
|
|
53
56
|
type DeepPartial<T> = T extends object ? {
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@idonatedev/idonate-sdk",
|
|
3
3
|
"author": "iDonate",
|
|
4
|
-
"version": "1.1.0-
|
|
4
|
+
"version": "1.1.0-dev9",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "iDonate Web SDK",
|
|
7
7
|
"engines": {
|
|
8
|
-
"node": ">=
|
|
8
|
+
"node": ">=18.0.0"
|
|
9
9
|
},
|
|
10
10
|
"main": "dist/index.js",
|
|
11
11
|
"unpkg": "umd/idonate-sdk.js",
|