vk-payments 0.2.22 → 0.2.24

package/bundles/vk-payments.umd.js

@@ -2702,6 +2702,17 @@
             };
             return this.httpClient.post(this.normalizeUrl(url) + '/payment', body, { headers: this.authHeaders });
         };
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        GoCuotasApiService.prototype.getInstallments = /**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            return this.httpClient.get(this.normalizeUrl(url) + '/get-installments');
+        };
         /**
          * @private
          * @param {?} access_token
@@ -2870,11 +2881,7 @@
         function () {
             this.defaultDocType = '';
             this.installments = 0;
-            this.currentInstallments = [
-                { value: 2, label: '2 Cuotas' },
-                { value: 3, label: '3 Cuotas' },
-                { value: 4, label: '4 Cuotas' }
-            ]; // Opciones para "Cantidad de cuotas"
+            this.getInstallments();
             this.totalAmount = Number(this.paymentAmount);
         };
         /**
@@ -2959,7 +2966,7 @@
                 creditCardHash: this.cardText,
                 cardMonthExpiration: Number(this.monthText),
                 cardYearExpiration: Number(this.yearText),
-                cardSecurityCode: Number(this.cvcText),
+                cardSecurityCode: this.cvcText,
                 idVen: this.idVen,
                 storeId: this.storeId,
                 data: this.data
@@ -3057,6 +3064,48 @@
             this.loadingMessage = '¡Pago procesado correctamente!';
             this.paymentCompleted = true;
         };
+        /**
+         * @return {?}
+         */
+        GoCuotasComponent.prototype.getInstallments = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.goCuotasApiService.getInstallments(this.vkUrlApi)
+                .subscribe({
+                next: (/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.getInstallmentsResponseHandler(v); }),
+                error: (/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.ResponseHandlerError(v); })
+            });
+        };
+        /**
+         * @param {?} response
+         * @return {?}
+         */
+        GoCuotasComponent.prototype.getInstallmentsResponseHandler = /**
+         * @param {?} response
+         * @return {?}
+         */
+        function (response) {
+            if (!response.success) {
+                this.paymentStatus = 'error';
+                this.error_message = "Ocurrio un error al obtener el número de cuotas. Intente más tarde.";
+                this.hasError = true;
+                this.disabled = true;
+                this.disabledSelect = true;
+                this.statusPay.emit(this.paymentResult);
+                return;
+            }
+            this.currentInstallments = response.data;
+        };
         /**
          * @return {?}
          */
@@ -3300,7 +3349,7 @@
         GoCuotasComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'lib-go-cuotas',
-                        template: "<div\n  *ngIf=\"isLoading && paymentStatus === 'unsubmitted'\"\n  class=\"loading-overlay\"\n>\n  <div class=\"loading-message\">\n    <p>{{ loadingMessage }}</p>\n    <div *ngIf=\"!paymentCompleted\" class=\"spinner\"></div>\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardholderName.valid && submitted\"\n    >\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      <!-- Tipo de documento-->\n      <div class=\"formRow\">\n        <label for=\"docType\">Tipo Doc.</label>\n        <div class=\"select-icon\">\n          <select\n            id=\"docType\"\n            name=\"docType\"\n            data-checkout=\"docType\"\n            required\n            ngModel\n            [disabled]=\"disabledSelect\"\n            [(ngModel)]=\"defaultDocType\"\n            #docType=\"ngModel\"\n          >\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\n            id=\"docNumber\"\n            type=\"text\"\n            name=\"docNumber\"\n            data-checkout=\"docNumber\"\n            minlength=\"7\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onDniChange()\"\n            [(ngModel)]=\"dniText\"\n            #docNumber=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docNumber.valid && submitted\"\n    >\n      Complet\u00E1 el n\u00FAmero de documento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docType.valid && submitted\"\n    >\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardNumber.valid && submitted\"\n    >\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationMonth.valid && submitted\"\n    >\n      Complet\u00E1 el mes de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationYear.valid && submitted\"\n    >\n      Complet\u00E1 el a\u00F1o de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!securityCode.valid && submitted\"\n    >\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\n        id=\"installments\"\n        name=\"installments\"\n        aria-required=\"true\"\n        required\n        ngModel\n        [(ngModel)]=\"installments\"\n        (change)=\"onInstallmentsChange()\"\n        [disabled]=\"disabledSelect\"\n        #inst=\"ngModel\"\n      >\n        <option value=\"0\" disabled selected>Sin Seleccionar...</option>\n        <option\n          *ngFor=\"let current of currentInstallments\"\n          [value]=\"current.value\"\n        >\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    <!-- Correo electr\u00F3nico -->\n    <div class=\"formRow\">\n      <label for=\"mail\">Correo electr\u00F3nico</label>\n      <span>\n        <input\n          id=\"mail\"\n          type=\"text\"\n          name=\"mail\"\n          data-checkout=\"mail\"\n          pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onMailChange()\"\n          [(ngModel)]=\"mailText\"\n          #mail=\"ngModel\"\n        />\n      </span>\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  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-2col\">\n      <!-- C\u00F3digo de \u00E1rea -->\n      <div class=\"formRow\">\n        <label for=\"codArea\">Cod. \u00C1rea</label>\n        <span>\n          <input\n            id=\"codArea\"\n            type=\"text\"\n            name=\"codArea\"\n            data-checkout=\"codArea\"\n            minlength=\"2\"\n            maxlength=\"4\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onCodAreaChange()\"\n            [(ngModel)]=\"codAreaText\"\n            #codArea=\"ngModel\"\n          />\n        </span>\n      </div>\n\n      <!-- Tel\u00E9fono -->\n      <div class=\"formRow\">\n        <label for=\"tel\">Tel\u00E9fono</label>\n        <span>\n          <input\n            id=\"tel\"\n            type=\"text\"\n            name=\"tel\"\n            data-checkout=\"tel\"\n            minlength=\"6\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onTelChange()\"\n            [(ngModel)]=\"telText\"\n            #tel=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!codArea.valid && submitted\"\n    >\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  <div *ngIf=\"paymentStatus === 'unsubmitted'\">\n    <button type=\"submit\">Pagar ${{ totalAmount | number : \"2.2-2\" }}</button>\n  </div>\n\n  <div *ngIf=\"paymentStatus === 'sentCode' || paymentStatus === 'processing'\">\n    <button type=\"submit\" disabled>\n      Pagar ${{ totalAmount | number : \"2.2-2\" }}\n    </button>\n  </div>\n\n  <div class=\"logo\">\n    <img\n      [src]=\"logoGC\"\n      alt=\"Go Cuotas\"\n      class=\"responsive-img\"\n      style=\"width: 150px\"\n    />\n  </div>\n\n  <div>\n    <div class=\"pay-message info\" *ngIf=\"paymentStatus === 'processing'\">\n      <i class=\"material-icons\">info</i>\n      <p>\n        {{ loadingMessage }}\n      </p>\n    </div>\n\n    <div class=\"pay-message error\" *ngIf=\"paymentStatus === 'error'\">\n      <i class=\"material-icons\">error</i>\n      <p>\n        {{ error_message }}\n      </p>\n    </div>\n\n    <div\n      *ngIf=\"paymentStatus === 'success' && paymentCompleted\"\n      class=\"pay-message success\"\n    >\n      <i class=\"material-icons\">check_circle</i>\n      <p>\n        Tu pago se ha confirmado!\n        <br />\n        Estos son los datos de la transacci\u00F3n:\n      </p>\n\n      <i class=\"data\">Nro. de Pago: {{ Opayment.paymentId }}</i>\n      <i class=\"data\">Cod. Autorizaci\u00F3n: {{ Opayment.sale_token }}</i>\n    </div>\n\n    <button *ngIf=\"paymentStatus === 'error'\" (click)=\"restartForm()\">\n      Limpiar formulario\n    </button>\n  </div>\n</form>\n\n<lib-modal (codeVerified)=\"onCodeSent($event)\"></lib-modal>\n",
+                        template: "<div\n  *ngIf=\"isLoading && paymentStatus === 'unsubmitted'\"\n  class=\"loading-overlay\"\n>\n  <div class=\"loading-message\">\n    <p>{{ loadingMessage }}</p>\n    <div *ngIf=\"!paymentCompleted\" class=\"spinner\"></div>\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardholderName.valid && submitted\"\n    >\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      <!-- Tipo de documento-->\n      <div class=\"formRow\">\n        <label for=\"docType\">Tipo Doc.</label>\n        <div class=\"select-icon\">\n          <select\n            id=\"docType\"\n            name=\"docType\"\n            data-checkout=\"docType\"\n            required\n            ngModel\n            [disabled]=\"disabledSelect\"\n            [(ngModel)]=\"defaultDocType\"\n            #docType=\"ngModel\"\n          >\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\n            id=\"docNumber\"\n            type=\"text\"\n            name=\"docNumber\"\n            data-checkout=\"docNumber\"\n            minlength=\"7\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onDniChange()\"\n            [(ngModel)]=\"dniText\"\n            #docNumber=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docNumber.valid && submitted\"\n    >\n      Complet\u00E1 el n\u00FAmero de documento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!docType.valid && submitted\"\n    >\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardNumber.valid && submitted\"\n    >\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\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationMonth.valid && submitted\"\n    >\n      Complet\u00E1 el mes de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!cardExpirationYear.valid && submitted\"\n    >\n      Complet\u00E1 el a\u00F1o de vencimiento.\n    </p>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!securityCode.valid && submitted\"\n    >\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\n        id=\"installments\"\n        name=\"installments\"\n        aria-required=\"true\"\n        required\n        ngModel\n        [(ngModel)]=\"installments\"\n        (change)=\"onInstallmentsChange()\"\n        [disabled]=\"disabledSelect\"\n        #inst=\"ngModel\"\n      >\n        <option value=\"0\" disabled selected>Sin Seleccionar...</option>\n        <option\n          *ngFor=\"let current of currentInstallments\"\n          [value]=\"current.InstallmentNumber\"\n        >\n          {{ current.Description }}\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    <!-- Correo electr\u00F3nico -->\n    <div class=\"formRow\">\n      <label for=\"mail\">Correo electr\u00F3nico</label>\n      <span>\n        <input\n          id=\"mail\"\n          type=\"text\"\n          name=\"mail\"\n          data-checkout=\"mail\"\n          pattern=\"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$\"\n          required\n          [disabled]=\"disabled\"\n          (paste)=\"onPaste()\"\n          (input)=\"onMailChange()\"\n          [(ngModel)]=\"mailText\"\n          #mail=\"ngModel\"\n        />\n      </span>\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  </div>\n\n  <div class=\"formRow\">\n    <div class=\"form-row-2col\">\n      <!-- C\u00F3digo de \u00E1rea -->\n      <div class=\"formRow\">\n        <label for=\"codArea\">Cod. \u00C1rea</label>\n        <span>\n          <input\n            id=\"codArea\"\n            type=\"text\"\n            name=\"codArea\"\n            data-checkout=\"codArea\"\n            minlength=\"2\"\n            maxlength=\"4\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onCodAreaChange()\"\n            [(ngModel)]=\"codAreaText\"\n            #codArea=\"ngModel\"\n          />\n        </span>\n      </div>\n\n      <!-- Tel\u00E9fono -->\n      <div class=\"formRow\">\n        <label for=\"tel\">Tel\u00E9fono</label>\n        <span>\n          <input\n            id=\"tel\"\n            type=\"text\"\n            name=\"tel\"\n            data-checkout=\"tel\"\n            minlength=\"6\"\n            maxlength=\"8\"\n            required\n            [disabled]=\"disabled\"\n            (paste)=\"onPaste()\"\n            (input)=\"onTelChange()\"\n            [(ngModel)]=\"telText\"\n            #tel=\"ngModel\"\n          />\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <div>\n    <p\n      [hidden]=\"disabled\"\n      class=\"alert-text\"\n      *ngIf=\"!codArea.valid && submitted\"\n    >\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  <div *ngIf=\"paymentStatus === 'unsubmitted'\">\n    <button type=\"submit\">Pagar ${{ totalAmount | number : \"2.2-2\" }}</button>\n  </div>\n\n  <div *ngIf=\"paymentStatus === 'sentCode' || paymentStatus === 'processing'\">\n    <button type=\"submit\" disabled>\n      Pagar ${{ totalAmount | number : \"2.2-2\" }}\n    </button>\n  </div>\n\n  <div class=\"logo\">\n    <img\n      [src]=\"logoGC\"\n      alt=\"Go Cuotas\"\n      class=\"responsive-img\"\n      style=\"width: 150px\"\n    />\n  </div>\n\n  <div>\n    <div class=\"pay-message info\" *ngIf=\"paymentStatus === 'processing'\">\n      <i class=\"material-icons\">info</i>\n      <p>\n        {{ loadingMessage }}\n      </p>\n    </div>\n\n    <div class=\"pay-message error\" *ngIf=\"paymentStatus === 'error'\">\n      <i class=\"material-icons\">error</i>\n      <p>\n        {{ error_message }}\n      </p>\n    </div>\n\n    <div\n      *ngIf=\"paymentStatus === 'success' && paymentCompleted\"\n      class=\"pay-message success\"\n    >\n      <i class=\"material-icons\">check_circle</i>\n      <p>\n        Tu pago se ha confirmado!\n        <br />\n        Estos son los datos de la transacci\u00F3n:\n      </p>\n\n      <i class=\"data\">Nro. de Pago: {{ Opayment.paymentId }}</i>\n      <i class=\"data\">Cod. Autorizaci\u00F3n: {{ Opayment.sale_token }}</i>\n    </div>\n\n    <button *ngIf=\"paymentStatus === 'error'\" (click)=\"restartForm()\">\n      Limpiar formulario\n    </button>\n  </div>\n</form>\n\n<lib-modal (codeVerified)=\"onCodeSent($event)\"></lib-modal>\n",
                         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}#mail{text-transform:lowercase}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}.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}"]
                     }] }
         ];