vk-payments 0.1.3 → 0.1.4
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/bundles/vk-payments.umd.js +1 -1
- package/bundles/vk-payments.umd.min.js +1 -1
- package/bundles/vk-payments.umd.min.js.map +1 -1
- package/esm2015/lib/go-cuotas/components/go-cuotas.component.js +1 -1
- package/esm5/lib/go-cuotas/components/go-cuotas.component.js +1 -1
- package/fesm2015/vk-payments.js +1 -1
- package/fesm5/vk-payments.js +1 -1
- package/package.json +1 -1
- package/vk-payments.metadata.json +1 -1
|
@@ -3405,7 +3405,7 @@
|
|
|
3405
3405
|
{ type: core.Component, args: [{
|
|
3406
3406
|
selector: 'lib-go-cuotas',
|
|
3407
3407
|
template: "<div *ngIf=\"isLoading\" class=\"loading-overlay\">\n <div class=\"loading-message\">\n <p>{{ loadingMessage }}</p>\n <div *ngIf=\"!paymentCompleted\" class=\"spinner\"></div>\n <div *ngIf=\"paymentCompleted\" class=\"success-icon\">\u2714\uFE0F</div>\n </div>\n</div>\n\n<div *ngIf=\"hasError\" class=\"error-overlay\">\n <div class=\"error-message\">\n <p>{{ error_message }}</p>\n <button (click)=\"restartForm()\">Reintentar</button>\n </div>\n</div>\n\n<form\n (ngSubmit)=\"onSubmit($event)\"\n class=\"gc-payment\"\n id=\"formulario\"\n #f=\"ngForm\"\n autocomplete=\"off\"\n>\n <div class=\"formRow\">\n <label for=\"cardholderName\">Nombre y Apellido impreso en la tarjeta</label>\n <span>\n <input\n id=\"cardholderName\"\n type=\"text\"\n name=\"cardholderName\"\n required\n maxlength=\"22\"\n data-checkout=\"cardholderName\"\n [disabled]=\"disabled\"\n (paste)=\"onPaste()\"\n (input)=\"onPayerNameChange()\"\n [(ngModel)]=\"defaultName\"\n pattern=\"^[a-zA-Z\\s]+$\"\n #cardholderName=\"ngModel\"\n />\n </span>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardholderName.valid && submitted\">\n Ingres\u00E1 el nombre completo que figura en la tarjeta.\n </p>\n </div>\n\n <div class=\"formRow\">\n <div class=\"form-row-2col\">\n\n <!-- Tipo de documento-->\n <div class=\"formRow\">\n <label for=\"docType\">Tipo Doc.</label>\n <div class=\"select-icon\">\n <select id=\"docType\" name=\"docType\" data-checkout=\"docType\" required ngModel [disabled]=\"disabled\"\n [(ngModel)]=\"defaultDocType\" #docType=\"ngModel\">\n <option value=\"\" disabled selected>Sin Seleccionar...</option>\n <option value=\"dni\">DNI</option>\n <option value=\"cuil\">CUIL</option>\n </select> \n </div>\n </div>\n\n <!-- DNI -->\n <div class=\"formRow\">\n <label for=\"docNumber\">N\u00BA de Doc.</label>\n <span>\n <input id=\"docNumber\" type=\"text\" name=\"docNumber\" data-checkout=\"docNumber\" minlength=\"7\" maxlength=\"8\"\n required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onDniChange()\" [(ngModel)]=\"dniText\"\n #docNumber=\"ngModel\" />\n </span>\n </div>\n\n </div>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!docNumber.valid && submitted\">\n Complet\u00E1 el n\u00FAmero de documento.\n </p>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!docType.valid && submitted\">\n Seleccion\u00E1 el tipo de documento.\n </p>\n </div>\n\n <!-- Numero de tarjeta -->\n <div class=\"formRow\">\n <label for=\"cardNumber\">N\u00FAmero de Tarjeta</label>\n <span>\n <input\n id=\"cardNumber\"\n type=\"text\"\n name=\"cardNumber\"\n data-checkout=\"cardNumber\"\n maxlength=\"19\"\n required\n thumbnail\n (input)=\"onCardChange()\"\n (paste)=\"onPaste()\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"cardText\"\n #cardNumber=\"ngModel\"\n />\n </span>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardNumber.valid && submitted\">\n Ingres\u00E1 el n\u00FAmero de tarjeta.\n </p>\n </div>\n\n <div class=\"form-row-3col\">\n <!-- Expiry-month-->\n <div class=\"formRow\">\n <label for=\"cardExpirationMonth\">Mes de expiraci\u00F3n</label>\n <span>\n <input\n id=\"cardExpirationMonth\"\n type=\"text\"\n name=\"cardExpirationMonth\"\n placeholder=\"MM\"\n minlength=\"2\"\n maxlength=\"2\"\n data-checkout=\"cardExpirationMonth\"\n required\n [disabled]=\"disabled\"\n (paste)=\"onPaste()\"\n (input)=\"onMonthChange()\"\n (focusout)=\"onMonthLostFocus()\"\n [(ngModel)]=\"monthText\"\n #cardExpirationMonth=\"ngModel\"\n />\n </span>\n </div>\n\n <!-- Expiry-year-->\n <div class=\"formRow\">\n <label for=\"cardExpirationYear\">A\u00F1o de expiraci\u00F3n</label>\n <span>\n <input\n id=\"cardExpirationYear\"\n type=\"text\"\n name=\"cardExpirationYear\"\n placeholder=\"AA\"\n minlength=\"2\"\n maxlength=\"2\"\n data-checkout=\"cardExpirationYear\"\n required\n [disabled]=\"disabled\"\n (paste)=\"onPaste()\"\n (input)=\"onYearChange()\"\n [(ngModel)]=\"yearText\"\n #cardExpirationYear=\"ngModel\"\n />\n </span>\n </div>\n\n <!-- CVC -->\n <div class=\"formRow\">\n <label for=\"securityCode\">C\u00F3digo de seguridad</label>\n <span>\n <input\n id=\"securityCode\"\n type=\"text\"\n name=\"securityCode\"\n placeholder=\"CSC\"\n minlength=\"3\"\n maxlength=\"4\"\n data-checkout=\"securityCode\"\n required\n [disabled]=\"disabled\"\n (paste)=\"onPaste()\"\n (input)=\"onCodeChange()\"\n [(ngModel)]=\"cvcText\"\n #securityCode=\"ngModel\"\n />\n </span>\n </div>\n </div>\n\n <div>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardExpirationMonth.valid && submitted\">\n Complet\u00E1 el mes de vencimiento.\n </p>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!cardExpirationYear.valid && submitted\">\n Complet\u00E1 el a\u00F1o de vencimiento.\n </p>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!securityCode.valid && submitted\">\n Ingres\u00E1 el c\u00F3digo de seguridad.\n </p>\n </div>\n\n <!--Cantidad de cuotas-->\n <div class=\"formRow\">\n <label for=\"installments\">Cuotas</label>\n <div class=\"select-icon\">\n <select id=\"installments\" name=\"installments\" aria-required=\"true\" required ngModel\n [(ngModel)]=\"installments\" (change)=\"onInstallmentsChange()\" [disabled]=\"disabled\" #inst=\"ngModel\">\n <option value=\"0\" disabled selected>Sin Seleccionar...</option>\n <option *ngFor=\"let current of currentInstallments\" [value]=\"current.value\">\n {{ current.label }}\n </option>\n </select>\n </div>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!inst.valid && submitted\">\n Eleg\u00ED la cantidad de cuotas.\n </p>\n </div>\n\n <div class=\"formRow\">\n <div class=\"form-row-3col\">\n\n <!-- Correo electr\u00F3nico -->\n <div class=\"formRow\">\n <label for=\"mail\">Correo electr\u00F3nico</label>\n <span>\n <input id=\"mail\" type=\"text\" name=\"mail\" data-checkout=\"mail\" pattern=\"^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\"\n required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onMailChange()\" [(ngModel)]=\"mailText\"\n #mail=\"ngModel\"/>\n </span>\n </div>\n\n <!-- C\u00F3digo de \u00E1rea -->\n <div class=\"formRow\">\n <label for=\"codArea\">Cod. \u00C1rea</label>\n <span>\n <input id=\"codArea\" type=\"text\" name=\"codArea\" data-checkout=\"codArea\" minlength=\"2\" maxlength=\"4\"\n required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onCodAreaChange()\" [(ngModel)]=\"codAreaText\"\n #codArea=\"ngModel\" />\n </span>\n </div>\n\n <!-- Tel\u00E9fono -->\n <div class=\"formRow\">\n <label for=\"tel\">Tel\u00E9fono</label>\n <span>\n <input id=\"tel\" type=\"text\" name=\"tel\" data-checkout=\"tel\" minlength=\"6\" maxlength=\"8\"\n required [disabled]=\"disabled\" (paste)=\"onPaste()\" (input)=\"onTelChange()\" [(ngModel)]=\"telText\"\n #tel=\"ngModel\" />\n </span>\n </div>\n\n </div>\n </div>\n\n <div>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!mail.valid && submitted\">\n Complet\u00E1 el correo electr\u00F3nico.\n </p>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!codArea.valid && submitted\">\n Complet\u00E1 el c\u00F3digo de \u00E1rea.\n </p>\n <p [hidden]=\"disabled\" class=\"alert-text\" *ngIf=\"!tel.valid && submitted\">\n Ingres\u00E1 el tel\u00E9fono.\n </p>\n </div>\n\n <button type=\"submit\">Pagar ${{ totalAmount }}</button>\n</form>\n\n<div class=\"logo\">\n <img [src]=\"logoGC\" alt=\"Go Cuotas\" class=\"responsive-img\" style=\"width: 150px;\">\n</div>\n\n<lib-modal (codeVerified)=\"onCodeSent($event)\"></lib-modal>",
|
|
3408
|
-
styles: ["@charset \"UTF-8\";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:\"\uE5CF\";font-family:\"Material Icons\";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}"]
|
|
3408
|
+
styles: ["@charset \"UTF-8\";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:\"\uE5CF\";font-family:\"Material Icons\";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}"]
|
|
3409
3409
|
}] }
|
|
3410
3410
|
];
|
|
3411
3411
|
/** @nocollapse */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/router"),require("@angular/common/http"),require("sha256"),require("@angular/material/snack-bar"),require("@angular/material")):"function"==typeof define&&define.amd?define("vk-payments",["exports","@angular/core","@angular/common","@angular/forms","@angular/router","@angular/common/http","sha256","@angular/material/snack-bar","@angular/material"],t):t((e=e||self)["vk-payments"]={},e.ng.core,e.ng.common,e.ng.forms,e.ng.router,e.ng.common.http,e.sha256,e.ng.material["snack-bar"],e.ng.material)}(this,function(e,t,n,r,i,a,o,s,d){"use strict";o=o&&o.hasOwnProperty("default")?o.default:o;function c(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}var l=function(){function e(e){this.httpClient=e}return e.prototype.makePayment=function(e,t,n){return this._setAuthHeaders(t),this.httpClient.post(this.normalizeUrl(n)+"/Payment",e,{headers:this.authHeaders})},e.prototype.getMercadoPagoPromotions=function(e){return this.httpClient.get(e)},e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var p=function(){function e(e,n){this.router=e,this.mercadopagoApiService=n,this.paymentState="unsubmitted",this.tokenId="",this.disabled=!1,this.addScript=!1,this.requiredIssuer=!1,this.submitted=!1,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.statusPay=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.initMercadoPago()},e.prototype.ngOnChanges=function(e){e.paymentAmount.isFirstChange()||(this.disabled=!1,this.checkOutForm.reset())},e.prototype.initMercadoPago=function(){var e=this;this.addMercadopagoScript().then(function(){Mercadopago.setPublishableKey(e.publishableKey),Mercadopago.getIdentificationTypes(),e.totalAmount=e.paymentAmount,e.defaultName=e.payerName,e.defaultDocType="DNI"})},e.prototype.addMercadopagoScript=function(){return this.addScript=!0,new Promise(function(e,t){var n=document.createElement("script");n.src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js?2345",n.onload=e,document.body.appendChild(n)})},e.prototype.createToken=function(e){var t=this;this.paymentState="processing",Mercadopago.createToken(e,function(e,n){200!==e&&201!==e?(t.paymentState="error",t.statusPay.emit(t.paymentResult),t.errorMessage="Revisa los datos del formulario."):(t.tokenId=n.id,t.makePayment())})},e.prototype.makePayment=function(){var e=this.hashText(this.cardText,1e5);this.cardPayment={tokenId:this.tokenId,transactionAmount:this.totalAmount,description:this.description,installments:Number(this.checkOutForm.value.installments),issuerId:this.checkOutForm.value.issuer,paymentMethodId:this.currentPaymentMethod[0].id,codCP:this.idVen,docNumber:this.checkOutForm.value.docNumber,additionalData:this.data,storeId:this.storeId,hash:e},this.mercadoPagoPayment()},e.prototype.hashText=function(e,t){for(var n=e,r=0;r<t;r++)n=o(n);return n},e.prototype.paymentResponseHandler=function(e){e.success?(this.paymentState=e.data.statusDetails,this.ticket=e.data.transactionId,this.paymentResult={success:!0,paymentId:this.ticket,integrator:"MP"},this.statusPay.emit(this.paymentResult),this.disabled=!0,this.logger("paymentResponseHandler:",e),this.successUrl&&this.successUrl.length>0&&this.router.navigate([""+this.successUrl])):(this.paymentState="apiError",this.statusPay.emit(this.paymentResult),this.successUrl&&this.failureUrl.length>0&&this.router.navigate([""+this.failureUrl]).then())},e.prototype.checkPaymentMethod=function(){if(null!=this.checkOutForm.value.cardNumber){if(this.currentInstallments=null,this.currentIssuers=null,this.checkOutForm.value.cardNumber.toString().length>=6){this.currentBin=this.checkOutForm.value.cardNumber.toString().substring(0,6);var e=this;Mercadopago.getPaymentMethod({bin:this.checkOutForm.value.cardNumber.toString()},function(t,n){200===t&&e.setCurrentMethod(n)})}this.checkOutForm.value.cardNumber.toString().length<6&&(this.requiredIssuer=!1)}},e.prototype.setCurrentMethod=function(e){if(e){this.logger("setCurrentMethod:",e);var t=e[0].additional_info_needed;null==t.find(function(e){return"issuer_id"==e})?this.requiredIssuer=!1:this.requiredIssuer=!0,this.logger("requiredIssuer:",this.requiredIssuer),this.currentPaymentMethod=e;var n=this;Mercadopago.getIssuers(e[0].id,function(e,t){200===e&&n.setIssuers(t)}),n.checkInstallments(this.requiredIssuer)}},e.prototype.checkInstallments=function(e){if(!(null==this.currentBin||this.currentBin.length<6)){var t,n=this;n.currentInstallments=null,t=e?{bin:this.currentBin,amount:this.totalAmount,issuer_id:this.issuerId}:{bin:this.currentBin,amount:this.totalAmount},Mercadopago.getInstallments(t,function(e,t){200===e?n.setInstallments(t):n.currentInstallments=null})}},e.prototype.setInstallments=function(e){var t=this;if(e.length>0)if(null!=this.issuerId&&e.length>1&&this.currentPaymentMethod.length>0){var n=e.filter(function(e){return e.issuer.id===t.issuerId&&e.payment_method_id===t.currentPaymentMethod[0].id});this.currentInstallments=n[0].payer_costs,this.issuerId=n[0].issuer.id}else this.currentInstallments=e[0].payer_costs,this.issuerId=e[0].issuer.id},e.prototype.setIssuers=function(e){this.currentIssuers=e},e.prototype.onDuesSelection=function(e){var t,n,r,i;try{for(var a=c(this.currentInstallments),o=a.next();!o.done;o=a.next()){var s=o.value;if(s.installments===Number(e.value.installments)){this.totalFinancedAmount=s.total_amount;try{for(var d=(r=void 0,c(s.labels)),l=d.next();!l.done;l=d.next()){var p=l.value;p.includes("CFT")&&(this.recommendedLabel=p.replace(/_/g,": ").split("|",2),this.currentTEA=this.recommendedLabel[1],this.currentCFT=this.recommendedLabel[0])}}catch(e){r={error:e}}finally{try{l&&!l.done&&(i=d.return)&&i.call(d)}finally{if(r)throw r.error}}}}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(t)throw t.error}}},e.prototype.onSubmit=function(e){if(this.submitted=!0,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.checkOutForm.valid){var t={cardNumber:this.cardText,securityCode:this.cvcText,cardExpirationMonth:this.monthText,cardExpirationYear:this.yearText,cardholderName:this.defaultName,docType:this.defaultDocType,docNumber:this.dniText};this.debugLog&&console.log("sendForm",t),""!==this.tokenId&&Mercadopago.clearSession(),this.createToken(t)}},e.prototype.onYearChange=function(){var e=this;isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"==this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.defaultName)||setTimeout(function(){e.defaultName=""})},e.prototype.onCardChange=function(){var e=this;isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""})},e.prototype.onPaste=function(){return!1},e.prototype.logger=function(e,t){this.debugLog&&console.log(e,JSON.stringify(t))},e.prototype.mercadoPagoPayment=function(){var e=this;this.mercadopagoApiService.makePayment(this.cardPayment,this.accessToken,this.vkUrlApi).subscribe(function(t){e.paymentResponseHandler(t)},function(t){e.statusPay.emit(e.paymentResult),e.paymentState="apiError",console.log(t)})},e.prototype.resetForm=function(){this.disabled=!1,this.totalAmount,this.totalFinancedAmount=void 0,this.currentBin=void 0,this.recommendedLabel=void 0,this.currentTEA=void 0,this.currentCFT=void 0,this.ticket=void 0,this.defaultName=void 0,this.defaultDocType=void 0,this.issuerId=void 0,this.currentPaymentMethod=void 0,this.currentIssuers=null,this.currentInstallments=null,this.cardPayment=void 0,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.monthText=void 0,this.yearText=void 0,this.cvcText=void 0,this.dniText=void 0,this.cardText=void 0,this.requiredIssuer=!1,this.submitted=!1,this.addScript=!1,this.paymentState="unsubmitted",this.payerName=void 0,this.tokenId="",this.errorMessage=void 0,this.checkOutForm.reset(),this.initMercadoPago()},e.decorators=[{type:t.Component,args:[{selector:"mp-form-pay",template:'<form (ngSubmit)="onSubmit(f)" class="mp-payment" #f="ngForm" autocomplete="off">\r\n \x3c!-- Titular --\x3e\r\n <div class="formRow">\r\n <label for="cardholderName">Nombre y Apellido</label>\r\n <span>\r\n <input id="cardholderName" type="text" name="cardholderName" required maxlength="22"\r\n data-checkout="cardholderName" [disabled]="disabled" (paste)="onPaste()" (input)="onPayerNameChange()"\r\n [(ngModel)]="defaultName" #cardholderName="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardholderName.valid && submitted">\r\n Ingresá el nombre completo que figura en la tarjeta.\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Numero de tarjeta --\x3e\r\n <div class="formRow">\r\n <label for="cardNumber">Nº de Tarjeta</label>\r\n <span>\r\n <input id="cardNumber" type="text" name="cardNumber" data-checkout="cardNumber" maxlength="19" required thumbnail\r\n [disabled]="disabled" (input)="onCardChange()" (keyup)="checkPaymentMethod()" \r\n (paste)="onPaste()" [(ngModel)]="cardText" #cardNumber="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardNumber.valid && submitted">\r\n Ingresá el número de tarjeta.\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Emisor--\x3e\r\n <div class="formRow">\r\n <label for="issuer">Emisor</label>\r\n <div class="select-icon">\r\n <select id="issuer" name="issuer" required [disabled]="!requiredIssuer || disabled" [(ngModel)]="issuerId"\r\n #issuer="ngModel" (change)="checkInstallments(true)">\r\n <option *ngFor="let iss of currentIssuers" value="{{ iss.id }}">\r\n {{ iss.name }}\r\n </option>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="!issuer.valid && requiredIssuer && submitted">Seleccioná el emisor de la tarjeta.</p>\r\n </div>\r\n\r\n <div class="form-row-3col">\r\n \x3c!-- Expiry-month--\x3e\r\n <div class="formRow">\r\n <label for="cardExpirationMonth">Mes</label>\r\n <span>\r\n <input id="cardExpirationMonth" type="text" name="cardExpirationMonth" placeholder="MM" minlength="2"\r\n maxlength="2" data-checkout="cardExpirationMonth" required [disabled]="disabled" (paste)="onPaste()"\r\n (input)="onMonthChange()" (focusout)="onMonthLostFocus()" [(ngModel)]="monthText"\r\n #cardExpirationMonth="ngModel" />\r\n </span>\r\n </div>\r\n\r\n \x3c!-- Expiry-year--\x3e\r\n <div class="formRow">\r\n <label for="cardExpirationYear">Año</label>\r\n <span>\r\n <input id="cardExpirationYear" type="text" name="cardExpirationYear" placeholder="AAAA" minlength="4"\r\n maxlength="4" data-checkout="cardExpirationYear" required [disabled]="disabled" (paste)="onPaste()"\r\n (input)="onYearChange()" [(ngModel)]="yearText" #cardExpirationYear="ngModel" />\r\n </span>\r\n </div>\r\n\r\n \x3c!-- CVC --\x3e\r\n <div class="formRow">\r\n <label for="securityCode">CVC</label>\r\n <span>\r\n <input id="securityCode" type="text" name="securityCode" placeholder="CVC" minlength="3" maxlength="4"\r\n data-checkout="securityCode" required [disabled]="disabled" (paste)="onPaste()" (input)="onCodeChange()"\r\n [(ngModel)]="cvcText" #securityCode="ngModel" />\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationMonth.valid && submitted">\r\n Completá el mes de vencimiento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationYear.valid && submitted">\r\n Completá el año de vencimiento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!securityCode.valid && submitted">\r\n Ingresá el código de seguridad.\r\n </p>\r\n </div>\r\n\r\n <div class="formRow">\r\n <div class="form-row-2col">\r\n\r\n \x3c!-- Tipo de documento--\x3e\r\n <div class="formRow">\r\n <label for="docType">Tipo de Doc.</label>\r\n <div class="select-icon">\r\n <select id="docType" name="docType" data-checkout="docType" required ngModel [disabled]="disabled"\r\n [(ngModel)]="defaultDocType" #docType="ngModel">\r\n </select>\r\n </div>\r\n </div>\r\n\r\n \x3c!-- DNI --\x3e\r\n <div class="formRow">\r\n <label for="docNumber">Nº de Doc.</label>\r\n <span>\r\n <input id="docNumber" type="text" name="docNumber" data-checkout="docNumber" minlength="7" maxlength="8"\r\n required [disabled]="disabled" (paste)="onPaste()" (input)="onDniChange()" [(ngModel)]="dniText"\r\n #docNumber="ngModel" />\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!docNumber.valid && submitted">\r\n Completá el número de documento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!docType.valid && submitted">\r\n Seleccioná el tipo de documento.\r\n </p>\r\n </div>\r\n\r\n \x3c!--Cantidad de cuotas--\x3e\r\n <div class="formRow">\r\n <label for="installments">Cantidad de Cuotas</label>\r\n <div class="select-icon">\r\n <select id="installments" name="installments" aria-required="true" aria-invalid="false" required ngModel\r\n [disabled]="disabled" (change)="onDuesSelection(f)" #installments="ngModel">\r\n <option *ngFor="let current of currentInstallments " value="{{ current.installments }}">\r\n {{ current.recommended_message }}\r\n </option>\r\n </select>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!installments.valid && submitted">\r\n Elegí la cantidad de cuotas.\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <div class="amount-resume" *ngIf="f.valid">\r\n <p>Total al contado</p>\r\n <h1>$ {{ totalAmount | number:\'2.2-2\' }}</h1>\r\n <p>Total financiado</p>\r\n <h3>$ {{ totalFinancedAmount | number:\'2.2-2\' }}</h3>\r\n <p>{{ currentTEA }}</p>\r\n <p>{{ currentCFT }}</p>\r\n <div *ngIf="paymentState === \'unsubmitted\'\r\n || paymentState.substring(0, 11) === \'cc_rejected\'\r\n || paymentState === \'error\'">\r\n <button type="submit" (click)="onSubmit(f)">\r\n Pagar $ {{ totalFinancedAmount | number:\'2.2-2\' }}\r\n </button>\r\n </div>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!f.valid">Completá los campos faltantes.</p>\r\n <div *ngIf="!f.valid">\r\n <div *ngIf="paymentState !== \'accredited\' &&\r\n paymentState !== \'pending_contingency\' &&\r\n paymentState !== \'pending_review_manual\'">\r\n <button type="submit" (click)="onSubmit(f)">\r\n Pagar $ {{ paymentAmount | number:\'2.2-2\' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<div class="logo">\r\n <img [src]="imgMercadoPago" alt="Mercado Pago" class="responsive-img" style="width: 150px;">\r\n</div>\r\n\r\n\x3c!--IFs--\x3e\r\n<div>\r\n <div class="pay-message info" *ngIf="paymentState === \'processing\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Procesando pago...\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message success" *ngIf="paymentState === \'accredited\'">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Tu pago se ha confirmado!\r\n <br>\r\n Estos son los datos de la transacción:\r\n </p>\r\n <i class="data">Ticket: {{ ticket }}</i>\r\n </div>\r\n\r\n <div class="pay-message info" *ngIf="paymentState === \'pending_contingency\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Estamos procesando el pago.\r\n <br>\r\n En menos de una hora te enviaremos por e-mail el resultado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message info" *ngIf="paymentState === \'pending_review_manual\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Estamos procesando el pago.\r\n <br>\r\n En menos de 2 días hábiles te diremos por e-mail si se acreditó o si necesitamos más información.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_card_number\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa el número de tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_date\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa la fecha de vencimiento.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_other\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa los datos ingresados.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_security_code\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa el código de seguridad.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_blacklist\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No pudimos procesar tu pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_call_for_authorize\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Debes autorizar el pago. El teléfono está al dorso de tu tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_card_disabled\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Llama para activar tu tarjeta. El teléfono está al dorso de tu tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_card_error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No pudimos procesar tu pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_duplicated_payment\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado, ya hiciste un pago por ese valor.\r\n <br>\r\n Si necesitas volver a pagar usa otra tarjeta u otro medio de pago..\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_high_risk\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Tu pago fue rechazado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_insufficient_amount\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_invalid_installments\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No se pudo pocesar el pago en esa cantidad de cuotas.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_max_attempts\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado! Límite de intentos permitidos.\r\n <br>\r\n Elige otra tarjeta u otro medio de pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_other_reason\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No se procesó el pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{ errorMessage }}\r\n <br>No se procesó el pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'apiError\'">\r\n <i class="material-icons">error</i>\r\n <p>Error al procesar el pago (Vitnik).</p>\r\n </div>\r\n\r\n <button *ngIf="paymentState != \'pending_review_manual\' && paymentState != \'pending_contingency\'\r\n && paymentState != \'accredited\' && paymentState != \'processing\' && paymentState != \'unsubmitted\'" (click)="resetForm()">\r\n Limpiar formulario\r\n </button>\r\n\r\n</div>\r\n',styles:['@charset "UTF-8";.mp-payment{background-color:transparent;font-family:inherit,sans-serif}.mp-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}.warn-text{font-size:15px;color:#c62626;margin:10px 0;text-align:center}.confirm-text{font-size:15px;color:#388a22;margin:10px 0;text-align:center}.in-progress-text{font-size:15px;color:#009ee3;margin:10px 0;text-align:center}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase}.pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.pay-message i.data{font-size:.9rem;text-align:center}.pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.success{background-color:#dff2bf;color:#4f8a10}.error{color:#d8000c;background-color:#ffd2d2}.info{color:#00529b;background-color:#bde5f8}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}.responsive-img{width:100%;height:auto}']}]}],e.ctorParameters=function(){return[{type:i.Router},{type:l}]},e.propDecorators={paymentAmount:[{type:t.Input}],payerName:[{type:t.Input}],payerEmail:[{type:t.Input}],accessToken:[{type:t.Input}],vkUrlApi:[{type:t.Input}],description:[{type:t.Input}],publishableKey:[{type:t.Input}],successUrl:[{type:t.Input}],failureUrl:[{type:t.Input}],imgCreditCards:[{type:t.Input}],imgMercadoPago:[{type:t.Input}],iconExpandMore:[{type:t.Input}],debugLog:[{type:t.Input}],storeId:[{type:t.Input}],idVen:[{type:t.Input}],data:[{type:t.Input}],statusPay:[{type:t.Output}],checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}]},e}();var u=function(){function e(e){this.mercadoPagoService=e}return e.prototype.ngOnInit=function(){var e=this;this.mercadoPagoService.getMercadoPagoPromotions(this.url).subscribe(function(t){return e.cardPromotions=t})},e.decorators=[{type:t.Component,args:[{selector:"mp-promotion",template:'<div *ngIf="contentSource === \'api\'" class="payments summary">\r\n <div id="promoBancos" class="promoBancos">\r\n\r\n <div *ngFor="let promo of cardPromotions | slice:2" name="promociones" class="bank-block col-md-4 col-sm-4">\r\n <div class="banklogoContainer">\r\n <img class="img-regular img-responsive" [src]="promo.payment_methods[0].secure_thumbnail">\r\n </div>\r\n <p>\r\n <span class="issuer">{{promo.issuer.name}}</span>\r\n </p>\r\n <p>\r\n <span class="installments">{{promo.max_installments}} cuotas sin interés</span>\r\n </p>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<iframe src="https://www.mercadopago.com.ar/cuotas?iframe=true"\r\n width="100%"\r\n height="450px"\r\n scrolling="yes"\r\n frameborder="0"\r\n style="position: relative;"\r\n *ngIf="contentSource === \'iframe\'">\r\n</iframe>\r\n',styles:[""]}]}],e.ctorParameters=function(){return[{type:l}]},e.propDecorators={url:[{type:t.Input}],contentSource:[{type:t.Input}]},e}();var m=[p,u],h=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:m,exports:m,imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.RouterModule]}]}],e}(),g=function(){function e(){this.addScript=!1,this.showError=!1,this.loading=!0,this.status="",this.linkToPay="",this.linkExecutePay=""}return e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewChecked=function(){var e=this;this.addScript||this.addPaypalScript().then(function(){var t={style:{color:"blue",shape:"pill",label:"pay",height:40},commit:!0,createOrder:function(e,t){return t.order.create({purchase_units:[{amount:{value:document.getElementById("amount").value},reference_id:"'"+document.getElementById("transactionId").value+"'",custom_id:"'"+document.getElementById("storeId").value+"'"}],application_context:{shipping_preference:"NO_SHIPPING"}})},onApprove:function(e,t){return t.order.capture().then(function(e){e.data=document.getElementById("data").value,e.userid=document.getElementById("userId").value,fetch(document.getElementById("vkUrlApi").value,{method:"post",headers:{"content-type":"application/json",Authorization:"Bearer "+document.getElementById("accessToken").value},body:JSON.stringify({details:e})}).then(function(e){console.log("response-> api",e)}).then(function(){window.location.href=document.getElementById("successUrl").value})})},onError:function(e){window.location.reload()},onCancel:function(e,t){window.location.href=document.getElementById("cancelUrl").value}};paypal.Buttons(t).render("#paypal-button-container"),e.loading=!1})},e.prototype.addPaypalScript=function(){var e=this;return this.addScript=!0,new Promise(function(t,n){var r=document.createElement("script");r.src="https://www.paypal.com/sdk/js?client-id="+e.clientId+"¤cy="+e.currency,r.onload=t,document.body.appendChild(r)})},e.decorators=[{type:t.Component,args:[{selector:"paypal-new-form-pay",template:'<div *ngIf="loading">Loading...</div>\r\n<input type="hidden" id="amount" [(ngModel)]="amount">\r\n<input type="hidden" id="userId" [(ngModel)]="userId">\r\n<input type="hidden" id="storeId" [(ngModel)]="storeId">\r\n<input type="hidden" id="successUrl" [(ngModel)]="successUrl">\r\n<input type="hidden" id="cancelUrl" [(ngModel)]="cancelUrl">\r\n<input type="hidden" id="vkUrlApi" [(ngModel)]="vkUrlApi">\r\n<input type="hidden" id="transactionId" [(ngModel)]="transactionId">\r\n<input type="hidden" id="data" [(ngModel)]="data">\r\n<input type="hidden" id="accessToken" [(ngModel)]="accessToken">\r\n<div id="paypal-button-container"></div>\r\n',styles:["label{font-size:11px;color:#888;text-transform:uppercase;font-weight:500}.flex-row-wrap{display:flex;flex-flow:row wrap;flex-direction:row;justify-content:space-between;align-items:center}.flex-row-wrap div{margin:10px;width:200px;flex-grow:1}:focus{outline:0}.formRow{margin-top:10px;margin-bottom:10px}.formRow span{background-color:#fff;border:.5px solid #707070;border-radius:5px;padding:5px 10px;display:block;margin-top:7px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:13px;height:23px;width:100%;text-transform:uppercase}select{width:100%;font-size:13px;height:36px;padding:5px 10px;background-color:#fff;border:.5px solid #707070;border-radius:5px;display:block;margin-top:7px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}.warn-text{font-size:15px;color:#c62626;margin:10px 0;text-align:center}.confirm-text{font-size:15px;color:#8cd876;margin:10px 0;text-align:center}.in-progress-text{font-size:15px;color:#009ee3;margin:10px 0;text-align:center}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={accessToken:[{type:t.Input}],clientId:[{type:t.Input}],vkUrlApi:[{type:t.Input}],storeId:[{type:t.Input}],userId:[{type:t.Input}],transactionId:[{type:t.Input}],amount:[{type:t.Input}],currency:[{type:t.Input}],cancelUrl:[{type:t.Input}],successUrl:[{type:t.Input}],data:[{type:t.Input}],urlSignout:[{type:t.Input}]},e}();var f=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,a.HttpClientModule,i.RouterModule],declarations:[g],exports:[g]}]}],e}(),b=function(){function e(e){this.httpClient=e}return e.prototype.makePayment=function(e,t,n){return this._setAuthHeaders(t),this.httpClient.post(this.normalizeUrl(n)+"/Payment",e,{headers:this.authHeaders})},e.prototype.getDecidirConfigByBin=function(e,t){return this.httpClient.get(this.normalizeUrl(t)+"/GetDecidirConfigByBin?bin="+e)},e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype.getCreditCards=function(e,t,n){return this._setAuthHeaders(e),this.httpClient.get(this.normalizeUrl(t)+"/GetCreditCardsEnable?domainId="+n,{headers:this.authHeaders})},e.prototype.getPlansByCreditCardId=function(e,t,n,r,i,a){this._setAuthHeaders(e);var o={amount:n,creditCardId:r,domainId:i,bin:a};return this.httpClient.post(this.normalizeUrl(t)+"/CalculateAmountInInstallments",o,{headers:this.authHeaders})},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var y=function(){function e(e,n){this.router=e,this.spsDecidirApiService=n,this.language="es",this.statusPay=new t.EventEmitter,this.disabled=!1,this.disableSelect=!1,this.selectCreditCardPlan=null,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.submitPressed=!1,this.invalidDate=!1,this.addScript=!0,this.paymentState="unsubmitted",this.issuer=null}return e.prototype.ngOnInit=function(){this.initDecidir()},e.prototype.ngOnChanges=function(e){e.paymentAmount.isFirstChange()||(this.checkOutForm.reset(),this.disabled=!1,this.disableSelect=!1)},e.prototype.initDecidir=function(){var e=this;this.addDecidirScript().then(function(){e.getCreditCards(),e.initializeSpsDecidir()})},e.prototype.addDecidirScript=function(){return this.addScript=!0,new Promise(function(e){var t=document.createElement("script");t.src="https://live.decidir.com/static/v2.4/decidir.js",t.onload=e,document.body.appendChild(t)})},e.prototype.getCreditCards=function(){var e=this;this.spsDecidirApiService.getCreditCards(this.accessToken,this.vkUrlApi,this.domainId).subscribe(function(t){e.creditCards=t.data,e.logger("getCreditCards",e.creditCards)},function(t){return e.paymentState="apiError"})},e.prototype.getPlansByCreditCardId=function(e,t,n,r){var i=this;this.spsDecidirApiService.getPlansByCreditCardId(this.accessToken,this.vkUrlApi,e,t,n,r).subscribe(function(e){i.creditCardPlans=e.data,i.logger("getPlansByCreditCardId",i.creditCardPlans)},function(e){return i.paymentState="apiError"})},e.prototype.initializeSpsDecidir=function(){this.decidir=new Decidir(this.spsDecidirApiService.normalizeUrl(this.spsUrlApi),!this.useCybersource),this.decidir.setTimeout(15e3),this.decidir.setPublishableKey(this.defaultPublishableKey)},e.prototype.logger=function(e,t){this.debugLog&&console.log(e,t)},e.prototype.selectedCreditCard=function(){this.issuer&&(this.selectCreditCardPlan=null,"ARS"!==this.currency||"00000000"===this.cardText.substring(0,8)?(this.cardText="","USD"===this.currency&&(this.totalAmount=this.totalFinancedAmount=this.paymentAmount)):this.getPlansByCreditCardId(this.paymentAmount,this.issuer,this.domainId,this.cardText.substring(0,8)))},e.prototype.selectedCreditCardPlan=function(){null!==this.selectCreditCardPlan&&(this.totalFinancedAmount=this.selectCreditCardPlan.totalAmount,this.totalAmount=this.paymentAmount,this.currentTEA=this.selectCreditCardPlan.tna,this.currentCFT=this.selectCreditCardPlan.cft)},e.prototype.onSubmit=function(e){var t=this;e.preventDefault(),this.submitPressed=!0,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.checkOutForm.valid&&(this.paymentState="processing",this.spsDecidirApiService.getDecidirConfigByBin(this.cardText.substring(0,8),this.vkUrlApi).subscribe(function(e){"SPS-Decidir-Supervielle"==e?t.decidir.setPublishableKey(t.superviellePublishableKey):t.decidir.setPublishableKey(t.defaultPublishableKey);var n=document.querySelector("#formulario");t.decidir.createToken(n,function(e,r){200!==e&&201!==e?(t.paymentState="error",t.statusPay.emit(t.paymentResult),t.processErrorToken(r)):t.makePayment(n,r)})}))},e.prototype.makePayment=function(e,t){var n=this;this.logger("makePayment:",JSON.stringify(t));var r=this.hashText(this.cardText,1e5);this.payment={token:t.id,amount:this.totalAmount,totalFinancedAmount:this.totalFinancedAmount,bin:t.bin,currency:"ARS",documentNumber:"USD"===this.currency?"0":t.cardholder.identification.number,idVen:this.idVen,paymentType:"single",installments:"USD"===this.currency?1:this.selectCreditCardPlan.installments,creditCardPlanId:"USD"===this.currency?0:this.selectCreditCardPlan.id,paymentMethodId:this.issuer,cardholder:this.payerNameText,storeId:this.storeId,data:this.data,subPayments:[],creditCardHash:r,lastFourDigits:this.cardText.slice(-4)},this.logger("payment:",JSON.stringify(this.payment)),this.spsDecidirApiService.makePayment(this.payment,this.accessToken,this.vkUrlApi).subscribe(function(e){n.paymentResponseHandler(e)},function(e){n.statusPay.emit(n.paymentResult),n.paymentState="apiError",console.error(e)})},e.prototype.hashText=function(e,t){for(var n=e,r=0;r<t;r++)n=o(n);return n},e.prototype.paymentResponseHandler=function(e){if(this.logger("paymentResponseHandler:",JSON.stringify(e)),e.success){if(this.paymentState="success",this.paymentSuccessInfo=e.data,this.paymentResult={success:!0,paymentId:this.paymentSuccessInfo.payment_id,integrator:"DECIDIR"},this.statusPay.emit(this.paymentResult),this.disabled=!0,this.disableSelect=!0,this.successUrl&&this.successUrl.length>0)return void this.router.navigate([""+this.successUrl]).then()}else if(this.paymentState="error",this.statusPay.emit(this.paymentResult),this.processErrorMessage(e.data),this.failureUrl&&this.failureUrl.length>0)return void this.router.navigate([""+this.failureUrl]).then()},e.prototype.processErrorToken=function(e){var t=this;this.disabled=!0,this.disableSelect=!0;var n=e;n.error.forEach(function(e){"invalid_expiry_date"===e.error.type?t.errorMessage="Revisá la fecha de vencimiento.":t.errorMessage=JSON.stringify(n)})},e.prototype.processErrorMessage=function(e){if(this.disabled=!0,this.disableSelect=!0,e.error)this.errorMessage=e.error.reason.description,e.error.reason.additional_description&&(this.errorMessage=this.errorMessage+" - "+e.error.reason.additional_description),""!=this.errorMessage&&null!=this.errorMessage||(this.errorMessage=JSON.stringify(e));else if(e.error_type)switch(e.error_type){case"invalid_request_error":if(e.validation_errors.length>0&&"invalid_param"===e.validation_errors[0].code)switch(e.validation_errors[0].param){case"card_number":case"bin":this.errorMessage="Tarjeta inválida";break;default:this.errorMessage=e.error.reason.description,""!=this.errorMessage&&null!=this.errorMessage||(this.errorMessage=JSON.stringify(e))}break;case"not_found_error":this.errorMessage="Datos no encontrados (404).";break;case"authentication_error":this.errorMessage="Error (401).";break;case"malformed_request_error":this.errorMessage="Error al enviar los datos (400).";break;case"api_error":this.errorMessage="Error interno (409).";break;default:this.errorMessage=JSON.stringify(e)}},e.prototype.compareDate=function(e,t,n){var r=new Date(e,t,n),i=new Date;return r.getTime()===i.getTime()?0:r>i?1:r<i?-1:void 0},e.prototype.onYearChange=function(){var e=this;Number.isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onYearBlur=function(e){var t=this;this.compareDate(Number("20"+this.yearText),Number(this.monthText),(new Date).getDate())<0?setTimeout(function(){t.yearText="",t.invalidDate=!0,e.target.focus()}):this.invalidDate=!1},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"===this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;Number.isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""}),this.cvcText.search(" ")>-1&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;Number.isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""}),this.dniText.search(" ")>-1&&setTimeout(function(){e.dniText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.payerNameText)||setTimeout(function(){e.payerNameText=""})},e.prototype.onCardChange=function(){var e=this;Number.isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""}),this.cardText.search(" ")>-1&&setTimeout(function(){e.cardText=""}),this.cardText.length<8?(this.disableSelect=!0,this.issuer=null):this.disableSelect=!1,8===this.cardText.length&&"00000000"!==this.cardText&&this.setCreditType(this.cardText)},e.prototype.setCreditType=function(e){e.length<8?this.issuer=null:8===e.length&&(this.issuer=null,"4770"===e.substring(0,4)||"442548"===e.substring(0,6)||"406809"===e.substring(0,6)||"408738"===e.substring(0,6)||"411521"===e.substring(0,6)||"411663"===e.substring(0,6)||"426359"===e.substring(0,6)||"429780"===e.substring(0,6)||"438267"===e.substring(0,6)||"461187"===e.substring(0,6)||"500334"===e.substring(0,6)||"509413"===e.substring(0,6)||"512285"===e.substring(0,6)||"512881"===e.substring(0,6)||"518635"===e.substring(0,6)||"538449"===e.substring(0,6)||"550553"===e.substring(0,6)||"566057"===e.substring(0,6)||"567933"===e.substring(0,6)||"572140"===e.substring(0,6)||"584257"===e.substring(0,6)||"598718"===e.substring(0,6)||"605801"===e.substring(0,6)||"606120"===e.substring(0,6)||"631057"===e.substring(0,6)||"676215"===e.substring(0,6)||"713274"===e.substring(0,6)||"713284"===e.substring(0,6)||"717515"===e.substring(0,6)||"748761"===e.substring(0,6)||"753371"===e.substring(0,6)||"753600"===e.substring(0,6)||"912394"===e.substring(0,6)||"916148"===e.substring(0,6)||"916773"===e.substring(0,6)||"923405"===e.substring(0,6)||"930965"===e.substring(0,6)||"934091"===e.substring(0,6)||"935761"===e.substring(0,6)||"943313"===e.substring(0,6)||"945721"===e.substring(0,6)||"948809"===e.substring(0,6)||"960644"===e.substring(0,6)||"969085"===e.substring(0,6)||"970167"===e.substring(0,6)||"978061"===e.substring(0,6)||"40267919"===e.substring(0,8)||"40327176"===e.substring(0,8)||"40416004"===e.substring(0,8)||"40421933"===e.substring(0,8)||"40451556"===e.substring(0,8)||"40541010"===e.substring(0,8)||"40623835"===e.substring(0,8)||"40733469"===e.substring(0,8)||"40733586"===e.substring(0,8)||"40872498"===e.substring(0,8)||"45007789"===e.substring(0,8)||"45024822"===e.substring(0,8)||"45034751"===e.substring(0,8)||"45046987"===e.substring(0,8)||"45060549"===e.substring(0,8)||"45062482"===e.substring(0,8)||"45070071"===e.substring(0,8)||"45084708"===e.substring(0,8)||"45091433"===e.substring(0,8)||"45100902"===e.substring(0,8)||"45103869"===e.substring(0,8)||"45131047"===e.substring(0,8)||"45168884"===e.substring(0,8)||"45174306"===e.substring(0,8)||"45184611"===e.substring(0,8)||"45191921"===e.substring(0,8)||"45201881"===e.substring(0,8)||"45206401"===e.substring(0,8)||"45245294"===e.substring(0,8)||"45314944"===e.substring(0,8)||"45317847"===e.substring(0,8)||"45357409"===e.substring(0,8)||"45374587"===e.substring(0,8)||"45394705"===e.substring(0,8)||"45456584"===e.substring(0,8)||"45541924"===e.substring(0,8)||"45545795"===e.substring(0,8)||"45567746"===e.substring(0,8)||"45583759"===e.substring(0,8)||"45648838"===e.substring(0,8)||"45672506"===e.substring(0,8)||"45678421"===e.substring(0,8)||"45710756"===e.substring(0,8)||"45716006"===e.substring(0,8)||"45725029"===e.substring(0,8)||"45732113"===e.substring(0,8)||"45732698"===e.substring(0,8)||"45793917"===e.substring(0,8)||"45841185"===e.substring(0,8)||"45862021"===e.substring(0,8)||"45915336"===e.substring(0,8)||"45971496"===e.substring(0,8)?this.issuer=31:"51"===e.substring(0,2)||"52"===e.substring(0,2)||"53"===e.substring(0,2)||"54"===e.substring(0,2)||"55"===e.substring(0,2)?this.issuer=104:"589562"===e.substring(0,6)?this.issuer=24:"4"===e.substring(0,1)&&(this.issuer=1),this.selectedCreditCard())},e.prototype.onPaste=function(){return!1},e.prototype.resetForm=function(){this.disabled=!1,this.disableSelect=!1,this.totalAmount,this.totalFinancedAmount=void 0,this.currentTEA=void 0,this.currentCFT=void 0,this.creditCards=void 0,this.selectCreditCardPlan=null,this.creditCardPlans=void 0,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.monthText=void 0,this.yearText=void 0,this.cvcText=void 0,this.dniText=void 0,this.payerNameText=void 0,this.cardText=void 0,this.submitPressed=!1,this.invalidDate=!1,this.decidir=void 0,this.addScript=!0,this.paymentState="unsubmitted",this.payerName=void 0,this.issuer=null,this.payment=void 0,this.paymentSuccessInfo=void 0,this.errorMessage=void 0,this.initDecidir()},e.decorators=[{type:t.Component,args:[{selector:"sps-form-pay",template:'\x3c!-- https://github.com/decidir/sdk-javascript-v2 --\x3e\r\n\r\n<form action="" method="POST" id="formulario" #f="ngForm" autocomplete="off">\r\n \x3c!-- Numero de tarjeta --\x3e\r\n <div class="formRow">\r\n <label for="card_number">{{ language.toLowerCase() === \'en\' ? \'Card number\' : \'Número de Tarjeta\' }}</label>\r\n <span>\r\n <input id="card_number"\r\n type="text"\r\n name="card"\r\n placeholder="{{ language.toLowerCase() === \'en\' ? \'Card number\' : \'Número de Tarjeta\' }}"\r\n minlength="12"\r\n maxlength="19"\r\n pattern="[0-9]*"\r\n data-decidir="card_number"\r\n required\r\n (input)="onCardChange()"\r\n (paste)="onPaste()"\r\n [disabled]="disabled"\r\n [(ngModel)]="cardText"\r\n #card="ngModel" />\r\n </span>\r\n <p class="alert-text" *ngIf="card.errors?.required && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el número de tarjeta\' }}\r\n </p>\r\n <p class="alert-text" *ngIf="card.errors?.minlength && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Requiere 13 digitos mínimo\' }}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Card-issuer --\x3e\r\n <div class="formRow">\r\n <label>{{ language.toLowerCase() === \'en\' ? \'Pay with\' : \'Pagar con\' }}</label>\r\n <div class="select-icon">\r\n <select name="iss"\r\n required\r\n #iss="ngModel"\r\n [disabled]="disableSelect"\r\n (change)="selectedCreditCard()"\r\n [(ngModel)]="issuer">\r\n <option [value]="null" selected disabled>\r\n {{ language.toLowerCase() === \'en\' ? \'SELECT...\' : \'Sin Seleccionar...\' }}\r\n </option>\r\n <ng-container *ngIf="currency === \'USD\'; else credCardsArgTemplate">\r\n <option [value]="1">Visa</option>\r\n <option [value]="15">MasterCard</option>\r\n </ng-container>\r\n <ng-template #credCardsArgTemplate>\r\n <option [ngValue]="item.id" *ngFor="let item of creditCards">{{item.name}}</option>\r\n </ng-template>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="iss.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Seleccioná el emisor de la tarjeta\' }}\r\n </p>\r\n </div>\r\n\r\n <div class="formRow">\r\n <div class="form-row-2col">\r\n \x3c!-- Expiry-month--\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Month of expiration\' : \'Mes de expiración\' }}\r\n </label>\r\n <span>\r\n <input type="text"\r\n name="month"\r\n placeholder="MM"\r\n minlength="2"\r\n maxlength="2"\r\n data-decidir="card_expiration_month"\r\n required\r\n [disabled]="disabled"\r\n (input)="onMonthChange()"\r\n (focusout)="onMonthLostFocus()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="monthText"\r\n #month="ngModel" />\r\n </span>\r\n </div>\r\n \x3c!-- Expiry-year--\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Year of expiration\' : \'Año de expiración\' }}\r\n </label>\r\n <span>\r\n <input type="text"\r\n name="year"\r\n placeholder="AA"\r\n minlength="2"\r\n maxlength="2"\r\n data-decidir="card_expiration_year"\r\n required\r\n [disabled]="disabled"\r\n (input)="onYearChange()"\r\n (blur)="onYearBlur($event)"\r\n (paste)="onPaste()"\r\n [(ngModel)]="yearText"\r\n #year="ngModel"/>\r\n </span>\r\n </div>\r\n </div>\r\n <p class="alert-text" *ngIf="month.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el mes de vencimiento de la tarjeta\' }}</p>\r\n <p class="alert-text" *ngIf="year.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el año de vencimiento de la tarjeta\' }}</p>\r\n <p class="alert-text" *ngIf="invalidDate">\r\n {{ language.toLowerCase() === \'en\' ? \'Enter a valid expiration date\' : \'La fecha de la tarjeta ingresada está vencida\'}}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Card-name --\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Holder name\' : \'Nombre y apellido impreso en la tarjeta\' }}\r\n </label>\r\n\r\n <span>\r\n <input type="text"\r\n name="payername"\r\n placeholder="{{language.toLowerCase() === \'en\' ? \'Holder name\' : \'TITULAR\'}}" value="{{payerName}}"\r\n maxlength="22"\r\n data-decidir="card_holder_name"\r\n required\r\n [disabled]="disabled"\r\n (input)="onPayerNameChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="payerNameText"\r\n #payername="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!payername.valid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el nombre del titular de la tarjeta\' }}\r\n </p>\r\n </div>\r\n\r\n <div class="formRow" *ngIf="currency === \'USD\'">\r\n <input type="hidden" data-decidir="card_holder_doc_type" name="type">\r\n <input type="hidden" data-decidir="card_holder_doc_number" name="dni">\r\n </div>\r\n\r\n\r\n <div class="formRow" *ngIf="currency === \'ARS\'">\r\n <label for="card_holder_doc_type">Número de documento del titular</label>\r\n <div class="form-row-2col">\r\n \x3c!-- Tipo de documento--\x3e\r\n <div class="formRow">\r\n <div class="select-icon">\r\n <select data-decidir="card_holder_doc_type" ngModel required #type="ngModel" name="type"\r\n [disabled]="disabled">\r\n <option value="" disabled selected>Seleccionar...</option>\r\n <option value="dni">DNI</option>\r\n <option value="cuil">CUIL</option>\r\n </select>\r\n </div>\r\n </div>\r\n \x3c!-- DNI --\x3e\r\n <div class="formRow">\r\n <span>\r\n <input id="card_holder_doc_type"\r\n type="text"\r\n name="dni"\r\n minlength="7"\r\n maxlength="11"\r\n data-decidir="card_holder_doc_number"\r\n required\r\n [disabled]="disabled"\r\n (input)="onDniChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="dniText"\r\n #dni="ngModel" />\r\n </span>\r\n </div>\r\n </div>\r\n <p class="alert-text" *ngIf="type.invalid && submitPressed">Seleccioná tipo de documento</p>\r\n <p class="alert-text" *ngIf="dni.errors?.minlength && submitPressed">Requiere 7 digitos mínimo</p>\r\n <p class="alert-text" *ngIf="dni.errors?.required && submitPressed">Completá el número de documento</p>\r\n </div>\r\n \x3c!-- CVV --\x3e\r\n <div class="formRow">\r\n <label for="security_code">{{ language.toLowerCase() === \'en\' ? \'CSC\' : \'Código de seguridad\' }}</label>\r\n <span>\r\n <input id="security_code"\r\n type="password"\r\n name="cvc"\r\n placeholder="CSC"\r\n minlength="3"\r\n maxlength="4"\r\n data-decidir="security_code"\r\n required\r\n [disabled]="disabled"\r\n (input)="onCodeChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="cvcText"\r\n #cvc="ngModel" />\r\n </span>\r\n <p class="alert-text" *ngIf="cvc.errors?.minlength && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Enter a valid csc\' : \'Requiere 3 digitos mínimo\' }}\r\n </p>\r\n <p class="alert-text" *ngIf="cvc.errors?.required && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el código de seguridad\' }}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Cuotas --\x3e\r\n <ng-container *ngIf="currency === \'ARS\'">\r\n <div class="formRow">\r\n <label>Cuotas</label>\r\n <div class="select-icon">\r\n <select name="ins"\r\n required\r\n [disabled]="disabled"\r\n [(ngModel)]="selectCreditCardPlan"\r\n (change)="selectedCreditCardPlan()"\r\n #ins="ngModel">\r\n <option [value]="null" selected disabled>Sin Seleccionar...</option>\r\n <option [ngValue]="item" *ngFor="let item of creditCardPlans">{{ item.description }}</option>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="ins.invalid && submitPressed">Seleccioná cantidad de cuotas</p>\r\n </div>\r\n </ng-container>\r\n\r\n <div>\r\n <div>\r\n <div class="amount-resume" *ngIf="f.valid">\r\n <ng-container *ngIf="currency === \'ARS\'">\r\n <p>Total al contado</p>\r\n <h1>$ {{ totalAmount | number:\'2.2-2\' }}</h1>\r\n <p>Total financiado</p>\r\n <h3>$ {{ totalFinancedAmount | number:\'2.2-2\'}}</h3>\r\n <p>TEA: {{ currentTEA }}%</p>\r\n <p>CFT: {{ currentCFT }}%</p>\r\n </ng-container>\r\n <ng-container *ngIf="currency === \'USD\'">\r\n <p>Total</p>\r\n <h1>{{ labelButton }}</h1>\r\n </ng-container>\r\n <div *ngIf="paymentState === \'unsubmitted\'">\r\n <button *ngIf="currency === \'ARS\'" type="submit" (click)="onSubmit($event)">\r\n Pagar ${{ totalFinancedAmount | number:\'2.2-2\' }}\r\n </button>\r\n\r\n <button *ngIf="currency === \'USD\'" type="submit" (click)="onSubmit($event)">\r\n {{ labelButton }}\r\n </button>\r\n </div>\r\n <div *ngIf="paymentState === \'success\' || paymentState === \'processing\'">\r\n <button *ngIf="currency === \'ARS\'" disabled>Pagar $ {{totalFinancedAmount | number:\'2.2-2\'}}</button>\r\n <button *ngIf="currency === \'USD\'" disabled>{{ labelButton }}</button>\r\n </div>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!f.valid">\r\n {{ language.toLowerCase() === \'en\' ? \'Complete all fields\' : \'Completá los campos faltantes\' }}\r\n </p>\r\n <div *ngIf="!f.valid && paymentState !== \'success\' && paymentState !== \'apiError\' && paymentState !== \'error\'">\r\n <button *ngIf="currency === \'ARS\'" type="submit" (click)="onSubmit($event)">Pagar $\r\n {{ paymentAmount | number:\'2.2-2\' }}\r\n </button>\r\n <button *ngIf="currency === \'USD\'" type="submit" (click)="onSubmit($event)">\r\n {{ labelButton }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class="logo">\r\n <img [src]="logoSps" alt="SPS Decidir" class="responsive-img" style="width: 50px;">\r\n </div>\r\n <div>\r\n <div class="pay-message info" *ngIf="paymentState === \'processing\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n {{ language.toLowerCase() === \'en\' ? \'Processing payment...\' : \'Procesando pago...\' }}\r\n </p>\r\n </div>\r\n <div class="pay-message error" *ngIf="paymentState === \'error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{errorMessage}}\r\n <br>\r\n {{ language.toLowerCase() === \'en\' ? \'Error processing the payment\' : \'No se procesó el pago\' }}\r\n </p>\r\n </div>\r\n <div *ngIf="language.toLowerCase() !== \'en\' && paymentState === \'success\'" class="pay-message success">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Tu pago se ha confirmado!\r\n <br>\r\n Estos son los datos de la transacción:\r\n </p>\r\n <i class="data">Nro. de Pago: {{paymentSuccessInfo.payment_id}}</i>\r\n <i class="data">Ticket: {{paymentSuccessInfo.ticket}}</i>\r\n <i class="data">Cod. Autorización: {{paymentSuccessInfo.card_authorization_code}}</i>\r\n </div>\r\n\r\n <div *ngIf="language.toLowerCase() === \'en\' && paymentState === \'success\'" class="pay-message success">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Your payment has been confirmed!\r\n <br>\r\n These are the transaction data:\r\n </p>\r\n <i class="data">Payment No.: {{paymentSuccessInfo.payment_id}}</i>\r\n <i class="data">Ticket: {{paymentSuccessInfo.ticket}}</i>\r\n <i class="data">Authorization Code: {{paymentSuccessInfo.card_authorization_code}}</i>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'apiError\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{ language.toLowerCase() === \'en\' ? \'Error processing the payment (Vitnik)\' : \'Error al procesar el pago (Vitnik)\'}}\r\n </p>\r\n </div>\r\n\r\n <button *ngIf="language.toLowerCase() === \'es\' && (paymentState === \'apiError\' || paymentState === \'error\')" (click)="resetForm()">\r\n Limpiar formulario\r\n </button>\r\n <button *ngIf="language.toLowerCase() === \'en\' && (paymentState === \'apiError\' || paymentState === \'error\')" (click)="resetForm()">\r\n Clear form\r\n </button>\r\n\r\n </div>\r\n</form>\r\n',styles:['@charset "UTF-8";.flex-row-wrap{display:flex;flex-flow:row wrap;flex-direction:row;justify-content:space-between;align-items:center}.flex-row-wrap div{margin:10px;width:200px;flex-grow:1}#formulario{background-color:transparent;font-family:inherit,sans-serif}#formulario label{font-size:14px;color:#888}.formRow{margin-top:10px}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:5px;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:15px;color:#009ee3;margin-top:7px;margin-bottom:0}:focus{outline:0}.pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.pay-message i.data{font-size:.9rem;text-align:center}.pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.success{background-color:#dff2bf;color:#4f8a10}.error{color:#d8000c;background-color:#ffd2d2}.info{color:#00529b;background-color:#bde5f8}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252;cursor:default}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase;line-height:130%}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}.responsive-img{width:100%;height:auto}']}]}],e.ctorParameters=function(){return[{type:i.Router},{type:b}]},e.propDecorators={checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}],accessToken:[{type:t.Input}],spsUrlApi:[{type:t.Input}],vkUrlApi:[{type:t.Input}],paymentAmount:[{type:t.Input}],logoSps:[{type:t.Input}],currency:[{type:t.Input}],defaultPublishableKey:[{type:t.Input}],superviellePublishableKey:[{type:t.Input}],successUrl:[{type:t.Input}],failureUrl:[{type:t.Input}],useCybersource:[{type:t.Input}],debugLog:[{type:t.Input}],storeId:[{type:t.Input}],domainId:[{type:t.Input}],idVen:[{type:t.Input}],data:[{type:t.Input}],labelButton:[{type:t.Input}],language:[{type:t.Input}],statusPay:[{type:t.Output}]},e}();var x=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,a.HttpClientModule,i.RouterModule],declarations:[y],exports:[y]}]}],e}(),v=function(){function e(e){this.httpClient=e}return e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype.initPayment=function(e,t,n){this._setAuthHeaders(e);var r={cardholder:n.cardholder,creditCardHash:n.creditCardHash,amount:n.amount,installments:n.installments,documentNumber:n.documentNumber,areaCode:n.areaCode,phoneNumber:n.phoneNumber,idVen:n.idVen,storeId:n.storeId,data:n.data};return this.httpClient.post(this.normalizeUrl(t)+"/init-payment",r,{headers:this.authHeaders})},e.prototype.getOrders=function(e,t){return this._setAuthHeaders(e),this.httpClient.get(this.normalizeUrl(t)+"/orders",{headers:this.authHeaders})},e.prototype.payment=function(e,t,n){this._setAuthHeaders(e);var r={id:n.id,cardholder:n.cardholder,sale_token:n.sale_token,code:n.code,creditCardHash:n.creditCardHash,cardMonthExpiration:n.cardMonthExpiration,cardYearExpiration:n.cardYearExpiration,cardSecurityCode:n.cardSecurityCode,idVen:n.idVen,storeId:n.storeId};return this.httpClient.post(this.normalizeUrl(t)+"/payment",r,{headers:this.authHeaders})},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var C=function(){function e(){this.modalVisible=!1,this.verificationCode="",this.codeVerified=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.verificationCode=""},e.prototype.openModal=function(){this.verificationCode="",this.modalVisible=!0,document.body.style.overflow=""},e.prototype.closeModal=function(){this.modalVisible=!1,document.body.style.overflow="hidden"},e.prototype.onSubmitCode=function(){this.verificationCode?(console.log("Código ingresado:",this.verificationCode),this.codeVerified.emit(this.verificationCode),this.modalVisible=!1):alert("Por favor ingrese el código.")},e.prototype.onVerificationCodeChange=function(){var e=this;isNaN(+this.verificationCode)&&setTimeout(function(){e.verificationCode=""})},e.decorators=[{type:t.Component,args:[{selector:"lib-modal",template:'<div class="custom-modal-overlay" [ngClass]="{ show: modalVisible }" *ngIf="modalVisible">\n <div class="custom-modal">\n <div class="custom-modal-header">\n <h5 class="custom-modal-title">Ingrese el código</h5>\n <button type="button" class="custom-modal-close" (click)="closeModal()">\n ×\n </button>\n </div>\n <div class="custom-modal-body">\n <form (ngSubmit)="onSubmitCode()">\n <div class="form-group">\n <label for="verificationCode">Código de verificación:</label>\n <input type="text" class="custom-input" id="verificationCode" [(ngModel)]="verificationCode" name="verificationCode"\n required minlength="4" maxlength="4" (input)="onVerificationCodeChange()" #verificationCodeInput="ngModel"/>\n </div>\n\n <div *ngIf="verificationCodeInput.invalid && verificationCodeInput.touched" class="error-message">\n <p *ngIf="verificationCodeInput.errors && verificationCodeInput.errors.minlength"\n >El código debe tener 4 caracteres.\n </p>\n <p *ngIf="verificationCodeInput.errors && verificationCodeInput.errors.minlength">\n El código debe tener 4 caracteres.\n </p>\n </div>\n\n <button type="submit" class="custom-button" [disabled]="verificationCodeInput.invalid">\n Verificar\n </button>\n </form>\n </div>\n </div>\n</div>\n',styles:[".custom-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none;z-index:1050}.custom-modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.custom-modal{background-color:#fff;border-radius:8px;width:90%;max-width:400px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;-webkit-animation:.3s ease-out fadeIn;animation:.3s ease-out fadeIn;z-index:1060}.custom-modal-header{background-color:#009ee3;color:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center}.custom-modal-title{margin:0;font-size:18px;font-weight:700}.custom-modal-close{background:0 0;border:none;font-size:24px;color:#fff;cursor:pointer}.custom-modal-body{padding:20px}.custom-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px;margin-top:5px;box-sizing:border-box}.custom-button{background-color:#009ee3;color:#fff;border:none;border-radius:4px;padding:10px 20px;font-size:16px;cursor:pointer;margin-top:15px;display:block;width:100%;text-align:center;transition:background-color .3s}.custom-button:hover{background-color:#009ee3}.error-message{color:red;font-size:14px;margin-top:5px}.custom-input.ng-touched.ng-invalid{border-color:red}@-webkit-keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={codeVerified:[{type:t.Output}]},e}();var I=function(){function e(e){this.snackbar=e}return e.prototype.hideNotification=function(){this.snackbar.dismiss()},e.prototype.showSnackBarMessage=function(e,t){this.snackbar.open(e,void 0,{duration:t})},e.prototype.showSuccess=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["success-snackbar"]})},e.prototype.showError=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["error-snackbar"]})},e.prototype.showWarning=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["warning-snackbar"]})},e.prototype.showInfo=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["info-snackbar"]})},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[{type:s.MatSnackBar}]},e}();var T=function(){function e(e,t){this.goCuotasApiService=e,this.notificationService=t,this.sale_token="",this.error_message="",this.paymentCompleted=!1,this.loadingMessage="Iniciando el pago...",this.paymentStatus="ok",this.disabled=!1,this.submitted=!1,this.isLoading=!1,this.hasError=!1,this.paymentResult={success:!1,paymentId:"",integrator:"GOCUOTAS"}}return e.prototype.ngOnInit=function(){this.defaultDocType="",this.installments=0,this.currentInstallments=[{value:2,label:"2 Cuotas"},{value:3,label:"3 Cuotas"},{value:4,label:"4 Cuotas"}],this.totalAmount=Number(this.paymentAmount)},e.prototype.onSubmit=function(e){e.preventDefault(),this.submitted=!0,this.checkOutForm.valid&&(this.isLoading=!0,this.paymentCompleted=!1,this.loadingMessage="Iniciando el pago...",this.paymentResult={success:!1,paymentId:"",integrator:"GOCUOTAS"},this.OinitPayment={amount:100*Number(this.paymentAmount),areaCode:this.codAreaText,installments:this.installments,documentNumber:this.dniText,phoneNumber:this.telText,cardholder:this.defaultName,creditCardHash:this.cardText,idVen:this.idVen,storeId:this.storeId},this.initPayment())},e.prototype.initPayment=function(){var e=this;this.isLoading=!0,this.loadingMessage="Enviando código...",this.goCuotasApiService.initPayment(this.accessToken,this.vkUrlApi,this.OinitPayment).subscribe({next:function(t){return e.initPaymentResponseHandler(t)},error:function(t){return e.ResponseHandlerError(t)}})},e.prototype.initPaymentResponseHandler=function(e){e.success?(this.Opayment={id:e.data.paymentId,cardholder:this.defaultName,sale_token:e.data.response.sale_token,creditCardHash:this.cardText,cardMonthExpiration:Number(this.monthText),cardYearExpiration:Number(this.yearText),cardSecurityCode:Number(this.cvcText),idVen:this.idVen,storeId:this.storeId},this.isLoading=!1,this.modal.openModal(),this.paymentStatus="sentCode"):this.error_message=e.errorsMessages[0]},e.prototype.onCodeSent=function(e){this.isLoading=!0,this.loadingMessage="Procesando pago...",this.Opayment.code=Number(e),null!==e&&this.finishPayment()},e.prototype.finishPayment=function(){var e=this;this.paymentStatus="ok",this.goCuotasApiService.payment(this.accessToken,this.vkUrlApi,this.Opayment).subscribe({next:function(t){return e.FinishPaymentResponseHandler(t)},error:function(t){return e.ResponseHandlerError(t)}})},e.prototype.ResponseHandlerError=function(e){if(!e.ok&&null===e.error&&500===e.status)return this.error_message="Error en el servidor. Vuelva a intentar más tarde.",this.isLoading=!1,void(this.hasError=!0);this.error_message=e.error.errorsMessages[0],this.isLoading=!1,this.hasError=!0},e.prototype.FinishPaymentResponseHandler=function(e){console.log("respuesta finishpayment: ",e),this.paymentStatus="ok",e.success?(console.log("Pago aprobado"),this.loadingMessage="¡Pago procesado correctamente!",this.paymentCompleted=!0):this.error_message=e.errorsMessages[0]},e.prototype.restartForm=function(){this.hasError=!1,this.submitted=!1,this.paymentStatus="ok",this.checkOutForm.reset(),this.installments=0,this.defaultDocType=""},e.prototype.onYearChange=function(){var e=this;isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"==this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""})},e.prototype.onMailChange=function(){var e=this;isNaN(+this.mailText)||setTimeout(function(){e.mailText=""})},e.prototype.onCodAreaChange=function(){var e=this;isNaN(+this.codAreaText)&&setTimeout(function(){e.codAreaText=""})},e.prototype.onTelChange=function(){var e=this;isNaN(+this.telText)&&setTimeout(function(){e.telText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.defaultName)||setTimeout(function(){e.defaultName=""})},e.prototype.onCardChange=function(){var e=this;isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""})},e.prototype.onInstallmentsChange=function(){},e.prototype.onPaste=function(){return!1},e.decorators=[{type:t.Component,args:[{selector:"lib-go-cuotas",template:'<div *ngIf="isLoading" class="loading-overlay">\n <div class="loading-message">\n <p>{{ loadingMessage }}</p>\n <div *ngIf="!paymentCompleted" class="spinner"></div>\n <div *ngIf="paymentCompleted" class="success-icon">✔️</div>\n </div>\n</div>\n\n<div *ngIf="hasError" class="error-overlay">\n <div class="error-message">\n <p>{{ error_message }}</p>\n <button (click)="restartForm()">Reintentar</button>\n </div>\n</div>\n\n<form\n (ngSubmit)="onSubmit($event)"\n class="gc-payment"\n id="formulario"\n #f="ngForm"\n autocomplete="off"\n>\n <div class="formRow">\n <label for="cardholderName">Nombre y Apellido impreso en la tarjeta</label>\n <span>\n <input\n id="cardholderName"\n type="text"\n name="cardholderName"\n required\n maxlength="22"\n data-checkout="cardholderName"\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onPayerNameChange()"\n [(ngModel)]="defaultName"\n pattern="^[a-zA-Z\\s]+$"\n #cardholderName="ngModel"\n />\n </span>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardholderName.valid && submitted">\n Ingresá el nombre completo que figura en la tarjeta.\n </p>\n </div>\n\n <div class="formRow">\n <div class="form-row-2col">\n\n \x3c!-- Tipo de documento--\x3e\n <div class="formRow">\n <label for="docType">Tipo Doc.</label>\n <div class="select-icon">\n <select id="docType" name="docType" data-checkout="docType" required ngModel [disabled]="disabled"\n [(ngModel)]="defaultDocType" #docType="ngModel">\n <option value="" disabled selected>Sin Seleccionar...</option>\n <option value="dni">DNI</option>\n <option value="cuil">CUIL</option>\n </select> \n </div>\n </div>\n\n \x3c!-- DNI --\x3e\n <div class="formRow">\n <label for="docNumber">Nº de Doc.</label>\n <span>\n <input id="docNumber" type="text" name="docNumber" data-checkout="docNumber" minlength="7" maxlength="8"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onDniChange()" [(ngModel)]="dniText"\n #docNumber="ngModel" />\n </span>\n </div>\n\n </div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!docNumber.valid && submitted">\n Completá el número de documento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!docType.valid && submitted">\n Seleccioná el tipo de documento.\n </p>\n </div>\n\n \x3c!-- Numero de tarjeta --\x3e\n <div class="formRow">\n <label for="cardNumber">Número de Tarjeta</label>\n <span>\n <input\n id="cardNumber"\n type="text"\n name="cardNumber"\n data-checkout="cardNumber"\n maxlength="19"\n required\n thumbnail\n (input)="onCardChange()"\n (paste)="onPaste()"\n [disabled]="disabled"\n [(ngModel)]="cardText"\n #cardNumber="ngModel"\n />\n </span>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardNumber.valid && submitted">\n Ingresá el número de tarjeta.\n </p>\n </div>\n\n <div class="form-row-3col">\n \x3c!-- Expiry-month--\x3e\n <div class="formRow">\n <label for="cardExpirationMonth">Mes de expiración</label>\n <span>\n <input\n id="cardExpirationMonth"\n type="text"\n name="cardExpirationMonth"\n placeholder="MM"\n minlength="2"\n maxlength="2"\n data-checkout="cardExpirationMonth"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onMonthChange()"\n (focusout)="onMonthLostFocus()"\n [(ngModel)]="monthText"\n #cardExpirationMonth="ngModel"\n />\n </span>\n </div>\n\n \x3c!-- Expiry-year--\x3e\n <div class="formRow">\n <label for="cardExpirationYear">Año de expiración</label>\n <span>\n <input\n id="cardExpirationYear"\n type="text"\n name="cardExpirationYear"\n placeholder="AA"\n minlength="2"\n maxlength="2"\n data-checkout="cardExpirationYear"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onYearChange()"\n [(ngModel)]="yearText"\n #cardExpirationYear="ngModel"\n />\n </span>\n </div>\n\n \x3c!-- CVC --\x3e\n <div class="formRow">\n <label for="securityCode">Código de seguridad</label>\n <span>\n <input\n id="securityCode"\n type="text"\n name="securityCode"\n placeholder="CSC"\n minlength="3"\n maxlength="4"\n data-checkout="securityCode"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onCodeChange()"\n [(ngModel)]="cvcText"\n #securityCode="ngModel"\n />\n </span>\n </div>\n </div>\n\n <div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationMonth.valid && submitted">\n Completá el mes de vencimiento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationYear.valid && submitted">\n Completá el año de vencimiento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!securityCode.valid && submitted">\n Ingresá el código de seguridad.\n </p>\n </div>\n\n \x3c!--Cantidad de cuotas--\x3e\n <div class="formRow">\n <label for="installments">Cuotas</label>\n <div class="select-icon">\n <select id="installments" name="installments" aria-required="true" required ngModel\n [(ngModel)]="installments" (change)="onInstallmentsChange()" [disabled]="disabled" #inst="ngModel">\n <option value="0" disabled selected>Sin Seleccionar...</option>\n <option *ngFor="let current of currentInstallments" [value]="current.value">\n {{ current.label }}\n </option>\n </select>\n </div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!inst.valid && submitted">\n Elegí la cantidad de cuotas.\n </p>\n </div>\n\n <div class="formRow">\n <div class="form-row-3col">\n\n \x3c!-- Correo electrónico --\x3e\n <div class="formRow">\n <label for="mail">Correo electrónico</label>\n <span>\n <input id="mail" type="text" name="mail" data-checkout="mail" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onMailChange()" [(ngModel)]="mailText"\n #mail="ngModel"/>\n </span>\n </div>\n\n \x3c!-- Código de área --\x3e\n <div class="formRow">\n <label for="codArea">Cod. Área</label>\n <span>\n <input id="codArea" type="text" name="codArea" data-checkout="codArea" minlength="2" maxlength="4"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onCodAreaChange()" [(ngModel)]="codAreaText"\n #codArea="ngModel" />\n </span>\n </div>\n\n \x3c!-- Teléfono --\x3e\n <div class="formRow">\n <label for="tel">Teléfono</label>\n <span>\n <input id="tel" type="text" name="tel" data-checkout="tel" minlength="6" maxlength="8"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onTelChange()" [(ngModel)]="telText"\n #tel="ngModel" />\n </span>\n </div>\n\n </div>\n </div>\n\n <div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!mail.valid && submitted">\n Completá el correo electrónico.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!codArea.valid && submitted">\n Completá el código de área.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!tel.valid && submitted">\n Ingresá el teléfono.\n </p>\n </div>\n\n <button type="submit">Pagar ${{ totalAmount }}</button>\n</form>\n\n<div class="logo">\n <img [src]="logoGC" alt="Go Cuotas" class="responsive-img" style="width: 150px;">\n</div>\n\n<lib-modal (codeVerified)="onCodeSent($event)"></lib-modal>',styles:['@charset "UTF-8";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}']}]}],e.ctorParameters=function(){return[{type:v},{type:I}]},e.propDecorators={accessToken:[{type:t.Input}],gcUrlApi:[{type:t.Input}],vkUrlApi:[{type:t.Input}],paymentAmount:[{type:t.Input}],logoGC:[{type:t.Input}],idVen:[{type:t.Input}],storeId:[{type:t.Input}],data:[{type:t.Input}],checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}],modal:[{type:t.ViewChild,args:[C,{static:!1}]}]},e}();var k=[T,C],w=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[k],exports:[k],imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.RouterModule,d.MatSnackBarModule],providers:[v,I]}]}],e}(),M=[h,x,f,w],S=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:M,exports:M}]}],e}();e.VkPaymentsModule=S,e.ɵa=h,e.ɵb=p,e.ɵc=l,e.ɵd=u,e.ɵe=x,e.ɵf=y,e.ɵg=b,e.ɵh=f,e.ɵi=g,e.ɵj=w,e.ɵk=T,e.ɵl=C,e.ɵm=v,e.ɵn=I,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/router"),require("@angular/common/http"),require("sha256"),require("@angular/material/snack-bar"),require("@angular/material")):"function"==typeof define&&define.amd?define("vk-payments",["exports","@angular/core","@angular/common","@angular/forms","@angular/router","@angular/common/http","sha256","@angular/material/snack-bar","@angular/material"],t):t((e=e||self)["vk-payments"]={},e.ng.core,e.ng.common,e.ng.forms,e.ng.router,e.ng.common.http,e.sha256,e.ng.material["snack-bar"],e.ng.material)}(this,function(e,t,n,r,i,a,o,s,d){"use strict";o=o&&o.hasOwnProperty("default")?o.default:o;function c(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}var l=function(){function e(e){this.httpClient=e}return e.prototype.makePayment=function(e,t,n){return this._setAuthHeaders(t),this.httpClient.post(this.normalizeUrl(n)+"/Payment",e,{headers:this.authHeaders})},e.prototype.getMercadoPagoPromotions=function(e){return this.httpClient.get(e)},e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var p=function(){function e(e,n){this.router=e,this.mercadopagoApiService=n,this.paymentState="unsubmitted",this.tokenId="",this.disabled=!1,this.addScript=!1,this.requiredIssuer=!1,this.submitted=!1,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.statusPay=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.initMercadoPago()},e.prototype.ngOnChanges=function(e){e.paymentAmount.isFirstChange()||(this.disabled=!1,this.checkOutForm.reset())},e.prototype.initMercadoPago=function(){var e=this;this.addMercadopagoScript().then(function(){Mercadopago.setPublishableKey(e.publishableKey),Mercadopago.getIdentificationTypes(),e.totalAmount=e.paymentAmount,e.defaultName=e.payerName,e.defaultDocType="DNI"})},e.prototype.addMercadopagoScript=function(){return this.addScript=!0,new Promise(function(e,t){var n=document.createElement("script");n.src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js?2345",n.onload=e,document.body.appendChild(n)})},e.prototype.createToken=function(e){var t=this;this.paymentState="processing",Mercadopago.createToken(e,function(e,n){200!==e&&201!==e?(t.paymentState="error",t.statusPay.emit(t.paymentResult),t.errorMessage="Revisa los datos del formulario."):(t.tokenId=n.id,t.makePayment())})},e.prototype.makePayment=function(){var e=this.hashText(this.cardText,1e5);this.cardPayment={tokenId:this.tokenId,transactionAmount:this.totalAmount,description:this.description,installments:Number(this.checkOutForm.value.installments),issuerId:this.checkOutForm.value.issuer,paymentMethodId:this.currentPaymentMethod[0].id,codCP:this.idVen,docNumber:this.checkOutForm.value.docNumber,additionalData:this.data,storeId:this.storeId,hash:e},this.mercadoPagoPayment()},e.prototype.hashText=function(e,t){for(var n=e,r=0;r<t;r++)n=o(n);return n},e.prototype.paymentResponseHandler=function(e){e.success?(this.paymentState=e.data.statusDetails,this.ticket=e.data.transactionId,this.paymentResult={success:!0,paymentId:this.ticket,integrator:"MP"},this.statusPay.emit(this.paymentResult),this.disabled=!0,this.logger("paymentResponseHandler:",e),this.successUrl&&this.successUrl.length>0&&this.router.navigate([""+this.successUrl])):(this.paymentState="apiError",this.statusPay.emit(this.paymentResult),this.successUrl&&this.failureUrl.length>0&&this.router.navigate([""+this.failureUrl]).then())},e.prototype.checkPaymentMethod=function(){if(null!=this.checkOutForm.value.cardNumber){if(this.currentInstallments=null,this.currentIssuers=null,this.checkOutForm.value.cardNumber.toString().length>=6){this.currentBin=this.checkOutForm.value.cardNumber.toString().substring(0,6);var e=this;Mercadopago.getPaymentMethod({bin:this.checkOutForm.value.cardNumber.toString()},function(t,n){200===t&&e.setCurrentMethod(n)})}this.checkOutForm.value.cardNumber.toString().length<6&&(this.requiredIssuer=!1)}},e.prototype.setCurrentMethod=function(e){if(e){this.logger("setCurrentMethod:",e);var t=e[0].additional_info_needed;null==t.find(function(e){return"issuer_id"==e})?this.requiredIssuer=!1:this.requiredIssuer=!0,this.logger("requiredIssuer:",this.requiredIssuer),this.currentPaymentMethod=e;var n=this;Mercadopago.getIssuers(e[0].id,function(e,t){200===e&&n.setIssuers(t)}),n.checkInstallments(this.requiredIssuer)}},e.prototype.checkInstallments=function(e){if(!(null==this.currentBin||this.currentBin.length<6)){var t,n=this;n.currentInstallments=null,t=e?{bin:this.currentBin,amount:this.totalAmount,issuer_id:this.issuerId}:{bin:this.currentBin,amount:this.totalAmount},Mercadopago.getInstallments(t,function(e,t){200===e?n.setInstallments(t):n.currentInstallments=null})}},e.prototype.setInstallments=function(e){var t=this;if(e.length>0)if(null!=this.issuerId&&e.length>1&&this.currentPaymentMethod.length>0){var n=e.filter(function(e){return e.issuer.id===t.issuerId&&e.payment_method_id===t.currentPaymentMethod[0].id});this.currentInstallments=n[0].payer_costs,this.issuerId=n[0].issuer.id}else this.currentInstallments=e[0].payer_costs,this.issuerId=e[0].issuer.id},e.prototype.setIssuers=function(e){this.currentIssuers=e},e.prototype.onDuesSelection=function(e){var t,n,r,i;try{for(var a=c(this.currentInstallments),o=a.next();!o.done;o=a.next()){var s=o.value;if(s.installments===Number(e.value.installments)){this.totalFinancedAmount=s.total_amount;try{for(var d=(r=void 0,c(s.labels)),l=d.next();!l.done;l=d.next()){var p=l.value;p.includes("CFT")&&(this.recommendedLabel=p.replace(/_/g,": ").split("|",2),this.currentTEA=this.recommendedLabel[1],this.currentCFT=this.recommendedLabel[0])}}catch(e){r={error:e}}finally{try{l&&!l.done&&(i=d.return)&&i.call(d)}finally{if(r)throw r.error}}}}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(t)throw t.error}}},e.prototype.onSubmit=function(e){if(this.submitted=!0,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.checkOutForm.valid){var t={cardNumber:this.cardText,securityCode:this.cvcText,cardExpirationMonth:this.monthText,cardExpirationYear:this.yearText,cardholderName:this.defaultName,docType:this.defaultDocType,docNumber:this.dniText};this.debugLog&&console.log("sendForm",t),""!==this.tokenId&&Mercadopago.clearSession(),this.createToken(t)}},e.prototype.onYearChange=function(){var e=this;isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"==this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.defaultName)||setTimeout(function(){e.defaultName=""})},e.prototype.onCardChange=function(){var e=this;isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""})},e.prototype.onPaste=function(){return!1},e.prototype.logger=function(e,t){this.debugLog&&console.log(e,JSON.stringify(t))},e.prototype.mercadoPagoPayment=function(){var e=this;this.mercadopagoApiService.makePayment(this.cardPayment,this.accessToken,this.vkUrlApi).subscribe(function(t){e.paymentResponseHandler(t)},function(t){e.statusPay.emit(e.paymentResult),e.paymentState="apiError",console.log(t)})},e.prototype.resetForm=function(){this.disabled=!1,this.totalAmount,this.totalFinancedAmount=void 0,this.currentBin=void 0,this.recommendedLabel=void 0,this.currentTEA=void 0,this.currentCFT=void 0,this.ticket=void 0,this.defaultName=void 0,this.defaultDocType=void 0,this.issuerId=void 0,this.currentPaymentMethod=void 0,this.currentIssuers=null,this.currentInstallments=null,this.cardPayment=void 0,this.paymentResult={success:!1,paymentId:"",integrator:"MP"},this.monthText=void 0,this.yearText=void 0,this.cvcText=void 0,this.dniText=void 0,this.cardText=void 0,this.requiredIssuer=!1,this.submitted=!1,this.addScript=!1,this.paymentState="unsubmitted",this.payerName=void 0,this.tokenId="",this.errorMessage=void 0,this.checkOutForm.reset(),this.initMercadoPago()},e.decorators=[{type:t.Component,args:[{selector:"mp-form-pay",template:'<form (ngSubmit)="onSubmit(f)" class="mp-payment" #f="ngForm" autocomplete="off">\r\n \x3c!-- Titular --\x3e\r\n <div class="formRow">\r\n <label for="cardholderName">Nombre y Apellido</label>\r\n <span>\r\n <input id="cardholderName" type="text" name="cardholderName" required maxlength="22"\r\n data-checkout="cardholderName" [disabled]="disabled" (paste)="onPaste()" (input)="onPayerNameChange()"\r\n [(ngModel)]="defaultName" #cardholderName="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardholderName.valid && submitted">\r\n Ingresá el nombre completo que figura en la tarjeta.\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Numero de tarjeta --\x3e\r\n <div class="formRow">\r\n <label for="cardNumber">Nº de Tarjeta</label>\r\n <span>\r\n <input id="cardNumber" type="text" name="cardNumber" data-checkout="cardNumber" maxlength="19" required thumbnail\r\n [disabled]="disabled" (input)="onCardChange()" (keyup)="checkPaymentMethod()" \r\n (paste)="onPaste()" [(ngModel)]="cardText" #cardNumber="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardNumber.valid && submitted">\r\n Ingresá el número de tarjeta.\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Emisor--\x3e\r\n <div class="formRow">\r\n <label for="issuer">Emisor</label>\r\n <div class="select-icon">\r\n <select id="issuer" name="issuer" required [disabled]="!requiredIssuer || disabled" [(ngModel)]="issuerId"\r\n #issuer="ngModel" (change)="checkInstallments(true)">\r\n <option *ngFor="let iss of currentIssuers" value="{{ iss.id }}">\r\n {{ iss.name }}\r\n </option>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="!issuer.valid && requiredIssuer && submitted">Seleccioná el emisor de la tarjeta.</p>\r\n </div>\r\n\r\n <div class="form-row-3col">\r\n \x3c!-- Expiry-month--\x3e\r\n <div class="formRow">\r\n <label for="cardExpirationMonth">Mes</label>\r\n <span>\r\n <input id="cardExpirationMonth" type="text" name="cardExpirationMonth" placeholder="MM" minlength="2"\r\n maxlength="2" data-checkout="cardExpirationMonth" required [disabled]="disabled" (paste)="onPaste()"\r\n (input)="onMonthChange()" (focusout)="onMonthLostFocus()" [(ngModel)]="monthText"\r\n #cardExpirationMonth="ngModel" />\r\n </span>\r\n </div>\r\n\r\n \x3c!-- Expiry-year--\x3e\r\n <div class="formRow">\r\n <label for="cardExpirationYear">Año</label>\r\n <span>\r\n <input id="cardExpirationYear" type="text" name="cardExpirationYear" placeholder="AAAA" minlength="4"\r\n maxlength="4" data-checkout="cardExpirationYear" required [disabled]="disabled" (paste)="onPaste()"\r\n (input)="onYearChange()" [(ngModel)]="yearText" #cardExpirationYear="ngModel" />\r\n </span>\r\n </div>\r\n\r\n \x3c!-- CVC --\x3e\r\n <div class="formRow">\r\n <label for="securityCode">CVC</label>\r\n <span>\r\n <input id="securityCode" type="text" name="securityCode" placeholder="CVC" minlength="3" maxlength="4"\r\n data-checkout="securityCode" required [disabled]="disabled" (paste)="onPaste()" (input)="onCodeChange()"\r\n [(ngModel)]="cvcText" #securityCode="ngModel" />\r\n </span>\r\n </div>\r\n </div>\r\n <div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationMonth.valid && submitted">\r\n Completá el mes de vencimiento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationYear.valid && submitted">\r\n Completá el año de vencimiento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!securityCode.valid && submitted">\r\n Ingresá el código de seguridad.\r\n </p>\r\n </div>\r\n\r\n <div class="formRow">\r\n <div class="form-row-2col">\r\n\r\n \x3c!-- Tipo de documento--\x3e\r\n <div class="formRow">\r\n <label for="docType">Tipo de Doc.</label>\r\n <div class="select-icon">\r\n <select id="docType" name="docType" data-checkout="docType" required ngModel [disabled]="disabled"\r\n [(ngModel)]="defaultDocType" #docType="ngModel">\r\n </select>\r\n </div>\r\n </div>\r\n\r\n \x3c!-- DNI --\x3e\r\n <div class="formRow">\r\n <label for="docNumber">Nº de Doc.</label>\r\n <span>\r\n <input id="docNumber" type="text" name="docNumber" data-checkout="docNumber" minlength="7" maxlength="8"\r\n required [disabled]="disabled" (paste)="onPaste()" (input)="onDniChange()" [(ngModel)]="dniText"\r\n #docNumber="ngModel" />\r\n </span>\r\n </div>\r\n\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!docNumber.valid && submitted">\r\n Completá el número de documento.\r\n </p>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!docType.valid && submitted">\r\n Seleccioná el tipo de documento.\r\n </p>\r\n </div>\r\n\r\n \x3c!--Cantidad de cuotas--\x3e\r\n <div class="formRow">\r\n <label for="installments">Cantidad de Cuotas</label>\r\n <div class="select-icon">\r\n <select id="installments" name="installments" aria-required="true" aria-invalid="false" required ngModel\r\n [disabled]="disabled" (change)="onDuesSelection(f)" #installments="ngModel">\r\n <option *ngFor="let current of currentInstallments " value="{{ current.installments }}">\r\n {{ current.recommended_message }}\r\n </option>\r\n </select>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!installments.valid && submitted">\r\n Elegí la cantidad de cuotas.\r\n </p>\r\n </div>\r\n\r\n <div>\r\n <div>\r\n <div class="amount-resume" *ngIf="f.valid">\r\n <p>Total al contado</p>\r\n <h1>$ {{ totalAmount | number:\'2.2-2\' }}</h1>\r\n <p>Total financiado</p>\r\n <h3>$ {{ totalFinancedAmount | number:\'2.2-2\' }}</h3>\r\n <p>{{ currentTEA }}</p>\r\n <p>{{ currentCFT }}</p>\r\n <div *ngIf="paymentState === \'unsubmitted\'\r\n || paymentState.substring(0, 11) === \'cc_rejected\'\r\n || paymentState === \'error\'">\r\n <button type="submit" (click)="onSubmit(f)">\r\n Pagar $ {{ totalFinancedAmount | number:\'2.2-2\' }}\r\n </button>\r\n </div>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!f.valid">Completá los campos faltantes.</p>\r\n <div *ngIf="!f.valid">\r\n <div *ngIf="paymentState !== \'accredited\' &&\r\n paymentState !== \'pending_contingency\' &&\r\n paymentState !== \'pending_review_manual\'">\r\n <button type="submit" (click)="onSubmit(f)">\r\n Pagar $ {{ paymentAmount | number:\'2.2-2\' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>\r\n\r\n<div class="logo">\r\n <img [src]="imgMercadoPago" alt="Mercado Pago" class="responsive-img" style="width: 150px;">\r\n</div>\r\n\r\n\x3c!--IFs--\x3e\r\n<div>\r\n <div class="pay-message info" *ngIf="paymentState === \'processing\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Procesando pago...\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message success" *ngIf="paymentState === \'accredited\'">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Tu pago se ha confirmado!\r\n <br>\r\n Estos son los datos de la transacción:\r\n </p>\r\n <i class="data">Ticket: {{ ticket }}</i>\r\n </div>\r\n\r\n <div class="pay-message info" *ngIf="paymentState === \'pending_contingency\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Estamos procesando el pago.\r\n <br>\r\n En menos de una hora te enviaremos por e-mail el resultado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message info" *ngIf="paymentState === \'pending_review_manual\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n Estamos procesando el pago.\r\n <br>\r\n En menos de 2 días hábiles te diremos por e-mail si se acreditó o si necesitamos más información.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_card_number\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa el número de tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_date\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa la fecha de vencimiento.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_other\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa los datos ingresados.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_bad_filled_security_code\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Revisa el código de seguridad.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_blacklist\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No pudimos procesar tu pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_call_for_authorize\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Debes autorizar el pago. El teléfono está al dorso de tu tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_card_disabled\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Llama para activar tu tarjeta. El teléfono está al dorso de tu tarjeta.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_card_error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No pudimos procesar tu pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_duplicated_payment\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado, ya hiciste un pago por ese valor.\r\n <br>\r\n Si necesitas volver a pagar usa otra tarjeta u otro medio de pago..\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_high_risk\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n Tu pago fue rechazado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_insufficient_amount\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_invalid_installments\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No se pudo pocesar el pago en esa cantidad de cuotas.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_max_attempts\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado! Límite de intentos permitidos.\r\n <br>\r\n Elige otra tarjeta u otro medio de pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'cc_rejected_other_reason\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n Pago Rechazado.\r\n <br>\r\n No se procesó el pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{ errorMessage }}\r\n <br>No se procesó el pago.\r\n </p>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'apiError\'">\r\n <i class="material-icons">error</i>\r\n <p>Error al procesar el pago (Vitnik).</p>\r\n </div>\r\n\r\n <button *ngIf="paymentState != \'pending_review_manual\' && paymentState != \'pending_contingency\'\r\n && paymentState != \'accredited\' && paymentState != \'processing\' && paymentState != \'unsubmitted\'" (click)="resetForm()">\r\n Limpiar formulario\r\n </button>\r\n\r\n</div>\r\n',styles:['@charset "UTF-8";.mp-payment{background-color:transparent;font-family:inherit,sans-serif}.mp-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}.warn-text{font-size:15px;color:#c62626;margin:10px 0;text-align:center}.confirm-text{font-size:15px;color:#388a22;margin:10px 0;text-align:center}.in-progress-text{font-size:15px;color:#009ee3;margin:10px 0;text-align:center}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase}.pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.pay-message i.data{font-size:.9rem;text-align:center}.pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.success{background-color:#dff2bf;color:#4f8a10}.error{color:#d8000c;background-color:#ffd2d2}.info{color:#00529b;background-color:#bde5f8}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}.responsive-img{width:100%;height:auto}']}]}],e.ctorParameters=function(){return[{type:i.Router},{type:l}]},e.propDecorators={paymentAmount:[{type:t.Input}],payerName:[{type:t.Input}],payerEmail:[{type:t.Input}],accessToken:[{type:t.Input}],vkUrlApi:[{type:t.Input}],description:[{type:t.Input}],publishableKey:[{type:t.Input}],successUrl:[{type:t.Input}],failureUrl:[{type:t.Input}],imgCreditCards:[{type:t.Input}],imgMercadoPago:[{type:t.Input}],iconExpandMore:[{type:t.Input}],debugLog:[{type:t.Input}],storeId:[{type:t.Input}],idVen:[{type:t.Input}],data:[{type:t.Input}],statusPay:[{type:t.Output}],checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}]},e}();var u=function(){function e(e){this.mercadoPagoService=e}return e.prototype.ngOnInit=function(){var e=this;this.mercadoPagoService.getMercadoPagoPromotions(this.url).subscribe(function(t){return e.cardPromotions=t})},e.decorators=[{type:t.Component,args:[{selector:"mp-promotion",template:'<div *ngIf="contentSource === \'api\'" class="payments summary">\r\n <div id="promoBancos" class="promoBancos">\r\n\r\n <div *ngFor="let promo of cardPromotions | slice:2" name="promociones" class="bank-block col-md-4 col-sm-4">\r\n <div class="banklogoContainer">\r\n <img class="img-regular img-responsive" [src]="promo.payment_methods[0].secure_thumbnail">\r\n </div>\r\n <p>\r\n <span class="issuer">{{promo.issuer.name}}</span>\r\n </p>\r\n <p>\r\n <span class="installments">{{promo.max_installments}} cuotas sin interés</span>\r\n </p>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<iframe src="https://www.mercadopago.com.ar/cuotas?iframe=true"\r\n width="100%"\r\n height="450px"\r\n scrolling="yes"\r\n frameborder="0"\r\n style="position: relative;"\r\n *ngIf="contentSource === \'iframe\'">\r\n</iframe>\r\n',styles:[""]}]}],e.ctorParameters=function(){return[{type:l}]},e.propDecorators={url:[{type:t.Input}],contentSource:[{type:t.Input}]},e}();var m=[p,u],h=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:m,exports:m,imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.RouterModule]}]}],e}(),g=function(){function e(){this.addScript=!1,this.showError=!1,this.loading=!0,this.status="",this.linkToPay="",this.linkExecutePay=""}return e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewChecked=function(){var e=this;this.addScript||this.addPaypalScript().then(function(){var t={style:{color:"blue",shape:"pill",label:"pay",height:40},commit:!0,createOrder:function(e,t){return t.order.create({purchase_units:[{amount:{value:document.getElementById("amount").value},reference_id:"'"+document.getElementById("transactionId").value+"'",custom_id:"'"+document.getElementById("storeId").value+"'"}],application_context:{shipping_preference:"NO_SHIPPING"}})},onApprove:function(e,t){return t.order.capture().then(function(e){e.data=document.getElementById("data").value,e.userid=document.getElementById("userId").value,fetch(document.getElementById("vkUrlApi").value,{method:"post",headers:{"content-type":"application/json",Authorization:"Bearer "+document.getElementById("accessToken").value},body:JSON.stringify({details:e})}).then(function(e){console.log("response-> api",e)}).then(function(){window.location.href=document.getElementById("successUrl").value})})},onError:function(e){window.location.reload()},onCancel:function(e,t){window.location.href=document.getElementById("cancelUrl").value}};paypal.Buttons(t).render("#paypal-button-container"),e.loading=!1})},e.prototype.addPaypalScript=function(){var e=this;return this.addScript=!0,new Promise(function(t,n){var r=document.createElement("script");r.src="https://www.paypal.com/sdk/js?client-id="+e.clientId+"¤cy="+e.currency,r.onload=t,document.body.appendChild(r)})},e.decorators=[{type:t.Component,args:[{selector:"paypal-new-form-pay",template:'<div *ngIf="loading">Loading...</div>\r\n<input type="hidden" id="amount" [(ngModel)]="amount">\r\n<input type="hidden" id="userId" [(ngModel)]="userId">\r\n<input type="hidden" id="storeId" [(ngModel)]="storeId">\r\n<input type="hidden" id="successUrl" [(ngModel)]="successUrl">\r\n<input type="hidden" id="cancelUrl" [(ngModel)]="cancelUrl">\r\n<input type="hidden" id="vkUrlApi" [(ngModel)]="vkUrlApi">\r\n<input type="hidden" id="transactionId" [(ngModel)]="transactionId">\r\n<input type="hidden" id="data" [(ngModel)]="data">\r\n<input type="hidden" id="accessToken" [(ngModel)]="accessToken">\r\n<div id="paypal-button-container"></div>\r\n',styles:["label{font-size:11px;color:#888;text-transform:uppercase;font-weight:500}.flex-row-wrap{display:flex;flex-flow:row wrap;flex-direction:row;justify-content:space-between;align-items:center}.flex-row-wrap div{margin:10px;width:200px;flex-grow:1}:focus{outline:0}.formRow{margin-top:10px;margin-bottom:10px}.formRow span{background-color:#fff;border:.5px solid #707070;border-radius:5px;padding:5px 10px;display:block;margin-top:7px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:13px;height:23px;width:100%;text-transform:uppercase}select{width:100%;font-size:13px;height:36px;padding:5px 10px;background-color:#fff;border:.5px solid #707070;border-radius:5px;display:block;margin-top:7px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}.warn-text{font-size:15px;color:#c62626;margin:10px 0;text-align:center}.confirm-text{font-size:15px;color:#8cd876;margin:10px 0;text-align:center}.in-progress-text{font-size:15px;color:#009ee3;margin:10px 0;text-align:center}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={accessToken:[{type:t.Input}],clientId:[{type:t.Input}],vkUrlApi:[{type:t.Input}],storeId:[{type:t.Input}],userId:[{type:t.Input}],transactionId:[{type:t.Input}],amount:[{type:t.Input}],currency:[{type:t.Input}],cancelUrl:[{type:t.Input}],successUrl:[{type:t.Input}],data:[{type:t.Input}],urlSignout:[{type:t.Input}]},e}();var f=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,a.HttpClientModule,i.RouterModule],declarations:[g],exports:[g]}]}],e}(),b=function(){function e(e){this.httpClient=e}return e.prototype.makePayment=function(e,t,n){return this._setAuthHeaders(t),this.httpClient.post(this.normalizeUrl(n)+"/Payment",e,{headers:this.authHeaders})},e.prototype.getDecidirConfigByBin=function(e,t){return this.httpClient.get(this.normalizeUrl(t)+"/GetDecidirConfigByBin?bin="+e)},e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype.getCreditCards=function(e,t,n){return this._setAuthHeaders(e),this.httpClient.get(this.normalizeUrl(t)+"/GetCreditCardsEnable?domainId="+n,{headers:this.authHeaders})},e.prototype.getPlansByCreditCardId=function(e,t,n,r,i,a){this._setAuthHeaders(e);var o={amount:n,creditCardId:r,domainId:i,bin:a};return this.httpClient.post(this.normalizeUrl(t)+"/CalculateAmountInInstallments",o,{headers:this.authHeaders})},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var y=function(){function e(e,n){this.router=e,this.spsDecidirApiService=n,this.language="es",this.statusPay=new t.EventEmitter,this.disabled=!1,this.disableSelect=!1,this.selectCreditCardPlan=null,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.submitPressed=!1,this.invalidDate=!1,this.addScript=!0,this.paymentState="unsubmitted",this.issuer=null}return e.prototype.ngOnInit=function(){this.initDecidir()},e.prototype.ngOnChanges=function(e){e.paymentAmount.isFirstChange()||(this.checkOutForm.reset(),this.disabled=!1,this.disableSelect=!1)},e.prototype.initDecidir=function(){var e=this;this.addDecidirScript().then(function(){e.getCreditCards(),e.initializeSpsDecidir()})},e.prototype.addDecidirScript=function(){return this.addScript=!0,new Promise(function(e){var t=document.createElement("script");t.src="https://live.decidir.com/static/v2.4/decidir.js",t.onload=e,document.body.appendChild(t)})},e.prototype.getCreditCards=function(){var e=this;this.spsDecidirApiService.getCreditCards(this.accessToken,this.vkUrlApi,this.domainId).subscribe(function(t){e.creditCards=t.data,e.logger("getCreditCards",e.creditCards)},function(t){return e.paymentState="apiError"})},e.prototype.getPlansByCreditCardId=function(e,t,n,r){var i=this;this.spsDecidirApiService.getPlansByCreditCardId(this.accessToken,this.vkUrlApi,e,t,n,r).subscribe(function(e){i.creditCardPlans=e.data,i.logger("getPlansByCreditCardId",i.creditCardPlans)},function(e){return i.paymentState="apiError"})},e.prototype.initializeSpsDecidir=function(){this.decidir=new Decidir(this.spsDecidirApiService.normalizeUrl(this.spsUrlApi),!this.useCybersource),this.decidir.setTimeout(15e3),this.decidir.setPublishableKey(this.defaultPublishableKey)},e.prototype.logger=function(e,t){this.debugLog&&console.log(e,t)},e.prototype.selectedCreditCard=function(){this.issuer&&(this.selectCreditCardPlan=null,"ARS"!==this.currency||"00000000"===this.cardText.substring(0,8)?(this.cardText="","USD"===this.currency&&(this.totalAmount=this.totalFinancedAmount=this.paymentAmount)):this.getPlansByCreditCardId(this.paymentAmount,this.issuer,this.domainId,this.cardText.substring(0,8)))},e.prototype.selectedCreditCardPlan=function(){null!==this.selectCreditCardPlan&&(this.totalFinancedAmount=this.selectCreditCardPlan.totalAmount,this.totalAmount=this.paymentAmount,this.currentTEA=this.selectCreditCardPlan.tna,this.currentCFT=this.selectCreditCardPlan.cft)},e.prototype.onSubmit=function(e){var t=this;e.preventDefault(),this.submitPressed=!0,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.checkOutForm.valid&&(this.paymentState="processing",this.spsDecidirApiService.getDecidirConfigByBin(this.cardText.substring(0,8),this.vkUrlApi).subscribe(function(e){"SPS-Decidir-Supervielle"==e?t.decidir.setPublishableKey(t.superviellePublishableKey):t.decidir.setPublishableKey(t.defaultPublishableKey);var n=document.querySelector("#formulario");t.decidir.createToken(n,function(e,r){200!==e&&201!==e?(t.paymentState="error",t.statusPay.emit(t.paymentResult),t.processErrorToken(r)):t.makePayment(n,r)})}))},e.prototype.makePayment=function(e,t){var n=this;this.logger("makePayment:",JSON.stringify(t));var r=this.hashText(this.cardText,1e5);this.payment={token:t.id,amount:this.totalAmount,totalFinancedAmount:this.totalFinancedAmount,bin:t.bin,currency:"ARS",documentNumber:"USD"===this.currency?"0":t.cardholder.identification.number,idVen:this.idVen,paymentType:"single",installments:"USD"===this.currency?1:this.selectCreditCardPlan.installments,creditCardPlanId:"USD"===this.currency?0:this.selectCreditCardPlan.id,paymentMethodId:this.issuer,cardholder:this.payerNameText,storeId:this.storeId,data:this.data,subPayments:[],creditCardHash:r,lastFourDigits:this.cardText.slice(-4)},this.logger("payment:",JSON.stringify(this.payment)),this.spsDecidirApiService.makePayment(this.payment,this.accessToken,this.vkUrlApi).subscribe(function(e){n.paymentResponseHandler(e)},function(e){n.statusPay.emit(n.paymentResult),n.paymentState="apiError",console.error(e)})},e.prototype.hashText=function(e,t){for(var n=e,r=0;r<t;r++)n=o(n);return n},e.prototype.paymentResponseHandler=function(e){if(this.logger("paymentResponseHandler:",JSON.stringify(e)),e.success){if(this.paymentState="success",this.paymentSuccessInfo=e.data,this.paymentResult={success:!0,paymentId:this.paymentSuccessInfo.payment_id,integrator:"DECIDIR"},this.statusPay.emit(this.paymentResult),this.disabled=!0,this.disableSelect=!0,this.successUrl&&this.successUrl.length>0)return void this.router.navigate([""+this.successUrl]).then()}else if(this.paymentState="error",this.statusPay.emit(this.paymentResult),this.processErrorMessage(e.data),this.failureUrl&&this.failureUrl.length>0)return void this.router.navigate([""+this.failureUrl]).then()},e.prototype.processErrorToken=function(e){var t=this;this.disabled=!0,this.disableSelect=!0;var n=e;n.error.forEach(function(e){"invalid_expiry_date"===e.error.type?t.errorMessage="Revisá la fecha de vencimiento.":t.errorMessage=JSON.stringify(n)})},e.prototype.processErrorMessage=function(e){if(this.disabled=!0,this.disableSelect=!0,e.error)this.errorMessage=e.error.reason.description,e.error.reason.additional_description&&(this.errorMessage=this.errorMessage+" - "+e.error.reason.additional_description),""!=this.errorMessage&&null!=this.errorMessage||(this.errorMessage=JSON.stringify(e));else if(e.error_type)switch(e.error_type){case"invalid_request_error":if(e.validation_errors.length>0&&"invalid_param"===e.validation_errors[0].code)switch(e.validation_errors[0].param){case"card_number":case"bin":this.errorMessage="Tarjeta inválida";break;default:this.errorMessage=e.error.reason.description,""!=this.errorMessage&&null!=this.errorMessage||(this.errorMessage=JSON.stringify(e))}break;case"not_found_error":this.errorMessage="Datos no encontrados (404).";break;case"authentication_error":this.errorMessage="Error (401).";break;case"malformed_request_error":this.errorMessage="Error al enviar los datos (400).";break;case"api_error":this.errorMessage="Error interno (409).";break;default:this.errorMessage=JSON.stringify(e)}},e.prototype.compareDate=function(e,t,n){var r=new Date(e,t,n),i=new Date;return r.getTime()===i.getTime()?0:r>i?1:r<i?-1:void 0},e.prototype.onYearChange=function(){var e=this;Number.isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onYearBlur=function(e){var t=this;this.compareDate(Number("20"+this.yearText),Number(this.monthText),(new Date).getDate())<0?setTimeout(function(){t.yearText="",t.invalidDate=!0,e.target.focus()}):this.invalidDate=!1},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"===this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;Number.isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""}),this.cvcText.search(" ")>-1&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;Number.isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""}),this.dniText.search(" ")>-1&&setTimeout(function(){e.dniText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.payerNameText)||setTimeout(function(){e.payerNameText=""})},e.prototype.onCardChange=function(){var e=this;Number.isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""}),this.cardText.search(" ")>-1&&setTimeout(function(){e.cardText=""}),this.cardText.length<8?(this.disableSelect=!0,this.issuer=null):this.disableSelect=!1,8===this.cardText.length&&"00000000"!==this.cardText&&this.setCreditType(this.cardText)},e.prototype.setCreditType=function(e){e.length<8?this.issuer=null:8===e.length&&(this.issuer=null,"4770"===e.substring(0,4)||"442548"===e.substring(0,6)||"406809"===e.substring(0,6)||"408738"===e.substring(0,6)||"411521"===e.substring(0,6)||"411663"===e.substring(0,6)||"426359"===e.substring(0,6)||"429780"===e.substring(0,6)||"438267"===e.substring(0,6)||"461187"===e.substring(0,6)||"500334"===e.substring(0,6)||"509413"===e.substring(0,6)||"512285"===e.substring(0,6)||"512881"===e.substring(0,6)||"518635"===e.substring(0,6)||"538449"===e.substring(0,6)||"550553"===e.substring(0,6)||"566057"===e.substring(0,6)||"567933"===e.substring(0,6)||"572140"===e.substring(0,6)||"584257"===e.substring(0,6)||"598718"===e.substring(0,6)||"605801"===e.substring(0,6)||"606120"===e.substring(0,6)||"631057"===e.substring(0,6)||"676215"===e.substring(0,6)||"713274"===e.substring(0,6)||"713284"===e.substring(0,6)||"717515"===e.substring(0,6)||"748761"===e.substring(0,6)||"753371"===e.substring(0,6)||"753600"===e.substring(0,6)||"912394"===e.substring(0,6)||"916148"===e.substring(0,6)||"916773"===e.substring(0,6)||"923405"===e.substring(0,6)||"930965"===e.substring(0,6)||"934091"===e.substring(0,6)||"935761"===e.substring(0,6)||"943313"===e.substring(0,6)||"945721"===e.substring(0,6)||"948809"===e.substring(0,6)||"960644"===e.substring(0,6)||"969085"===e.substring(0,6)||"970167"===e.substring(0,6)||"978061"===e.substring(0,6)||"40267919"===e.substring(0,8)||"40327176"===e.substring(0,8)||"40416004"===e.substring(0,8)||"40421933"===e.substring(0,8)||"40451556"===e.substring(0,8)||"40541010"===e.substring(0,8)||"40623835"===e.substring(0,8)||"40733469"===e.substring(0,8)||"40733586"===e.substring(0,8)||"40872498"===e.substring(0,8)||"45007789"===e.substring(0,8)||"45024822"===e.substring(0,8)||"45034751"===e.substring(0,8)||"45046987"===e.substring(0,8)||"45060549"===e.substring(0,8)||"45062482"===e.substring(0,8)||"45070071"===e.substring(0,8)||"45084708"===e.substring(0,8)||"45091433"===e.substring(0,8)||"45100902"===e.substring(0,8)||"45103869"===e.substring(0,8)||"45131047"===e.substring(0,8)||"45168884"===e.substring(0,8)||"45174306"===e.substring(0,8)||"45184611"===e.substring(0,8)||"45191921"===e.substring(0,8)||"45201881"===e.substring(0,8)||"45206401"===e.substring(0,8)||"45245294"===e.substring(0,8)||"45314944"===e.substring(0,8)||"45317847"===e.substring(0,8)||"45357409"===e.substring(0,8)||"45374587"===e.substring(0,8)||"45394705"===e.substring(0,8)||"45456584"===e.substring(0,8)||"45541924"===e.substring(0,8)||"45545795"===e.substring(0,8)||"45567746"===e.substring(0,8)||"45583759"===e.substring(0,8)||"45648838"===e.substring(0,8)||"45672506"===e.substring(0,8)||"45678421"===e.substring(0,8)||"45710756"===e.substring(0,8)||"45716006"===e.substring(0,8)||"45725029"===e.substring(0,8)||"45732113"===e.substring(0,8)||"45732698"===e.substring(0,8)||"45793917"===e.substring(0,8)||"45841185"===e.substring(0,8)||"45862021"===e.substring(0,8)||"45915336"===e.substring(0,8)||"45971496"===e.substring(0,8)?this.issuer=31:"51"===e.substring(0,2)||"52"===e.substring(0,2)||"53"===e.substring(0,2)||"54"===e.substring(0,2)||"55"===e.substring(0,2)?this.issuer=104:"589562"===e.substring(0,6)?this.issuer=24:"4"===e.substring(0,1)&&(this.issuer=1),this.selectedCreditCard())},e.prototype.onPaste=function(){return!1},e.prototype.resetForm=function(){this.disabled=!1,this.disableSelect=!1,this.totalAmount,this.totalFinancedAmount=void 0,this.currentTEA=void 0,this.currentCFT=void 0,this.creditCards=void 0,this.selectCreditCardPlan=null,this.creditCardPlans=void 0,this.paymentResult={success:!1,paymentId:"",integrator:"DECIDIR"},this.monthText=void 0,this.yearText=void 0,this.cvcText=void 0,this.dniText=void 0,this.payerNameText=void 0,this.cardText=void 0,this.submitPressed=!1,this.invalidDate=!1,this.decidir=void 0,this.addScript=!0,this.paymentState="unsubmitted",this.payerName=void 0,this.issuer=null,this.payment=void 0,this.paymentSuccessInfo=void 0,this.errorMessage=void 0,this.initDecidir()},e.decorators=[{type:t.Component,args:[{selector:"sps-form-pay",template:'\x3c!-- https://github.com/decidir/sdk-javascript-v2 --\x3e\r\n\r\n<form action="" method="POST" id="formulario" #f="ngForm" autocomplete="off">\r\n \x3c!-- Numero de tarjeta --\x3e\r\n <div class="formRow">\r\n <label for="card_number">{{ language.toLowerCase() === \'en\' ? \'Card number\' : \'Número de Tarjeta\' }}</label>\r\n <span>\r\n <input id="card_number"\r\n type="text"\r\n name="card"\r\n placeholder="{{ language.toLowerCase() === \'en\' ? \'Card number\' : \'Número de Tarjeta\' }}"\r\n minlength="12"\r\n maxlength="19"\r\n pattern="[0-9]*"\r\n data-decidir="card_number"\r\n required\r\n (input)="onCardChange()"\r\n (paste)="onPaste()"\r\n [disabled]="disabled"\r\n [(ngModel)]="cardText"\r\n #card="ngModel" />\r\n </span>\r\n <p class="alert-text" *ngIf="card.errors?.required && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el número de tarjeta\' }}\r\n </p>\r\n <p class="alert-text" *ngIf="card.errors?.minlength && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Requiere 13 digitos mínimo\' }}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Card-issuer --\x3e\r\n <div class="formRow">\r\n <label>{{ language.toLowerCase() === \'en\' ? \'Pay with\' : \'Pagar con\' }}</label>\r\n <div class="select-icon">\r\n <select name="iss"\r\n required\r\n #iss="ngModel"\r\n [disabled]="disableSelect"\r\n (change)="selectedCreditCard()"\r\n [(ngModel)]="issuer">\r\n <option [value]="null" selected disabled>\r\n {{ language.toLowerCase() === \'en\' ? \'SELECT...\' : \'Sin Seleccionar...\' }}\r\n </option>\r\n <ng-container *ngIf="currency === \'USD\'; else credCardsArgTemplate">\r\n <option [value]="1">Visa</option>\r\n <option [value]="15">MasterCard</option>\r\n </ng-container>\r\n <ng-template #credCardsArgTemplate>\r\n <option [ngValue]="item.id" *ngFor="let item of creditCards">{{item.name}}</option>\r\n </ng-template>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="iss.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Seleccioná el emisor de la tarjeta\' }}\r\n </p>\r\n </div>\r\n\r\n <div class="formRow">\r\n <div class="form-row-2col">\r\n \x3c!-- Expiry-month--\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Month of expiration\' : \'Mes de expiración\' }}\r\n </label>\r\n <span>\r\n <input type="text"\r\n name="month"\r\n placeholder="MM"\r\n minlength="2"\r\n maxlength="2"\r\n data-decidir="card_expiration_month"\r\n required\r\n [disabled]="disabled"\r\n (input)="onMonthChange()"\r\n (focusout)="onMonthLostFocus()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="monthText"\r\n #month="ngModel" />\r\n </span>\r\n </div>\r\n \x3c!-- Expiry-year--\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Year of expiration\' : \'Año de expiración\' }}\r\n </label>\r\n <span>\r\n <input type="text"\r\n name="year"\r\n placeholder="AA"\r\n minlength="2"\r\n maxlength="2"\r\n data-decidir="card_expiration_year"\r\n required\r\n [disabled]="disabled"\r\n (input)="onYearChange()"\r\n (blur)="onYearBlur($event)"\r\n (paste)="onPaste()"\r\n [(ngModel)]="yearText"\r\n #year="ngModel"/>\r\n </span>\r\n </div>\r\n </div>\r\n <p class="alert-text" *ngIf="month.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el mes de vencimiento de la tarjeta\' }}</p>\r\n <p class="alert-text" *ngIf="year.invalid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el año de vencimiento de la tarjeta\' }}</p>\r\n <p class="alert-text" *ngIf="invalidDate">\r\n {{ language.toLowerCase() === \'en\' ? \'Enter a valid expiration date\' : \'La fecha de la tarjeta ingresada está vencida\'}}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Card-name --\x3e\r\n <div class="formRow">\r\n <label>\r\n {{ language.toLowerCase() === \'en\' ? \'Holder name\' : \'Nombre y apellido impreso en la tarjeta\' }}\r\n </label>\r\n\r\n <span>\r\n <input type="text"\r\n name="payername"\r\n placeholder="{{language.toLowerCase() === \'en\' ? \'Holder name\' : \'TITULAR\'}}" value="{{payerName}}"\r\n maxlength="22"\r\n data-decidir="card_holder_name"\r\n required\r\n [disabled]="disabled"\r\n (input)="onPayerNameChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="payerNameText"\r\n #payername="ngModel" />\r\n </span>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!payername.valid && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el nombre del titular de la tarjeta\' }}\r\n </p>\r\n </div>\r\n\r\n <div class="formRow" *ngIf="currency === \'USD\'">\r\n <input type="hidden" data-decidir="card_holder_doc_type" name="type">\r\n <input type="hidden" data-decidir="card_holder_doc_number" name="dni">\r\n </div>\r\n\r\n\r\n <div class="formRow" *ngIf="currency === \'ARS\'">\r\n <label for="card_holder_doc_type">Número de documento del titular</label>\r\n <div class="form-row-2col">\r\n \x3c!-- Tipo de documento--\x3e\r\n <div class="formRow">\r\n <div class="select-icon">\r\n <select data-decidir="card_holder_doc_type" ngModel required #type="ngModel" name="type"\r\n [disabled]="disabled">\r\n <option value="" disabled selected>Seleccionar...</option>\r\n <option value="dni">DNI</option>\r\n <option value="cuil">CUIL</option>\r\n </select>\r\n </div>\r\n </div>\r\n \x3c!-- DNI --\x3e\r\n <div class="formRow">\r\n <span>\r\n <input id="card_holder_doc_type"\r\n type="text"\r\n name="dni"\r\n minlength="7"\r\n maxlength="11"\r\n data-decidir="card_holder_doc_number"\r\n required\r\n [disabled]="disabled"\r\n (input)="onDniChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="dniText"\r\n #dni="ngModel" />\r\n </span>\r\n </div>\r\n </div>\r\n <p class="alert-text" *ngIf="type.invalid && submitPressed">Seleccioná tipo de documento</p>\r\n <p class="alert-text" *ngIf="dni.errors?.minlength && submitPressed">Requiere 7 digitos mínimo</p>\r\n <p class="alert-text" *ngIf="dni.errors?.required && submitPressed">Completá el número de documento</p>\r\n </div>\r\n \x3c!-- CVV --\x3e\r\n <div class="formRow">\r\n <label for="security_code">{{ language.toLowerCase() === \'en\' ? \'CSC\' : \'Código de seguridad\' }}</label>\r\n <span>\r\n <input id="security_code"\r\n type="password"\r\n name="cvc"\r\n placeholder="CSC"\r\n minlength="3"\r\n maxlength="4"\r\n data-decidir="security_code"\r\n required\r\n [disabled]="disabled"\r\n (input)="onCodeChange()"\r\n (paste)="onPaste()"\r\n [(ngModel)]="cvcText"\r\n #cvc="ngModel" />\r\n </span>\r\n <p class="alert-text" *ngIf="cvc.errors?.minlength && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Enter a valid csc\' : \'Requiere 3 digitos mínimo\' }}\r\n </p>\r\n <p class="alert-text" *ngIf="cvc.errors?.required && submitPressed">\r\n {{ language.toLowerCase() === \'en\' ? \'Required\' : \'Completá el código de seguridad\' }}\r\n </p>\r\n </div>\r\n\r\n \x3c!-- Cuotas --\x3e\r\n <ng-container *ngIf="currency === \'ARS\'">\r\n <div class="formRow">\r\n <label>Cuotas</label>\r\n <div class="select-icon">\r\n <select name="ins"\r\n required\r\n [disabled]="disabled"\r\n [(ngModel)]="selectCreditCardPlan"\r\n (change)="selectedCreditCardPlan()"\r\n #ins="ngModel">\r\n <option [value]="null" selected disabled>Sin Seleccionar...</option>\r\n <option [ngValue]="item" *ngFor="let item of creditCardPlans">{{ item.description }}</option>\r\n </select>\r\n </div>\r\n <p class="alert-text" *ngIf="ins.invalid && submitPressed">Seleccioná cantidad de cuotas</p>\r\n </div>\r\n </ng-container>\r\n\r\n <div>\r\n <div>\r\n <div class="amount-resume" *ngIf="f.valid">\r\n <ng-container *ngIf="currency === \'ARS\'">\r\n <p>Total al contado</p>\r\n <h1>$ {{ totalAmount | number:\'2.2-2\' }}</h1>\r\n <p>Total financiado</p>\r\n <h3>$ {{ totalFinancedAmount | number:\'2.2-2\'}}</h3>\r\n <p>TEA: {{ currentTEA }}%</p>\r\n <p>CFT: {{ currentCFT }}%</p>\r\n </ng-container>\r\n <ng-container *ngIf="currency === \'USD\'">\r\n <p>Total</p>\r\n <h1>{{ labelButton }}</h1>\r\n </ng-container>\r\n <div *ngIf="paymentState === \'unsubmitted\'">\r\n <button *ngIf="currency === \'ARS\'" type="submit" (click)="onSubmit($event)">\r\n Pagar ${{ totalFinancedAmount | number:\'2.2-2\' }}\r\n </button>\r\n\r\n <button *ngIf="currency === \'USD\'" type="submit" (click)="onSubmit($event)">\r\n {{ labelButton }}\r\n </button>\r\n </div>\r\n <div *ngIf="paymentState === \'success\' || paymentState === \'processing\'">\r\n <button *ngIf="currency === \'ARS\'" disabled>Pagar $ {{totalFinancedAmount | number:\'2.2-2\'}}</button>\r\n <button *ngIf="currency === \'USD\'" disabled>{{ labelButton }}</button>\r\n </div>\r\n </div>\r\n <p [hidden]="disabled" class="alert-text" *ngIf="!f.valid">\r\n {{ language.toLowerCase() === \'en\' ? \'Complete all fields\' : \'Completá los campos faltantes\' }}\r\n </p>\r\n <div *ngIf="!f.valid && paymentState !== \'success\' && paymentState !== \'apiError\' && paymentState !== \'error\'">\r\n <button *ngIf="currency === \'ARS\'" type="submit" (click)="onSubmit($event)">Pagar $\r\n {{ paymentAmount | number:\'2.2-2\' }}\r\n </button>\r\n <button *ngIf="currency === \'USD\'" type="submit" (click)="onSubmit($event)">\r\n {{ labelButton }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class="logo">\r\n <img [src]="logoSps" alt="SPS Decidir" class="responsive-img" style="width: 50px;">\r\n </div>\r\n <div>\r\n <div class="pay-message info" *ngIf="paymentState === \'processing\'">\r\n <i class="material-icons">info</i>\r\n <p>\r\n {{ language.toLowerCase() === \'en\' ? \'Processing payment...\' : \'Procesando pago...\' }}\r\n </p>\r\n </div>\r\n <div class="pay-message error" *ngIf="paymentState === \'error\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{errorMessage}}\r\n <br>\r\n {{ language.toLowerCase() === \'en\' ? \'Error processing the payment\' : \'No se procesó el pago\' }}\r\n </p>\r\n </div>\r\n <div *ngIf="language.toLowerCase() !== \'en\' && paymentState === \'success\'" class="pay-message success">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Tu pago se ha confirmado!\r\n <br>\r\n Estos son los datos de la transacción:\r\n </p>\r\n <i class="data">Nro. de Pago: {{paymentSuccessInfo.payment_id}}</i>\r\n <i class="data">Ticket: {{paymentSuccessInfo.ticket}}</i>\r\n <i class="data">Cod. Autorización: {{paymentSuccessInfo.card_authorization_code}}</i>\r\n </div>\r\n\r\n <div *ngIf="language.toLowerCase() === \'en\' && paymentState === \'success\'" class="pay-message success">\r\n <i class="material-icons">check_circle</i>\r\n <p>\r\n Your payment has been confirmed!\r\n <br>\r\n These are the transaction data:\r\n </p>\r\n <i class="data">Payment No.: {{paymentSuccessInfo.payment_id}}</i>\r\n <i class="data">Ticket: {{paymentSuccessInfo.ticket}}</i>\r\n <i class="data">Authorization Code: {{paymentSuccessInfo.card_authorization_code}}</i>\r\n </div>\r\n\r\n <div class="pay-message error" *ngIf="paymentState === \'apiError\'">\r\n <i class="material-icons">error</i>\r\n <p>\r\n {{ language.toLowerCase() === \'en\' ? \'Error processing the payment (Vitnik)\' : \'Error al procesar el pago (Vitnik)\'}}\r\n </p>\r\n </div>\r\n\r\n <button *ngIf="language.toLowerCase() === \'es\' && (paymentState === \'apiError\' || paymentState === \'error\')" (click)="resetForm()">\r\n Limpiar formulario\r\n </button>\r\n <button *ngIf="language.toLowerCase() === \'en\' && (paymentState === \'apiError\' || paymentState === \'error\')" (click)="resetForm()">\r\n Clear form\r\n </button>\r\n\r\n </div>\r\n</form>\r\n',styles:['@charset "UTF-8";.flex-row-wrap{display:flex;flex-flow:row wrap;flex-direction:row;justify-content:space-between;align-items:center}.flex-row-wrap div{margin:10px;width:200px;flex-grow:1}#formulario{background-color:transparent;font-family:inherit,sans-serif}#formulario label{font-size:14px;color:#888}.formRow{margin-top:10px}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:5px;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:15px;color:#009ee3;margin-top:7px;margin-bottom:0}:focus{outline:0}.pay-message{margin-top:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.pay-message p{font-size:1.1rem;text-align:center;line-height:130%;margin-bottom:10px}.pay-message i.data{font-size:.9rem;text-align:center}.pay-message i.material-icons{font-size:2rem;margin-bottom:5px}.success{background-color:#dff2bf;color:#4f8a10}.error{color:#d8000c;background-color:#ffd2d2}.info{color:#00529b;background-color:#bde5f8}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252;cursor:default}.amount-resume h1,.amount-resume h3{margin-top:0;margin-bottom:10px}.amount-resume p{font-size:13px;color:#525252;margin:5px 0;text-transform:uppercase;line-height:130%}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}.responsive-img{width:100%;height:auto}']}]}],e.ctorParameters=function(){return[{type:i.Router},{type:b}]},e.propDecorators={checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}],accessToken:[{type:t.Input}],spsUrlApi:[{type:t.Input}],vkUrlApi:[{type:t.Input}],paymentAmount:[{type:t.Input}],logoSps:[{type:t.Input}],currency:[{type:t.Input}],defaultPublishableKey:[{type:t.Input}],superviellePublishableKey:[{type:t.Input}],successUrl:[{type:t.Input}],failureUrl:[{type:t.Input}],useCybersource:[{type:t.Input}],debugLog:[{type:t.Input}],storeId:[{type:t.Input}],domainId:[{type:t.Input}],idVen:[{type:t.Input}],data:[{type:t.Input}],labelButton:[{type:t.Input}],language:[{type:t.Input}],statusPay:[{type:t.Output}]},e}();var x=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,r.FormsModule,a.HttpClientModule,i.RouterModule],declarations:[y],exports:[y]}]}],e}(),v=function(){function e(e){this.httpClient=e}return e.prototype.normalizeUrl=function(e){return e.length>0&&"/"==e.charAt(e.length-1)&&(e=e.substr(0,e.length-1)),e},e.prototype.initPayment=function(e,t,n){this._setAuthHeaders(e);var r={cardholder:n.cardholder,creditCardHash:n.creditCardHash,amount:n.amount,installments:n.installments,documentNumber:n.documentNumber,areaCode:n.areaCode,phoneNumber:n.phoneNumber,idVen:n.idVen,storeId:n.storeId,data:n.data};return this.httpClient.post(this.normalizeUrl(t)+"/init-payment",r,{headers:this.authHeaders})},e.prototype.getOrders=function(e,t){return this._setAuthHeaders(e),this.httpClient.get(this.normalizeUrl(t)+"/orders",{headers:this.authHeaders})},e.prototype.payment=function(e,t,n){this._setAuthHeaders(e);var r={id:n.id,cardholder:n.cardholder,sale_token:n.sale_token,code:n.code,creditCardHash:n.creditCardHash,cardMonthExpiration:n.cardMonthExpiration,cardYearExpiration:n.cardYearExpiration,cardSecurityCode:n.cardSecurityCode,idVen:n.idVen,storeId:n.storeId};return this.httpClient.post(this.normalizeUrl(t)+"/payment",r,{headers:this.authHeaders})},e.prototype._setAuthHeaders=function(e){var t="Bearer "+e;this.authHeaders=new a.HttpHeaders({"Content-Type":"application/json",Authorization:t})},e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[{type:a.HttpClient}]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e(t.ɵɵinject(a.HttpClient))},token:e,providedIn:"root"}),e}();var C=function(){function e(){this.modalVisible=!1,this.verificationCode="",this.codeVerified=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.verificationCode=""},e.prototype.openModal=function(){this.verificationCode="",this.modalVisible=!0,document.body.style.overflow=""},e.prototype.closeModal=function(){this.modalVisible=!1,document.body.style.overflow="hidden"},e.prototype.onSubmitCode=function(){this.verificationCode?(console.log("Código ingresado:",this.verificationCode),this.codeVerified.emit(this.verificationCode),this.modalVisible=!1):alert("Por favor ingrese el código.")},e.prototype.onVerificationCodeChange=function(){var e=this;isNaN(+this.verificationCode)&&setTimeout(function(){e.verificationCode=""})},e.decorators=[{type:t.Component,args:[{selector:"lib-modal",template:'<div class="custom-modal-overlay" [ngClass]="{ show: modalVisible }" *ngIf="modalVisible">\n <div class="custom-modal">\n <div class="custom-modal-header">\n <h5 class="custom-modal-title">Ingrese el código</h5>\n <button type="button" class="custom-modal-close" (click)="closeModal()">\n ×\n </button>\n </div>\n <div class="custom-modal-body">\n <form (ngSubmit)="onSubmitCode()">\n <div class="form-group">\n <label for="verificationCode">Código de verificación:</label>\n <input type="text" class="custom-input" id="verificationCode" [(ngModel)]="verificationCode" name="verificationCode"\n required minlength="4" maxlength="4" (input)="onVerificationCodeChange()" #verificationCodeInput="ngModel"/>\n </div>\n\n <div *ngIf="verificationCodeInput.invalid && verificationCodeInput.touched" class="error-message">\n <p *ngIf="verificationCodeInput.errors && verificationCodeInput.errors.minlength"\n >El código debe tener 4 caracteres.\n </p>\n <p *ngIf="verificationCodeInput.errors && verificationCodeInput.errors.minlength">\n El código debe tener 4 caracteres.\n </p>\n </div>\n\n <button type="submit" class="custom-button" [disabled]="verificationCodeInput.invalid">\n Verificar\n </button>\n </form>\n </div>\n </div>\n</div>\n',styles:[".custom-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none;z-index:1050}.custom-modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.custom-modal{background-color:#fff;border-radius:8px;width:90%;max-width:400px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;-webkit-animation:.3s ease-out fadeIn;animation:.3s ease-out fadeIn;z-index:1060}.custom-modal-header{background-color:#009ee3;color:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center}.custom-modal-title{margin:0;font-size:18px;font-weight:700}.custom-modal-close{background:0 0;border:none;font-size:24px;color:#fff;cursor:pointer}.custom-modal-body{padding:20px}.custom-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px;margin-top:5px;box-sizing:border-box}.custom-button{background-color:#009ee3;color:#fff;border:none;border-radius:4px;padding:10px 20px;font-size:16px;cursor:pointer;margin-top:15px;display:block;width:100%;text-align:center;transition:background-color .3s}.custom-button:hover{background-color:#009ee3}.error-message{color:red;font-size:14px;margin-top:5px}.custom-input.ng-touched.ng-invalid{border-color:red}@-webkit-keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={codeVerified:[{type:t.Output}]},e}();var I=function(){function e(e){this.snackbar=e}return e.prototype.hideNotification=function(){this.snackbar.dismiss()},e.prototype.showSnackBarMessage=function(e,t){this.snackbar.open(e,void 0,{duration:t})},e.prototype.showSuccess=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["success-snackbar"]})},e.prototype.showError=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["error-snackbar"]})},e.prototype.showWarning=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["warning-snackbar"]})},e.prototype.showInfo=function(e,t){this.snackbar.open(t+" "+e,void 0,{duration:6e3,panelClass:["info-snackbar"]})},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[{type:s.MatSnackBar}]},e}();var T=function(){function e(e,t){this.goCuotasApiService=e,this.notificationService=t,this.sale_token="",this.error_message="",this.paymentCompleted=!1,this.loadingMessage="Iniciando el pago...",this.paymentStatus="ok",this.disabled=!1,this.submitted=!1,this.isLoading=!1,this.hasError=!1,this.paymentResult={success:!1,paymentId:"",integrator:"GOCUOTAS"}}return e.prototype.ngOnInit=function(){this.defaultDocType="",this.installments=0,this.currentInstallments=[{value:2,label:"2 Cuotas"},{value:3,label:"3 Cuotas"},{value:4,label:"4 Cuotas"}],this.totalAmount=Number(this.paymentAmount)},e.prototype.onSubmit=function(e){e.preventDefault(),this.submitted=!0,this.checkOutForm.valid&&(this.isLoading=!0,this.paymentCompleted=!1,this.loadingMessage="Iniciando el pago...",this.paymentResult={success:!1,paymentId:"",integrator:"GOCUOTAS"},this.OinitPayment={amount:100*Number(this.paymentAmount),areaCode:this.codAreaText,installments:this.installments,documentNumber:this.dniText,phoneNumber:this.telText,cardholder:this.defaultName,creditCardHash:this.cardText,idVen:this.idVen,storeId:this.storeId},this.initPayment())},e.prototype.initPayment=function(){var e=this;this.isLoading=!0,this.loadingMessage="Enviando código...",this.goCuotasApiService.initPayment(this.accessToken,this.vkUrlApi,this.OinitPayment).subscribe({next:function(t){return e.initPaymentResponseHandler(t)},error:function(t){return e.ResponseHandlerError(t)}})},e.prototype.initPaymentResponseHandler=function(e){e.success?(this.Opayment={id:e.data.paymentId,cardholder:this.defaultName,sale_token:e.data.response.sale_token,creditCardHash:this.cardText,cardMonthExpiration:Number(this.monthText),cardYearExpiration:Number(this.yearText),cardSecurityCode:Number(this.cvcText),idVen:this.idVen,storeId:this.storeId},this.isLoading=!1,this.modal.openModal(),this.paymentStatus="sentCode"):this.error_message=e.errorsMessages[0]},e.prototype.onCodeSent=function(e){this.isLoading=!0,this.loadingMessage="Procesando pago...",this.Opayment.code=Number(e),null!==e&&this.finishPayment()},e.prototype.finishPayment=function(){var e=this;this.paymentStatus="ok",this.goCuotasApiService.payment(this.accessToken,this.vkUrlApi,this.Opayment).subscribe({next:function(t){return e.FinishPaymentResponseHandler(t)},error:function(t){return e.ResponseHandlerError(t)}})},e.prototype.ResponseHandlerError=function(e){if(!e.ok&&null===e.error&&500===e.status)return this.error_message="Error en el servidor. Vuelva a intentar más tarde.",this.isLoading=!1,void(this.hasError=!0);this.error_message=e.error.errorsMessages[0],this.isLoading=!1,this.hasError=!0},e.prototype.FinishPaymentResponseHandler=function(e){console.log("respuesta finishpayment: ",e),this.paymentStatus="ok",e.success?(console.log("Pago aprobado"),this.loadingMessage="¡Pago procesado correctamente!",this.paymentCompleted=!0):this.error_message=e.errorsMessages[0]},e.prototype.restartForm=function(){this.hasError=!1,this.submitted=!1,this.paymentStatus="ok",this.checkOutForm.reset(),this.installments=0,this.defaultDocType=""},e.prototype.onYearChange=function(){var e=this;isNaN(+this.yearText)&&setTimeout(function(){e.yearText=""})},e.prototype.onMonthLostFocus=function(){+this.monthText>0&&!isNaN(+this.monthText)&&"1"==this.monthText&&(this.monthText="01")},e.prototype.onMonthChange=function(){var e=this;if(+this.monthText>=0&&+this.monthText<13&&!isNaN(+this.monthText))switch(this.monthText){case"2":this.monthText="02";break;case"3":this.monthText="03";break;case"4":this.monthText="04";break;case"5":this.monthText="05";break;case"6":this.monthText="06";break;case"7":this.monthText="07";break;case"8":this.monthText="08";break;case"9":this.monthText="09"}else setTimeout(function(){e.monthText=""})},e.prototype.onCodeChange=function(){var e=this;isNaN(+this.cvcText)&&setTimeout(function(){e.cvcText=""})},e.prototype.onDniChange=function(){var e=this;isNaN(+this.dniText)&&setTimeout(function(){e.dniText=""})},e.prototype.onMailChange=function(){var e=this;isNaN(+this.mailText)||setTimeout(function(){e.mailText=""})},e.prototype.onCodAreaChange=function(){var e=this;isNaN(+this.codAreaText)&&setTimeout(function(){e.codAreaText=""})},e.prototype.onTelChange=function(){var e=this;isNaN(+this.telText)&&setTimeout(function(){e.telText=""})},e.prototype.onPayerNameChange=function(){var e=this;isNaN(+this.defaultName)||setTimeout(function(){e.defaultName=""})},e.prototype.onCardChange=function(){var e=this;isNaN(+this.cardText)&&setTimeout(function(){e.cardText=""})},e.prototype.onInstallmentsChange=function(){},e.prototype.onPaste=function(){return!1},e.decorators=[{type:t.Component,args:[{selector:"lib-go-cuotas",template:'<div *ngIf="isLoading" class="loading-overlay">\n <div class="loading-message">\n <p>{{ loadingMessage }}</p>\n <div *ngIf="!paymentCompleted" class="spinner"></div>\n <div *ngIf="paymentCompleted" class="success-icon">✔️</div>\n </div>\n</div>\n\n<div *ngIf="hasError" class="error-overlay">\n <div class="error-message">\n <p>{{ error_message }}</p>\n <button (click)="restartForm()">Reintentar</button>\n </div>\n</div>\n\n<form\n (ngSubmit)="onSubmit($event)"\n class="gc-payment"\n id="formulario"\n #f="ngForm"\n autocomplete="off"\n>\n <div class="formRow">\n <label for="cardholderName">Nombre y Apellido impreso en la tarjeta</label>\n <span>\n <input\n id="cardholderName"\n type="text"\n name="cardholderName"\n required\n maxlength="22"\n data-checkout="cardholderName"\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onPayerNameChange()"\n [(ngModel)]="defaultName"\n pattern="^[a-zA-Z\\s]+$"\n #cardholderName="ngModel"\n />\n </span>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardholderName.valid && submitted">\n Ingresá el nombre completo que figura en la tarjeta.\n </p>\n </div>\n\n <div class="formRow">\n <div class="form-row-2col">\n\n \x3c!-- Tipo de documento--\x3e\n <div class="formRow">\n <label for="docType">Tipo Doc.</label>\n <div class="select-icon">\n <select id="docType" name="docType" data-checkout="docType" required ngModel [disabled]="disabled"\n [(ngModel)]="defaultDocType" #docType="ngModel">\n <option value="" disabled selected>Sin Seleccionar...</option>\n <option value="dni">DNI</option>\n <option value="cuil">CUIL</option>\n </select> \n </div>\n </div>\n\n \x3c!-- DNI --\x3e\n <div class="formRow">\n <label for="docNumber">Nº de Doc.</label>\n <span>\n <input id="docNumber" type="text" name="docNumber" data-checkout="docNumber" minlength="7" maxlength="8"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onDniChange()" [(ngModel)]="dniText"\n #docNumber="ngModel" />\n </span>\n </div>\n\n </div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!docNumber.valid && submitted">\n Completá el número de documento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!docType.valid && submitted">\n Seleccioná el tipo de documento.\n </p>\n </div>\n\n \x3c!-- Numero de tarjeta --\x3e\n <div class="formRow">\n <label for="cardNumber">Número de Tarjeta</label>\n <span>\n <input\n id="cardNumber"\n type="text"\n name="cardNumber"\n data-checkout="cardNumber"\n maxlength="19"\n required\n thumbnail\n (input)="onCardChange()"\n (paste)="onPaste()"\n [disabled]="disabled"\n [(ngModel)]="cardText"\n #cardNumber="ngModel"\n />\n </span>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardNumber.valid && submitted">\n Ingresá el número de tarjeta.\n </p>\n </div>\n\n <div class="form-row-3col">\n \x3c!-- Expiry-month--\x3e\n <div class="formRow">\n <label for="cardExpirationMonth">Mes de expiración</label>\n <span>\n <input\n id="cardExpirationMonth"\n type="text"\n name="cardExpirationMonth"\n placeholder="MM"\n minlength="2"\n maxlength="2"\n data-checkout="cardExpirationMonth"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onMonthChange()"\n (focusout)="onMonthLostFocus()"\n [(ngModel)]="monthText"\n #cardExpirationMonth="ngModel"\n />\n </span>\n </div>\n\n \x3c!-- Expiry-year--\x3e\n <div class="formRow">\n <label for="cardExpirationYear">Año de expiración</label>\n <span>\n <input\n id="cardExpirationYear"\n type="text"\n name="cardExpirationYear"\n placeholder="AA"\n minlength="2"\n maxlength="2"\n data-checkout="cardExpirationYear"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onYearChange()"\n [(ngModel)]="yearText"\n #cardExpirationYear="ngModel"\n />\n </span>\n </div>\n\n \x3c!-- CVC --\x3e\n <div class="formRow">\n <label for="securityCode">Código de seguridad</label>\n <span>\n <input\n id="securityCode"\n type="text"\n name="securityCode"\n placeholder="CSC"\n minlength="3"\n maxlength="4"\n data-checkout="securityCode"\n required\n [disabled]="disabled"\n (paste)="onPaste()"\n (input)="onCodeChange()"\n [(ngModel)]="cvcText"\n #securityCode="ngModel"\n />\n </span>\n </div>\n </div>\n\n <div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationMonth.valid && submitted">\n Completá el mes de vencimiento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!cardExpirationYear.valid && submitted">\n Completá el año de vencimiento.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!securityCode.valid && submitted">\n Ingresá el código de seguridad.\n </p>\n </div>\n\n \x3c!--Cantidad de cuotas--\x3e\n <div class="formRow">\n <label for="installments">Cuotas</label>\n <div class="select-icon">\n <select id="installments" name="installments" aria-required="true" required ngModel\n [(ngModel)]="installments" (change)="onInstallmentsChange()" [disabled]="disabled" #inst="ngModel">\n <option value="0" disabled selected>Sin Seleccionar...</option>\n <option *ngFor="let current of currentInstallments" [value]="current.value">\n {{ current.label }}\n </option>\n </select>\n </div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!inst.valid && submitted">\n Elegí la cantidad de cuotas.\n </p>\n </div>\n\n <div class="formRow">\n <div class="form-row-3col">\n\n \x3c!-- Correo electrónico --\x3e\n <div class="formRow">\n <label for="mail">Correo electrónico</label>\n <span>\n <input id="mail" type="text" name="mail" data-checkout="mail" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onMailChange()" [(ngModel)]="mailText"\n #mail="ngModel"/>\n </span>\n </div>\n\n \x3c!-- Código de área --\x3e\n <div class="formRow">\n <label for="codArea">Cod. Área</label>\n <span>\n <input id="codArea" type="text" name="codArea" data-checkout="codArea" minlength="2" maxlength="4"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onCodAreaChange()" [(ngModel)]="codAreaText"\n #codArea="ngModel" />\n </span>\n </div>\n\n \x3c!-- Teléfono --\x3e\n <div class="formRow">\n <label for="tel">Teléfono</label>\n <span>\n <input id="tel" type="text" name="tel" data-checkout="tel" minlength="6" maxlength="8"\n required [disabled]="disabled" (paste)="onPaste()" (input)="onTelChange()" [(ngModel)]="telText"\n #tel="ngModel" />\n </span>\n </div>\n\n </div>\n </div>\n\n <div>\n <p [hidden]="disabled" class="alert-text" *ngIf="!mail.valid && submitted">\n Completá el correo electrónico.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!codArea.valid && submitted">\n Completá el código de área.\n </p>\n <p [hidden]="disabled" class="alert-text" *ngIf="!tel.valid && submitted">\n Ingresá el teléfono.\n </p>\n </div>\n\n <button type="submit">Pagar ${{ totalAmount }}</button>\n</form>\n\n<div class="logo">\n <img [src]="logoGC" alt="Go Cuotas" class="responsive-img" style="width: 150px;">\n</div>\n\n<lib-modal (codeVerified)="onCodeSent($event)"></lib-modal>',styles:['@charset "UTF-8";.gc-payment{background-color:transparent;font-family:inherit,sans-serif}.gc-payment label{font-size:14px;color:#888}.formRow{margin-top:10px}:focus{outline:0}.form-row-2col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-2col .formRow{width:49%;margin-top:0}.form-row-3col{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:10px}.form-row-3col .formRow{width:32%;margin-top:0}span{background-color:#fff;border:.5px solid #707070;border-radius:2px;padding:2px 10px;display:block;margin-top:4px}input[type=password],input[type=text]{background:0 0;border:none;color:#000;font-size:15px;height:23px;width:100%;text-transform:uppercase;vertical-align:top}select{width:100%;font-size:15px;height:30px;padding:2px 10px;border:.5px solid #707070;border-radius:2px;display:block;margin-top:4px;-webkit-appearance:none;-moz-appearance:none;position:relative;z-index:1;background:0 0}select:focus{background-color:#e0e0e0;border-color:#009ee3;outline:0}option[disabled]{color:#bbb;font-weight:400}.select-icon{position:relative}.select-icon::after{content:"";font-family:"Material Icons";position:absolute;right:0;top:3px;font-size:24px}.icon-select{width:24px;position:absolute;right:13px}.alert-text{font-size:13px;color:#009ee3;margin-top:7px;margin-bottom:0}button{background-color:#009ee3;color:#fff;font-size:18px;text-align:center;padding:10px 0;width:100%;border:none;border-radius:20px;margin-top:20px;cursor:pointer}button:disabled{background-color:#525252}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.loading-message{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.spinner{border:4px solid rgba(255,255,255,.2);border-left-color:#fff;border-radius:50%;width:40px;height:40px;-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:2000;display:flex;justify-content:center;align-items:center;color:#fff}.error-message{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;max-width:600px}.error-message p{font-size:1.2rem}.error-message button{background-color:#ff4d4d;color:#fff;border:none;padding:.5rem 1rem;font-size:1rem;border-radius:5px;cursor:pointer;min-width:250px;max-width:250px}.error-message button:hover{background-color:#f33}.success-icon{font-size:3rem;color:#4caf50;margin-bottom:1rem}.logo{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding-top:10px}']}]}],e.ctorParameters=function(){return[{type:v},{type:I}]},e.propDecorators={accessToken:[{type:t.Input}],gcUrlApi:[{type:t.Input}],vkUrlApi:[{type:t.Input}],paymentAmount:[{type:t.Input}],logoGC:[{type:t.Input}],idVen:[{type:t.Input}],storeId:[{type:t.Input}],data:[{type:t.Input}],checkOutForm:[{type:t.ViewChild,args:["f",{static:!1}]}],modal:[{type:t.ViewChild,args:[C,{static:!1}]}]},e}();var k=[T,C],w=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[k],exports:[k],imports:[n.CommonModule,r.FormsModule,r.ReactiveFormsModule,i.RouterModule,d.MatSnackBarModule],providers:[v,I]}]}],e}(),M=[h,x,f,w],S=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:M,exports:M}]}],e}();e.VkPaymentsModule=S,e.ɵa=h,e.ɵb=p,e.ɵc=l,e.ɵd=u,e.ɵe=x,e.ɵf=y,e.ɵg=b,e.ɵh=f,e.ɵi=g,e.ɵj=w,e.ɵk=T,e.ɵl=C,e.ɵm=v,e.ɵn=I,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
2
2
|
//# sourceMappingURL=vk-payments.umd.min.js.map
|