@trustpayments/js-payments-card 2.2.933 → 2.2.937
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/components/card/Card.component.d.ts +47 -0
- package/dist/components/card/Card.interface.d.ts +9 -0
- package/dist/components/card/Card.spec.d.ts +4 -0
- package/dist/components/card/CardLogos.const.d.ts +3 -0
- package/dist/components/card/CardProperties.const.d.ts +36 -0
- package/dist/components/card/CardSelectors.const.d.ts +30 -0
- package/dist/components/card/CardType.const.d.ts +18 -0
- package/dist/components/card-wrapper/CardWrapper.d.ts +35 -0
- package/dist/components/card-wrapper/CardWrapper.interface.d.ts +20 -0
- package/dist/components/card-wrapper/CardWrapper.spec.d.ts +4 -0
- package/dist/example.js +1 -1
- package/dist/index.d.ts +3 -58
- package/dist/index.js +1 -1
- package/dist/services/dom-methods/DomMethods.service.d.ts +8 -0
- package/dist/services/dom-methods/DomMethods.service.spec.d.ts +4 -0
- package/dist/services/formatter/Formatter.service.d.ts +15 -0
- package/dist/services/formatter/Formatter.service.spec.d.ts +4 -0
- package/dist/services/translator/Translation.service.spec.d.ts +4 -0
- package/dist/services/translator/Translator.service.d.ts +11 -0
- package/dist/services/utils/Utils.service.d.ts +17 -0
- package/dist/services/utils/Utils.service.spec.d.ts +4 -0
- package/dist/services/validator/Validator.service.d.ts +38 -0
- package/dist/services/validator/Validator.service.spec.d.ts +4 -0
- package/dist/shared/imports/polyfills.d.ts +2 -0
- package/package.json +14 -14
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { BrandDetailsType } from "@trustpayments/ts-iin-lookup/dist/types";
|
|
2
|
+
import { Utils } from "../../services/utils/Utils.service";
|
|
3
|
+
import { IConfig } from "../card-wrapper/CardWrapper.interface";
|
|
4
|
+
export declare class Card extends Utils {
|
|
5
|
+
private static defaultLanguage;
|
|
6
|
+
private static disabledAttribute;
|
|
7
|
+
private static notFlippedCards;
|
|
8
|
+
private static enableInput;
|
|
9
|
+
private animatedCardContainer;
|
|
10
|
+
private cardDetails;
|
|
11
|
+
private cardNumberId;
|
|
12
|
+
private expirationDateId;
|
|
13
|
+
private securityCodeId;
|
|
14
|
+
private securityCodeMessageId;
|
|
15
|
+
private formatter;
|
|
16
|
+
private locale;
|
|
17
|
+
constructor(config: IConfig);
|
|
18
|
+
onCardNumberChanged(cardNumber: string, outsideValue?: boolean): {
|
|
19
|
+
nonformat: string;
|
|
20
|
+
};
|
|
21
|
+
onExpirationDateChanged(expirationDate: string, outsideValue?: boolean): void;
|
|
22
|
+
onSecurityCodeChanged(securityCode: string, outsideValue?: boolean): void;
|
|
23
|
+
onFieldFocusOrBlur(focused: boolean): void;
|
|
24
|
+
flipCard(): void;
|
|
25
|
+
getCardDetails: (value: string) => BrandDetailsType;
|
|
26
|
+
private isAmex;
|
|
27
|
+
private isFlippableCard;
|
|
28
|
+
private returnThemeClass;
|
|
29
|
+
private init;
|
|
30
|
+
private setInputsAndErrors;
|
|
31
|
+
private setCardContent;
|
|
32
|
+
private setCardNumberDetails;
|
|
33
|
+
private addSecurityCodeOnBack;
|
|
34
|
+
private addSecurityCodeOnFront;
|
|
35
|
+
private setSecurityCode;
|
|
36
|
+
private setSecurityCodePlaceholder;
|
|
37
|
+
private toggleLogoClasses;
|
|
38
|
+
private clearThemeClasses;
|
|
39
|
+
private resetTheme;
|
|
40
|
+
private setTheme;
|
|
41
|
+
private setThemeClasses;
|
|
42
|
+
private addLogo;
|
|
43
|
+
private createLogo;
|
|
44
|
+
private getLogoURI;
|
|
45
|
+
private removeLogo;
|
|
46
|
+
private setLogo;
|
|
47
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
declare const CARD_NUMBER_PROPERTIES: {
|
|
2
|
+
ariaLabel: string;
|
|
3
|
+
ariaPlaceholder: string;
|
|
4
|
+
inputmode: string;
|
|
5
|
+
placeholder: string;
|
|
6
|
+
ariaInvalid: string;
|
|
7
|
+
ariaRequired: string;
|
|
8
|
+
autocorrect: string;
|
|
9
|
+
required: string;
|
|
10
|
+
spellcheck: string;
|
|
11
|
+
};
|
|
12
|
+
declare const EXPIRATION_DATE_PROPERTIES: {
|
|
13
|
+
ariaLabel: string;
|
|
14
|
+
ariaPlaceholder: string;
|
|
15
|
+
inputmode: string;
|
|
16
|
+
pattern: string;
|
|
17
|
+
placeholder: string;
|
|
18
|
+
ariaInvalid: string;
|
|
19
|
+
ariaRequired: string;
|
|
20
|
+
autocorrect: string;
|
|
21
|
+
required: string;
|
|
22
|
+
spellcheck: string;
|
|
23
|
+
};
|
|
24
|
+
declare const SECURITY_CODE_PROPERTIES: {
|
|
25
|
+
ariaLabel: string;
|
|
26
|
+
ariaPlaceholder: string;
|
|
27
|
+
inputmode: string;
|
|
28
|
+
pattern: string;
|
|
29
|
+
placeholder: string;
|
|
30
|
+
ariaInvalid: string;
|
|
31
|
+
ariaRequired: string;
|
|
32
|
+
autocorrect: string;
|
|
33
|
+
required: string;
|
|
34
|
+
spellcheck: string;
|
|
35
|
+
};
|
|
36
|
+
export { CARD_NUMBER_PROPERTIES, EXPIRATION_DATE_PROPERTIES, SECURITY_CODE_PROPERTIES };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
declare const CARD_COMPONENT_CLASS = "st-animated-card";
|
|
2
|
+
declare const CARD_SELECTOR_PREFIX = "st-animated-card";
|
|
3
|
+
declare const CARD_CLASSES: {
|
|
4
|
+
CLASS_BACK: string;
|
|
5
|
+
CLASS_FOR_ANIMATION: string;
|
|
6
|
+
CLASS_FRONT: string;
|
|
7
|
+
CLASS_LOGO: string;
|
|
8
|
+
CLASS_LOGO_DEFAULT: string;
|
|
9
|
+
CLASS_LOGO_IMAGE: string;
|
|
10
|
+
CLASS_LOGO_WRAPPER: string;
|
|
11
|
+
CLASS_SECURITY_CODE_HIDDEN: string;
|
|
12
|
+
CLASS_SIDE: string;
|
|
13
|
+
};
|
|
14
|
+
declare const CARD_SELECTORS: {
|
|
15
|
+
ANIMATED_CARD_COMPONENT_FRAME: string;
|
|
16
|
+
ANIMATED_CARD_COMPONENT_NAME: string;
|
|
17
|
+
ANIMATED_CARD_CREDIT_CARD_ID: string;
|
|
18
|
+
ANIMATED_CARD_CREDIT_CARD_LABEL: string;
|
|
19
|
+
ANIMATED_CARD_EXPIRATION_DATE_ID: string;
|
|
20
|
+
ANIMATED_CARD_EXPIRATION_DATE_LABEL: string;
|
|
21
|
+
ANIMATED_CARD_INPUT_SELECTOR: string;
|
|
22
|
+
ANIMATED_CARD_PAYMENT_LOGO_ID: string;
|
|
23
|
+
ANIMATED_CARD_SECURITY_CODE_BACK_ID: string;
|
|
24
|
+
ANIMATED_CARD_SECURITY_CODE_FRONT_FIELD_ID: string;
|
|
25
|
+
ANIMATED_CARD_SECURITY_CODE_FRONT_ID: string;
|
|
26
|
+
ANIMATED_CARD_SECURITY_CODE_LABEL: string;
|
|
27
|
+
ANIMATED_CARD_SIDE_BACK: string;
|
|
28
|
+
ANIMATED_CARD_SIDE_FRONT: string;
|
|
29
|
+
};
|
|
30
|
+
export { CARD_CLASSES, CARD_COMPONENT_CLASS, CARD_SELECTORS, CARD_SELECTOR_PREFIX };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare const CARD_TYPES: {
|
|
2
|
+
AMEX: string;
|
|
3
|
+
DEFAULT: string;
|
|
4
|
+
DINERS: string;
|
|
5
|
+
DISCOVER: string;
|
|
6
|
+
JCB: string;
|
|
7
|
+
MAESTRO: string;
|
|
8
|
+
MASTERCARD: string;
|
|
9
|
+
VISA: string;
|
|
10
|
+
};
|
|
11
|
+
declare const CARD_DETAILS_PLACEHOLDERS: {
|
|
12
|
+
CARD_NUMBER: string;
|
|
13
|
+
EXPIRATION_DATE: string;
|
|
14
|
+
SECURITY_CODE: string;
|
|
15
|
+
SECURITY_CODE_EXTENDED: string;
|
|
16
|
+
TYPE: string;
|
|
17
|
+
};
|
|
18
|
+
export { CARD_TYPES, CARD_DETAILS_PLACEHOLDERS };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import "../card/Card.scss";
|
|
2
|
+
import { IConfig } from "./CardWrapper.interface";
|
|
3
|
+
export declare class CardWrapper {
|
|
4
|
+
private static fourDigitsCard;
|
|
5
|
+
private static matchExactlyFourDigits;
|
|
6
|
+
private static matchExactlyThreeDigits;
|
|
7
|
+
private static securityCodePlaceholder;
|
|
8
|
+
private static securityCodeExtendedPlaceholder;
|
|
9
|
+
private animatedCardTargetContainer;
|
|
10
|
+
private card;
|
|
11
|
+
private cardNumberError;
|
|
12
|
+
private cardNumberInput;
|
|
13
|
+
private expirationDateError;
|
|
14
|
+
private expirationDateInput;
|
|
15
|
+
private securityCodeError;
|
|
16
|
+
private securityCodeInput;
|
|
17
|
+
private validation;
|
|
18
|
+
constructor(config: IConfig);
|
|
19
|
+
onCardNumberChange(value: string, outsideValue: boolean): void;
|
|
20
|
+
onExpirationDateChange(value: string, outsideValue: boolean): void;
|
|
21
|
+
onSecurityCodeChange(value: string, outsideValue: boolean): void;
|
|
22
|
+
onFieldFocusOrBlur(focused: boolean): void;
|
|
23
|
+
onCardNumberInput(id: string, callback: (event: Event) => void): void;
|
|
24
|
+
onExpirationDateInput(id: string, callback: (event: Event) => void): void;
|
|
25
|
+
onSecurityCodeInput(id: string, callback: (event: Event) => void): void;
|
|
26
|
+
private addInputs;
|
|
27
|
+
private addInputErrorLabels;
|
|
28
|
+
private addAnimatedCardContainer;
|
|
29
|
+
private changeSecurityCodePattern;
|
|
30
|
+
private init;
|
|
31
|
+
private setCardConfig;
|
|
32
|
+
private setInputsAndErrorsTargets;
|
|
33
|
+
private setInputsAttributes;
|
|
34
|
+
private isActive;
|
|
35
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
interface IErrorContainers {
|
|
2
|
+
cardNumber: string;
|
|
3
|
+
expirationDate: string;
|
|
4
|
+
securityCode: string;
|
|
5
|
+
}
|
|
6
|
+
interface IInputContainers {
|
|
7
|
+
cardNumber: string;
|
|
8
|
+
expirationDate: string;
|
|
9
|
+
securityCode: string;
|
|
10
|
+
}
|
|
11
|
+
interface IFields {
|
|
12
|
+
inputs: IInputContainers;
|
|
13
|
+
errors: IErrorContainers;
|
|
14
|
+
}
|
|
15
|
+
interface IConfig {
|
|
16
|
+
animatedCardContainer: string;
|
|
17
|
+
fields: IFields;
|
|
18
|
+
locale: string;
|
|
19
|
+
}
|
|
20
|
+
export { IConfig, IErrorContainers, IFields, IInputContainers };
|
package/dist/example.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Card=t():e.Card=t()}(self,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Card=t():e.Card=t()}(self,function(){return function(){"use strict";var e={540:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},1113:function(e){e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},1601:function(e){e.exports=function(e){return e[1]}},5056:function(e,t,r){e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},5072:function(e){var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var i={},a=[],c=0;c<e.length;c++){var s=e[c],u=n.base?s[0]+n.base:s[0],f=i[u]||0,d="".concat(u," ").concat(f);i[u]=f+1;var l=r(d),m={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==l)t[l].references++,t[l].updater(m);else{var p=o(m,n);n.byIndex=c,t.splice(c,0,{identifier:d,updater:p,references:1})}a.push(d)}return a}function o(e,t){var r=t.domAPI(t);r.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,o){var i=n(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var c=r(i[a]);t[c].references--}for(var s=n(e,o),u=0;u<i.length;u++){var f=r(i[u]);0===t[f].references&&(t[f].updater(),t.splice(f,1))}i=s}}},6314:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r}).join("")},t.i=function(e,r,n,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(n)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(a[s]=!0)}for(var u=0;u<e.length;u++){var f=[].concat(e[u]);n&&a[f[0]]||(void 0!==i&&(void 0===f[5]||(f[1]="@layer".concat(f[5].length>0?" ".concat(f[5]):""," {").concat(f[1],"}")),f[5]=i),r&&(f[2]?(f[1]="@media ".concat(f[2]," {").concat(f[1],"}"),f[2]=r):f[2]=r),o&&(f[4]?(f[1]="@supports (".concat(f[4],") {").concat(f[1],"}"),f[4]=o):f[4]="".concat(o)),t.push(f))}},t}},7659:function(e){var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},7825:function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},8199:function(e,t,r){var n=r(1601),o=r.n(n),i=r(6314),a=r.n(i)()(o());a.push([e.id,'body{margin:0;font-size:1.6rem;line-height:1.6rem;color:#333;font-family:"Ubuntu",sans-serif}header{display:flex}@media screen and (max-width: 70rem){header{flex-direction:column;align-items:center;font-size:1.1rem;margin-bottom:2rem}}@-webkit-keyframes autofill{to{background-color:#f8d7da;color:#721c24;border-color:#ff4545}}input:-webkit-autofill.error-field{-webkit-animation-name:autofill;-webkit-animation-fill-mode:both}.merchants-form{margin:70px auto auto auto;max-width:900px}.merchants-form__header{display:flex;justify-content:center}.merchants-form__fields{margin:45px 0 15px 0}.merchants-form__field{display:flex;flex-direction:column;min-height:11rem;justify-content:center}.merchants-form__field--error{background-color:#f8d7da;color:#721c24;border-color:#ff4545}.merchants-form__input{box-sizing:border-box;width:100%;font-size:1.5rem;line-height:1.6rem;color:#333;border:.1rem solid #6d6d6d;border-radius:.4rem;padding:1.1rem .8rem;margin:.8rem 0 .4rem 0}.merchants-form__error{font-size:1.3rem;line-height:1.6rem;color:#ff4545;height:3rem;display:flex;align-items:center;margin-bottom:2rem}',""]),t.A=a}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.nc=void 0;var n={},o=r(5072),i=r.n(o),a=r(7825),c=r.n(a),s=r(7659),u=r.n(s),f=r(5056),d=r.n(f),l=r(540),m=r.n(l),p=r(1113),h=r.n(p),v=r(8199),y={};y.styleTagTransform=h(),y.setAttributes=d(),y.insert=u().bind(null,"head"),y.domAPI=c(),y.insertStyleElement=m();i()(v.A,y),v.A&&v.A.locals&&v.A.locals;return n=n.default}()});
|
package/dist/index.d.ts
CHANGED
|
@@ -1,59 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
expirationDate: string;
|
|
4
|
-
securityCode: string;
|
|
5
|
-
}
|
|
6
|
-
export interface IInputContainers {
|
|
7
|
-
cardNumber: string;
|
|
8
|
-
expirationDate: string;
|
|
9
|
-
securityCode: string;
|
|
10
|
-
}
|
|
11
|
-
export interface IFields {
|
|
12
|
-
inputs: IInputContainers;
|
|
13
|
-
errors: IErrorContainers;
|
|
14
|
-
}
|
|
15
|
-
export interface IConfig {
|
|
16
|
-
animatedCardContainer: string;
|
|
17
|
-
fields: IFields;
|
|
18
|
-
locale: string;
|
|
19
|
-
}
|
|
20
|
-
declare class CardWrapper {
|
|
21
|
-
private static fourDigitsCard;
|
|
22
|
-
private static matchExactlyFourDigits;
|
|
23
|
-
private static matchExactlyThreeDigits;
|
|
24
|
-
private static securityCodePlaceholder;
|
|
25
|
-
private static securityCodeExtendedPlaceholder;
|
|
26
|
-
private animatedCardTargetContainer;
|
|
27
|
-
private card;
|
|
28
|
-
private cardNumberError;
|
|
29
|
-
private cardNumberInput;
|
|
30
|
-
private expirationDateError;
|
|
31
|
-
private expirationDateInput;
|
|
32
|
-
private securityCodeError;
|
|
33
|
-
private securityCodeInput;
|
|
34
|
-
private validation;
|
|
35
|
-
constructor(config: IConfig);
|
|
36
|
-
onCardNumberChange(value: string, outsideValue: boolean): void;
|
|
37
|
-
onExpirationDateChange(value: string, outsideValue: boolean): void;
|
|
38
|
-
onSecurityCodeChange(value: string, outsideValue: boolean): void;
|
|
39
|
-
onFieldFocusOrBlur(focused: boolean): void;
|
|
40
|
-
onCardNumberInput(id: string, callback: (event: Event) => void): void;
|
|
41
|
-
onExpirationDateInput(id: string, callback: (event: Event) => void): void;
|
|
42
|
-
onSecurityCodeInput(id: string, callback: (event: Event) => void): void;
|
|
43
|
-
private addInputs;
|
|
44
|
-
private addInputErrorLabels;
|
|
45
|
-
private addAnimatedCardContainer;
|
|
46
|
-
private changeSecurityCodePattern;
|
|
47
|
-
private init;
|
|
48
|
-
private setCardConfig;
|
|
49
|
-
private setInputsAndErrorsTargets;
|
|
50
|
-
private setInputsAttributes;
|
|
51
|
-
private isActive;
|
|
52
|
-
}
|
|
1
|
+
import { CardWrapper } from "./components/card-wrapper/CardWrapper";
|
|
2
|
+
import { IConfig } from "./components/card-wrapper/CardWrapper.interface";
|
|
53
3
|
declare const _default: (config: IConfig) => CardWrapper;
|
|
54
|
-
|
|
55
|
-
export {
|
|
56
|
-
_default as default,
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export {};
|
|
4
|
+
export default _default;
|