@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.
Files changed (9) hide show
  1. package/dist/tokenize/CardConnectTokenizer.d.ts +1 -0
  2. package/dist/tokenize/CardConnectTokenizer.js +101 -45
  3. package/dist/tokenize/SpreedlyTokenizer.d.ts +1 -0
  4. package/dist/tokenize/SpreedlyTokenizer.js +270 -129
  5. package/dist/tokenize/styles.d.ts +1 -0
  6. package/dist/tokenize/styles.js +9 -0
  7. package/dist/tokenize/types.d.ts +3 -0
  8. package/package.json +2 -2
  9. package/umd/idonate-sdk.js +1 -1
package/dist/tokenize/CardConnectTokenizer.d.ts CHANGED
@@ -5,6 +5,7 @@ import ConfigHandler from '../config-handler';
5
5
  export declare class CardConnectTokenizer extends Tokenizer {
6
6
  private iframeUrl;
7
7
  private containerId;
8
+ private layout;
8
9
  private iframe;
9
10
  private messageHandler?;
10
11
  private expectedOrigin;
package/dist/tokenize/CardConnectTokenizer.js CHANGED
@@ -20,10 +20,11 @@ const styles_1 = require("./styles");
20
20
  const tokenizer_constants_1 = require("./tokenizer-constants");
21
21
  const tokenizer_utils_1 = require("./tokenizer-utils");
22
22
  class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
23
- constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false) {
23
+ constructor(iframe, iframeUrl, containerId, mode = 'credit_card', enableTestMode = false, layout = 'single-line') {
24
24
  super();
25
25
  this.iframeUrl = iframeUrl;
26
26
  this.containerId = containerId;
27
+ this.layout = layout;
27
28
  this.isReady = false;
28
29
  this.enableTestMode = false;
29
30
  this.mode = mode;
@@ -49,7 +50,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
49
50
  const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
50
51
  const iframeUrl = CardConnectTokenizer.generateIframeUrl(baseUrl, container);
51
52
  const iframe = CardConnectTokenizer.createIframe(iframeUrl, mergedStyles);
52
- const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false);
53
+ const tokenizer = new CardConnectTokenizer(iframe, iframeUrl, container.containerId, container.mode || 'credit_card', container.enableTestMode || false, container.layout || 'single-line');
53
54
  tokenizer.createInternalElements(container);
54
55
  yield tokenizer.init();
55
56
  return tokenizer;
@@ -62,7 +63,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
62
63
  }
63
64
  this.containerEl = containerEl;
64
65
  containerEl.innerHTML = '';
65
- const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
66
+ const mergedStyles = (0, styles_1.getContainerStylesForLayout)((0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling), this.layout);
66
67
  Object.assign(containerEl.style, mergedStyles.container);
67
68
  if (this.mode === 'bank_account') {
68
69
  this.createBankAccountFields(containerEl, mergedStyles);
@@ -73,34 +74,65 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
73
74
  }
74
75
  createCreditCardFields(containerEl, mergedStyles) {
75
76
  this.iframe.style.width = '100%';
76
- this.iframe.style.height = mergedStyles.input.height || '40px';
77
+ const baseHeight = parseInt(mergedStyles.input.height || '40px');
78
+ const gap = parseInt(mergedStyles.container.gap || '12px');
79
+ const iframeHeight = this.layout === 'two-line'
80
+ ? `${baseHeight * 2 + gap}px`
81
+ : mergedStyles.input.height || '40px';
82
+ this.iframe.style.height = iframeHeight;
77
83
  this.iframe.style.border = 'none';
78
84
  this.iframe.style.display = 'block';
79
85
  containerEl.appendChild(this.iframe);
80
86
  }
81
87
  createBankAccountFields(containerEl, mergedStyles) {
82
88
  this.iframe.style.display = 'none';
83
- this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
84
- Object.assign(this.routingNumberEl.style, {
85
- flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
86
- minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
87
- });
88
- this.applyInputStyles(this.routingNumberEl, mergedStyles, 'left');
89
- containerEl.appendChild(this.routingNumberEl);
90
- this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
91
- Object.assign(this.accountNumberEl.style, {
92
- flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
93
- minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
94
- });
95
- this.applyInputStyles(this.accountNumberEl, mergedStyles, 'middle');
96
- containerEl.appendChild(this.accountNumberEl);
97
- this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
98
- Object.assign(this.accountTypeEl.style, {
99
- flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.flex,
100
- minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
101
- });
102
- this.applyInputStyles(this.accountTypeEl, mergedStyles, 'right');
103
- containerEl.appendChild(this.accountTypeEl);
89
+ if (this.layout === 'two-line') {
90
+ this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
91
+ Object.assign(this.accountTypeEl.style, {
92
+ flex: '1',
93
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
94
+ });
95
+ this.applyInputStyles(this.accountTypeEl, mergedStyles, 'left');
96
+ containerEl.appendChild(this.accountTypeEl);
97
+ this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
98
+ Object.assign(this.routingNumberEl.style, {
99
+ flex: '1',
100
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
101
+ });
102
+ this.applyInputStyles(this.routingNumberEl, mergedStyles, 'right');
103
+ containerEl.appendChild(this.routingNumberEl);
104
+ this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
105
+ Object.assign(this.accountNumberEl.style, {
106
+ flex: '1',
107
+ flexBasis: '100%',
108
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
109
+ });
110
+ this.applyInputStyles(this.accountNumberEl, mergedStyles);
111
+ containerEl.appendChild(this.accountNumberEl);
112
+ }
113
+ else {
114
+ this.routingNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-routing`, 'text', 'Routing *', 9);
115
+ Object.assign(this.routingNumberEl.style, {
116
+ flex: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.flex,
117
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.routingNumber.minWidth,
118
+ });
119
+ this.applyInputStyles(this.routingNumberEl, mergedStyles, 'left');
120
+ containerEl.appendChild(this.routingNumberEl);
121
+ this.accountNumberEl = (0, tokenizer_utils_1.createInputElement)(`${this.containerId}-account`, 'text', 'Account Number *', 17);
122
+ Object.assign(this.accountNumberEl.style, {
123
+ flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.flex,
124
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountNumber.minWidth,
125
+ });
126
+ this.applyInputStyles(this.accountNumberEl, mergedStyles, 'middle');
127
+ containerEl.appendChild(this.accountNumberEl);
128
+ this.accountTypeEl = (0, tokenizer_utils_1.createAccountTypeSelect)(`${this.containerId}-account-type`);
129
+ Object.assign(this.accountTypeEl.style, {
130
+ flex: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.flex,
131
+ minWidth: tokenizer_constants_1.BANK_FIELD_FLEX.accountType.minWidth,
132
+ });
133
+ this.applyInputStyles(this.accountTypeEl, mergedStyles, 'right');
134
+ containerEl.appendChild(this.accountTypeEl);
135
+ }
104
136
  }
105
137
  init() {
106
138
  return __awaiter(this, void 0, void 0, function* () {
@@ -512,20 +544,28 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
512
544
  enhancedresponse: 'true',
513
545
  useexpiry: 'true',
514
546
  usecvv: 'true',
515
- orientation: 'horizontal',
516
547
  formatinput: 'true',
517
548
  unique: 'true',
518
549
  norsa: 'true',
519
550
  placeholder: 'Card Number *',
520
- placeholdermonth: 'MM',
521
- placeholderyear: 'YYYY',
522
551
  placeholdercvv: 'CVV',
523
552
  invalidcreditcardevent: 'true',
524
553
  invalidexpiry: 'true',
525
554
  invalidcvv: 'true',
526
555
  });
556
+ if (container.layout === 'two-line') {
557
+ params.set('useexpiryfield', 'true');
558
+ params.set('orientation', 'horizontal');
559
+ params.set('placeholdermonth', 'MM');
560
+ params.set('placeholderyear', 'YYYY');
561
+ }
562
+ else {
563
+ params.set('orientation', 'horizontal');
564
+ params.set('placeholdermonth', 'MM');
565
+ params.set('placeholderyear', 'YYYY');
566
+ }
527
567
  const mergedStyles = (0, styles_1.mergeStyles)(styles_1.DEFAULT_UNIFIED_STYLES, container.styling);
528
- const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles);
568
+ const cssString = CardConnectTokenizer.generateCardConnectCss(mergedStyles, container.layout || 'single-line');
529
569
  const queryPairs = [];
530
570
  params.forEach((value, key) => {
531
571
  queryPairs.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
@@ -558,13 +598,20 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
558
598
  iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
559
599
  return iframe;
560
600
  }
561
- static generateCardConnectCss(styles) {
562
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
601
+ static generateCardConnectCss(styles, layout = 'single-line') {
602
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
563
603
  const css = [];
564
- css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
565
- css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
566
- css.push('label{display:none;}');
567
- css.push('br{display:none;}');
604
+ if (layout === 'two-line') {
605
+ css.push('html,form,body{margin:0;padding:0;}');
606
+ css.push('label{display:none;}');
607
+ css.push('br{display:none;}');
608
+ }
609
+ else {
610
+ css.push('body{margin:0;padding:0;display:flex;align-items:center;}');
611
+ css.push('form{margin:0;padding:0;display:flex;width:100%;align-items:center;}');
612
+ css.push('label{display:none;}');
613
+ css.push('br{display:none;}');
614
+ }
568
615
  const isConnected = styles.container.gap === '0';
569
616
  const gap = isConnected ? '0' : styles.container.gap || '1rem';
570
617
  if (styles.input) {
@@ -588,9 +635,18 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
588
635
  css.push(`input{${baseStyles};}`);
589
636
  css.push(`select{${baseStyles};}`);
590
637
  }
591
- if (isConnected) {
592
- const cardNumStyles = ['width:60%', 'margin:0'];
638
+ if (layout === 'two-line') {
639
+ css.push('input#ccnumfield{width:calc(100% - 2px);margin-bottom:8px;margin-right:2px;}');
640
+ css.push('input#ccexpiryfieldmonth{width:20%;margin-right:4px;margin-top:2px;margin-bottom:0;}');
641
+ css.push('input#ccexpiryfieldyear{width:25%;margin-left:4px;margin-right:8px;margin-top:2px;margin-bottom:0;}');
642
+ css.push('input#cccvvfield{width:calc(100% - 20% - 25% - 30px);margin-top:2px;margin-bottom:0;margin-left:8px;margin-right:2px;}');
593
643
  if ((_a = styles.input) === null || _a === void 0 ? void 0 : _a.borderRadius) {
644
+ css.push(`input{border-radius:${styles.input.borderRadius};}`);
645
+ }
646
+ }
647
+ else if (isConnected) {
648
+ const cardNumStyles = ['width:60%', 'margin:0'];
649
+ if ((_b = styles.input) === null || _b === void 0 ? void 0 : _b.borderRadius) {
594
650
  cardNumStyles.push(`border-radius:${styles.input.borderRadius} 0 0 ${styles.input.borderRadius}`);
595
651
  }
596
652
  cardNumStyles.push('border-right:none');
@@ -600,14 +656,14 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
600
656
  'margin:0',
601
657
  'margin-right:-12px',
602
658
  'border-radius:0',
603
- `border-left:${((_b = styles.input) === null || _b === void 0 ? void 0 : _b.border) || '1px solid #ccc'}`,
659
+ `border-left:${((_c = styles.input) === null || _c === void 0 ? void 0 : _c.border) || '1px solid #ccc'}`,
604
660
  'border-right:none',
605
661
  ];
606
662
  css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
607
663
  const yearStyles = [
608
664
  'width:10%',
609
665
  'border-radius:0',
610
- `border-left:${((_c = styles.input) === null || _c === void 0 ? void 0 : _c.border) || '1px solid #ccc'}`,
666
+ `border-left:${((_d = styles.input) === null || _d === void 0 ? void 0 : _d.border) || '1px solid #ccc'}`,
611
667
  'border-right:none',
612
668
  ];
613
669
  css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
@@ -616,10 +672,10 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
616
672
  'margin:0',
617
673
  'margin-left:-12px',
618
674
  ];
619
- if ((_d = styles.input) === null || _d === void 0 ? void 0 : _d.borderRadius) {
675
+ if ((_e = styles.input) === null || _e === void 0 ? void 0 : _e.borderRadius) {
620
676
  cvvStyles.push(`border-radius:0 ${styles.input.borderRadius} ${styles.input.borderRadius} 0`);
621
677
  }
622
- cvvStyles.push(`border-left:${((_e = styles.input) === null || _e === void 0 ? void 0 : _e.border) || '1px solid #ccc'}`);
678
+ cvvStyles.push(`border-left:${((_f = styles.input) === null || _f === void 0 ? void 0 : _f.border) || '1px solid #ccc'}`);
623
679
  css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
624
680
  }
625
681
  else {
@@ -630,7 +686,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
630
686
  `width:calc(60% - ${gapValue}${gapUnit})`,
631
687
  `margin-right:${gap}`,
632
688
  ];
633
- if ((_f = styles.input) === null || _f === void 0 ? void 0 : _f.borderRadius) {
689
+ if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
634
690
  cardNumStyles.push(`border-radius:${styles.input.borderRadius}`);
635
691
  }
636
692
  css.push(`input#ccnumfield{${cardNumStyles.join(';')};}`);
@@ -638,7 +694,7 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
638
694
  `width:calc(10% - ${halfGapValue}${gapUnit})`,
639
695
  `margin-right:calc(${gap} / 2)`,
640
696
  ];
641
- if ((_g = styles.input) === null || _g === void 0 ? void 0 : _g.borderRadius) {
697
+ if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
642
698
  monthStyles.push(`border-radius:${styles.input.borderRadius}`);
643
699
  }
644
700
  css.push(`select#ccexpirymonth{${monthStyles.join(';')};}`);
@@ -646,12 +702,12 @@ class CardConnectTokenizer extends Tokenizer_1.Tokenizer {
646
702
  `width:calc(10% - ${halfGapValue}${gapUnit})`,
647
703
  `margin-right:${gap}`,
648
704
  ];
649
- if ((_h = styles.input) === null || _h === void 0 ? void 0 : _h.borderRadius) {
705
+ if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
650
706
  yearStyles.push(`border-radius:${styles.input.borderRadius}`);
651
707
  }
652
708
  css.push(`select#ccexpiryyear{${yearStyles.join(';')};}`);
653
709
  const cvvStyles = ['width:20%'];
654
- if ((_j = styles.input) === null || _j === void 0 ? void 0 : _j.borderRadius) {
710
+ if ((_k = styles.input) === null || _k === void 0 ? void 0 : _k.borderRadius) {
655
711
  cvvStyles.push(`border-radius:${styles.input.borderRadius}`);
656
712
  }
657
713
  css.push(`input#cccvvfield{${cvvStyles.join(';')};}`);
package/dist/tokenize/SpreedlyTokenizer.d.ts CHANGED
@@ -5,6 +5,7 @@ import ConfigHandler from '../config-handler';
5
5
  export declare class SpreedlyTokenizer extends Tokenizer {
6
6
  private environmentKey;
7
7
  private containerId;
8
+ private layout;
8
9
  private spreedly;
9
10
  private isReady;
10
11
  private currentValidationState;