@adyen/adyen-web
Version:
[](https://www.npmjs.com/package/@adyen/adyen-web)
3 lines (2 loc) • 7.74 kB
JavaScript
import{Component as t}from"../../../../external/preact/dist/preact.js";import{getFields as s,validFieldsReducer as e,getErrorReducer as i,getErrorObject as o}from"./SFPUtils.js";import n from"../lib/CSF/initCSF.js";import r from"./SecuredFieldsProviderHandlers.js";import d from"./defaultProps.js";import{ENCRYPTED_PWD_FIELD as a,ENCRYPTED_CARD_NUMBER as h,DEDICATED_CARD_COMPONENTS as l,DATE_POLICY_REQUIRED as p,CVC_POLICY_REQUIRED as c}from"../lib/constants.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";import{getErrorMessageFromCode as m}from"../../../../core/Errors/utils.js";import{SF_ErrorCodes as f}from"../../../../core/Errors/constants.js";import{TxVariants as C}from"../../../tx-variants.js";function y(t,s,e){return s in t?Object.defineProperty(t,s,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[s]=e,t}class F extends t{componentDidMount(){this.props.rootNode&&this.setRootNode(this.props.rootNode);const t=s(this.rootNode),i=t.reduce(e,{});this.setState({valid:i}),t.forEach(t=>{this.numCharsInField[t]=0}),this.numDateFields=t.filter(t=>t.match(/Expiry/)).length,t.length?(this.destroy(),this.initializeCSF(this.rootNode)):(this.props.componentType===C.customCard&&console.debug('You are trying to create a CustomCard component but the element into which you are trying to mount the CustomCard component does not contain any elements with a "data-cse" attribute e.g. <div data-cse="encryptedCardNumber"></div>'),this.handleOnNoDataRequired())}componentDidUpdate(){this.checkForKCPFields(),this.props.onStateUpdate?.(this.state)}componentWillUnmount(){this.csf=null,clearTimeout(this.csfLoadFailTimeout),clearTimeout(this.csfConfigFailTimeout)}initializeCSF(t){let s=this.props.loadingContext;const e={rootNode:t,type:this.props.type,componentType:this.props.componentType,clientKey:this.props.clientKey,cardGroupTypes:this.props.brands,autoFocus:this.props.autoFocus,trimTrailingSeparator:this.props.trimTrailingSeparator,loadingContext:s,keypadFix:this.props.keypadFix,showWarnings:this.props.showWarnings,iframeUIConfig:{sfStyles:this.props.styles},i18n:this.props.i18n,onSubmitAnalytics:this.props.onSubmitAnalytics,callbacks:{onLoad:this.handleOnLoad,onConfigSuccess:this.handleOnConfigSuccess,onFieldValid:this.handleOnFieldValid,onAllValid:this.handleOnAllValid,onBrand:this.handleOnBrand,onError:this.handleOnError,onFocus:this.handleFocus,onBinValue:this.props.onBinValue,onAutoComplete:this.handleOnAutoComplete,onAdditionalSFConfig:this.props.onAdditionalSFConfig,onAdditionalSFRemoved:this.props.onAdditionalSFRemoved,onTouchstartIOS:this.handleOnTouchstartIOS,onKeyPressed:this.handleKeyPressed},isKCP:this.state.hasKoreanFields,legacyInputMode:this.props.legacyInputMode,minimumExpiryDate:this.props.minimumExpiryDate,implementationType:this.props.implementationType||"components",forceCompat:this.props.forceCompat,maskSecurityCode:this.props.maskSecurityCode,exposeExpiryDate:this.props.exposeExpiryDate,shouldDisableIOSArrowKeys:!!this.props.disableIOSArrowKeys,placeholders:this.props.placeholders??{},showContextualElement:this.props.showContextualElement};this.csf=n(e),this.csfLoadFailTimeout=setTimeout(()=>{"ready"!==this.state.status&&(this.setState({status:"csfLoadFailure"}),this.props.onError(new u("ERROR","secured field iframes have failed to load")))},this.csfLoadFailTimeoutMS)}checkForKCPFields(){let t=!1;if(this.props.koreanAuthenticationRequired&&(t=this.issuingCountryCode?"kr"===this.issuingCountryCode:"kr"===this.props.countryCode),this.state.hasKoreanFields&&!t){const t=t=>({data:{...t.data,[a]:void 0},valid:{...t.valid,[a]:!1},errors:{...t.errors,[a]:null},hasKoreanFields:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.removeSecuredField(a),this.csf.setKCPStatus(!1)}if(!this.state.hasKoreanFields&&t){const t=t=>({valid:{...t.valid,[a]:!1},hasKoreanFields:!0,isSfpValid:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.addSecuredField(a),this.csf.setKCPStatus(!0)}}getChildContext(){return{i18n:this.props.i18n}}handleUnsupportedCard(t){const s=!!t.error;return s&&this.setState({detectedUnsupportedBrands:t.detectedBrands}),t.rootNode=this.rootNode,this.handleOnError(t,s),this.csf&&this.csf.hasUnsupportedCard(h,t.error),s}setFocusOn(t){this.csf&&this.csf.setFocusOnFrame(t)}updateStyles(t){this.csf&&this.csf.updateStyles(t)}sfIsOptionalOrHidden(t){return this.csf.sfIsOptionalOrHidden(t)}destroy(){this.csf&&this.csf.destroy()}getRootNode(){return this.rootNode}showValidation(){const{numDateFields:t,state:s}=this;Object.keys(s.valid).reduce(i(t,s),[]).forEach(t=>{const e=o(t,this.rootNode,s);this.handleOnError(e,!!s.detectedUnsupportedBrands),this.csf&&this.csf.isValidated&&this.csf.isValidated(t,e.error)})}mapErrorsToValidationRuleResult(){return Object.keys(this.state.errors).reduce((t,s)=>{const e=this.state.errors[s];return t[s]=e?{isValid:!1,errorMessage:m(e,f),errorI18n:this.props.i18n.get(e),error:e,rootNode:this.rootNode,...this.state.detectedUnsupportedBrands&&{detectedBrands:this.state.detectedUnsupportedBrands}}:null,t},{})}processBinLookupResponse(t,s){if(this.state.detectedUnsupportedBrands&&(this.setState(t=>({errors:{...t.errors,[h]:null},detectedUnsupportedBrands:null})),this.csf&&t)){const t={type:"card",fieldType:"encryptedCardNumber",error:""};this.handleUnsupportedCard(t)}this.issuingCountryCode=t?.issuingCountryCode?.toLowerCase();const e=s?.brand,i=e&&l.includes(s.brand);i&&this.setState(s,()=>{this.props.onChange(this.state)}),this.csf&&this.csf.brandsFromBinLookup(t,i?s:null)}render(t,s){return t.render({setRootNode:this.setRootNode,setFocusOn:this.setFocusOn},s)}constructor(t){super(t),y(this,"csfLoadFailTimeout",void 0),y(this,"csfLoadFailTimeoutMS",void 0),y(this,"csfConfigFailTimeout",void 0),y(this,"csfConfigFailTimeoutMS",void 0),y(this,"numCharsInField",void 0),y(this,"rootNode",void 0),y(this,"numDateFields",void 0),y(this,"csf",void 0),y(this,"handleOnLoad",void 0),y(this,"handleOnConfigSuccess",void 0),y(this,"handleOnFieldValid",void 0),y(this,"handleOnAllValid",void 0),y(this,"handleOnBrand",void 0),y(this,"handleFocus",void 0),y(this,"handleOnError",void 0),y(this,"handleOnAutoComplete",void 0),y(this,"handleOnNoDataRequired",void 0),y(this,"handleOnTouchstartIOS",void 0),y(this,"handleKeyPressed",void 0),y(this,"state",void 0),y(this,"props",void 0),y(this,"issuingCountryCode",void 0),y(this,"setRootNode",t=>{this.rootNode=t});const s={status:"loading",brand:t.type,errors:{},valid:{},data:{},cvcPolicy:c,expiryDatePolicy:p,isSfpValid:!1,hasKoreanFields:t.hasKoreanFields};this.state=s,this.csfLoadFailTimeout=null,this.csfLoadFailTimeoutMS=3e4,this.csfConfigFailTimeout=null,this.csfConfigFailTimeoutMS=15e3,this.numCharsInField={},this.handleOnLoad=r.handleOnLoad.bind(this),this.handleOnConfigSuccess=r.handleOnConfigSuccess.bind(this),this.handleOnFieldValid=r.handleOnFieldValid.bind(this),this.handleOnAllValid=r.handleOnAllValid.bind(this),this.handleOnBrand=r.handleOnBrand.bind(this),this.handleFocus=r.handleFocus.bind(this),this.handleOnError=r.handleOnError.bind(this),this.handleOnNoDataRequired=r.handleOnNoDataRequired.bind(this),this.handleOnAutoComplete=r.handleOnAutoComplete.bind(this),this.handleOnTouchstartIOS=r.handleOnTouchstartIOS.bind(this),this.handleKeyPressed=r.handleKeyPressed.bind(this),this.processBinLookupResponse=this.processBinLookupResponse.bind(this),this.setFocusOn=this.setFocusOn.bind(this),this.updateStyles=this.updateStyles.bind(this),this.handleUnsupportedCard=this.handleUnsupportedCard.bind(this),this.showValidation=this.showValidation.bind(this),this.destroy=this.destroy.bind(this)}}y(F,"defaultProps",d);export{F as default};
//# sourceMappingURL=SecuredFieldsProvider.js.map