vk-payments 0.0.15 → 0.0.17

package/bundles/vk-payments.umd.js

@@ -1489,6 +1489,7 @@
          * @param {?} amount
          * @param {?} creditCardId
          * @param {?} domainId
+         * @param {?} bin
          * @return {?}
          */
         SpsDecidirApiService.prototype.getPlansByCreditCardId = /**
@@ -1497,12 +1498,13 @@
          * @param {?} amount
          * @param {?} creditCardId
          * @param {?} domainId
+         * @param {?} bin
          * @return {?}
          */
-        function (access_token, url, amount, creditCardId, domainId) {
+        function (access_token, url, amount, creditCardId, domainId, bin) {
             this._setAuthHeaders(access_token);
             /** @type {?} */
-            var body = { amount: amount, creditCardId: creditCardId, domainId: domainId };
+            var body = { amount: amount, creditCardId: creditCardId, domainId: domainId, bin: bin };
             return this.httpClient.post(this.normalizeUrl(url) + '/CalculateAmountInInstallments', body, { headers: this.authHeaders });
         };
         /**
@@ -1656,6 +1658,7 @@
          * @param {?} amount
          * @param {?} creditCardId
          * @param {?} domainId
+         * @param {?} bin
          * @return {?}
          */
         SpsDecidirComponent.prototype.getPlansByCreditCardId = /**
@@ -1663,11 +1666,12 @@
          * @param {?} amount
          * @param {?} creditCardId
          * @param {?} domainId
+         * @param {?} bin
          * @return {?}
          */
-        function (amount, creditCardId, domainId) {
+        function (amount, creditCardId, domainId, bin) {
             var _this = this;
-            this.spsDecidirApiService.getPlansByCreditCardId(this.accessToken, this.vkUrlApi, amount, creditCardId, domainId)
+            this.spsDecidirApiService.getPlansByCreditCardId(this.accessToken, this.vkUrlApi, amount, creditCardId, domainId, bin)
                 .subscribe((/**
              * @param {?} res
              * @return {?}
@@ -1723,10 +1727,13 @@
                 return;
             }
             this.selectCreditCardPlan = null;
-            if (this.currency === 'ARS') {
-                this.getPlansByCreditCardId(this.paymentAmount, this.issuer, this.domainId);
+            if (this.currency === 'ARS' && this.cardText.length == 8) {
+                this.getPlansByCreditCardId(this.paymentAmount, this.issuer, this.domainId, this.cardText.substring(0, 8));
                 return;
             }
+            else {
+                this.cardText = '';
+            }
             if (this.currency === 'USD') {
                 this.totalAmount = this.totalFinancedAmount = this.paymentAmount;
             }
@@ -2206,7 +2213,9 @@
                 }));
             }
             // setea tarjeta
-            this.setCreditType(this.cardText);
+            if (this.cardText.length === 8) {
+                this.setCreditType(this.cardText);
+            }
         };
         /**
          * @param {?} bin
@@ -2217,11 +2226,11 @@
          * @return {?}
          */
         function (bin) {
-            if (bin.length < 6) {
+            if (bin.length < 8) {
                 this.issuer = null;
                 return;
             }
-            if (bin.length === 6) {
+            if (bin.length === 8) {
                 this.issuer = null;
                 // visa debito
                 if (bin.substring(0, 4) === '4770' ||
@@ -2392,7 +2401,7 @@
         SpsDecidirComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sps-form-pay',
-                        template: "<!-- https://github.com/decidir/sdk-javascript-v2 -->\r\n\r\n<form action=\"\" method=\"POST\" id=\"formulario\" #f=\"ngForm\" autocomplete=\"off\">\r\n  <!-- Numero de tarjeta -->\r\n  <div class=\"formRow\">\r\n    <label for=\"card_number\">{{ language.toLowerCase() === 'en' ? 'Card number' : 'N\u00FAmero 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\u00FAmero de Tarjeta' }}\"\r\n             minlength=\"12\"\r\n             maxlength=\"19\"\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\u00E1 el n\u00FAmero 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\u00EDnimo' }}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Card-issuer -->\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]=\"disabled\"\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\u00E1 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      <!-- Expiry-month-->\r\n      <div class=\"formRow\">\r\n        <label>\r\n          {{ language.toLowerCase() === 'en' ? 'Month of expiration' : 'Mes de expiraci\u00F3n' }}\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      <!-- Expiry-year-->\r\n      <div class=\"formRow\">\r\n        <label>\r\n          {{ language.toLowerCase() === 'en' ? 'Year of expiration' : 'A\u00F1o de expiraci\u00F3n' }}\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\u00E1 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\u00E1 el a\u00F1o 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\u00E1 vencida'}}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Card-name -->\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\u00E1 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\u00FAmero de documento del titular</label>\r\n    <div class=\"form-row-2col\">\r\n      <!-- Tipo de documento-->\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      <!-- DNI -->\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\u00E1 tipo de documento</p>\r\n    <p class=\"alert-text\" *ngIf=\"dni.errors?.minlength && submitPressed\">Requiere 7 digitos m\u00EDnimo</p>\r\n    <p class=\"alert-text\" *ngIf=\"dni.errors?.required && submitPressed\">Complet\u00E1 el n\u00FAmero de documento</p>\r\n  </div>\r\n  <!-- CVV -->\r\n  <div class=\"formRow\">\r\n    <label for=\"security_code\">{{ language.toLowerCase() === 'en' ? 'CSC' : 'C\u00F3digo de seguridad' }}</label>\r\n    <span>\r\n      <input id=\"security_code\"\r\n             type=\"text\"\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\u00EDnimo' }}\r\n    </p>\r\n    <p class=\"alert-text\" *ngIf=\"cvc.errors?.required && submitPressed\">\r\n      {{ language.toLowerCase() === 'en' ? 'Required' : 'Complet\u00E1 el c\u00F3digo de seguridad' }}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Cuotas -->\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\u00E1 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\u00E1 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\u00F3 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\u00F3n:\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\u00F3n: {{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",
+                        template: "<!-- https://github.com/decidir/sdk-javascript-v2 -->\r\n\r\n<form action=\"\" method=\"POST\" id=\"formulario\" #f=\"ngForm\" autocomplete=\"off\">\r\n  <!-- Numero de tarjeta -->\r\n  <div class=\"formRow\">\r\n    <label for=\"card_number\">{{ language.toLowerCase() === 'en' ? 'Card number' : 'N\u00FAmero 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\u00FAmero 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\u00E1 el n\u00FAmero 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\u00EDnimo' }}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Card-issuer -->\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]=\"disabled\"\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\u00E1 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      <!-- Expiry-month-->\r\n      <div class=\"formRow\">\r\n        <label>\r\n          {{ language.toLowerCase() === 'en' ? 'Month of expiration' : 'Mes de expiraci\u00F3n' }}\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      <!-- Expiry-year-->\r\n      <div class=\"formRow\">\r\n        <label>\r\n          {{ language.toLowerCase() === 'en' ? 'Year of expiration' : 'A\u00F1o de expiraci\u00F3n' }}\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\u00E1 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\u00E1 el a\u00F1o 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\u00E1 vencida'}}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Card-name -->\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\u00E1 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\u00FAmero de documento del titular</label>\r\n    <div class=\"form-row-2col\">\r\n      <!-- Tipo de documento-->\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      <!-- DNI -->\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\u00E1 tipo de documento</p>\r\n    <p class=\"alert-text\" *ngIf=\"dni.errors?.minlength && submitPressed\">Requiere 7 digitos m\u00EDnimo</p>\r\n    <p class=\"alert-text\" *ngIf=\"dni.errors?.required && submitPressed\">Complet\u00E1 el n\u00FAmero de documento</p>\r\n  </div>\r\n  <!-- CVV -->\r\n  <div class=\"formRow\">\r\n    <label for=\"security_code\">{{ language.toLowerCase() === 'en' ? 'CSC' : 'C\u00F3digo de seguridad' }}</label>\r\n    <span>\r\n      <input id=\"security_code\"\r\n             type=\"text\"\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\u00EDnimo' }}\r\n    </p>\r\n    <p class=\"alert-text\" *ngIf=\"cvc.errors?.required && submitPressed\">\r\n      {{ language.toLowerCase() === 'en' ? 'Required' : 'Complet\u00E1 el c\u00F3digo de seguridad' }}\r\n    </p>\r\n  </div>\r\n\r\n  <!-- Cuotas -->\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\u00E1 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\u00E1 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\u00F3 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\u00F3n:\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\u00F3n: {{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:\"\uE5CF\";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}"]
                     }] }
         ];