npm - ng-easycommerce-v18 - Versions diffs - 0.4.1-beta.1 → 0.4.2 - Mend

ng-easycommerce-v18 0.4.1-beta.1 → 0.4.2

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.

Files changed (202) hide show

package/assets/decidirFormEc.html CHANGED Viewed

@@ -1,514 +1,514 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <title>Decidir</title>
-    <script defer>
-        const subtotal = localStorage.getItem('subtotal')
-        // console.log(subtotal);
-        const dataDecidirHead = localStorage.getItem('dataDecidir')
-            && JSON.parse(localStorage.getItem('dataDecidir'))
-        let modoHead = dataDecidirHead?.config?.public_environment || null
-        modoHead && (modoHead == 'prod' && (modoHead = false) || modoHead == 'test' && (modoHead = true))
-        //console.log('modo head',modoHead, dataDecidirHead)
-        !modoHead && (modoHead = window.location.host.includes('easycommerce'))
-        let my_awesome_script = document.createElement('script');
-        my_awesome_script.setAttribute('defer', 'defer')
-        my_awesome_script.setAttribute('src',
-            'https://live.decidir.com/static/v2.6.4/decidir.js'
-        );
-        document.head.appendChild(my_awesome_script);
-        //Script para el fingerpoint
-        function makeSessionId(length) {
-            var result = '';
-            var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
-            var charactersLength = characters.length;
-            for (var i = 0; i < length; i++) {
-                result += characters.charAt(Math.floor(Math.random() *
-                    charactersLength));
-            }
-            return result;
-        }
-        function addStreetAndNro() {
-            let row = document.createElement('div')
-            row.classList.add('row')
-            /*Columna Calle*/
-            let colAddress = document.createElement('div')
-            colAddress.classList.add('col-md-9', 'col-12')
-            let contInput = document.createElement('div')
-            contInput.classList.add('form-floating', 'mb-3')
-            let inputAddress = document.createElement('input')
-            inputAddress.classList.add('form-control')
-            inputAddress.setAttribute('data-decidir', 'address')
-            inputAddress.setAttribute('type', 'text')
-            inputAddress.setAttribute('id', 'address')
-            inputAddress.setAttribute('name', 'address')
-            inputAddress.setAttribute('required', '')
-            let labelAdress = document.createElement('label')
-            labelAdress.setAttribute('for', 'address')
-            labelAdress.textContent = 'Calle:'
-            contInput.appendChild(inputAddress)
-            contInput.appendChild(labelAdress)
-            colAddress.appendChild(contInput)
-            /*---*/
-            /*Columna Nro*/
-            let colNro = document.createElement('div')
-            colNro.classList.add('col-md-3', 'col-12')
-            let contNro = document.createElement('div')
-            contNro.classList.add('form-floating', 'mb-3')
-            let inputNro = document.createElement('input')
-            inputNro.classList.add('form-control')
-            inputNro.setAttribute('data-decidir', 'nro')
-            inputNro.setAttribute('type', 'number')
-            inputNro.setAttribute('id', 'nro')
-            inputNro.setAttribute('name', 'nro')
-            inputNro.setAttribute('required', '')
-            let labelNro = document.createElement('label')
-            labelNro.setAttribute('for', 'nro')
-            labelNro.textContent = 'Nro:'
-            contNro.appendChild(inputNro)
-            contNro.appendChild(labelNro)
-            colNro.appendChild(contNro)
-            /*---*/
-            row.appendChild(colAddress)
-            row.appendChild(colNro)
-            return row
-        }
-        function addTipoDeInteres() {
-            let row = document.createElement('div');
-            row.classList.add('row');
-            /* Columna Tipo de Interés */
-            let colInteres = document.createElement('div');
-            colInteres.classList.add('col-md-6', 'col-12');
-            let contSelect = document.createElement('div');
-            contSelect.classList.add('form-floating', 'mb-3');
-            let selectInteres = document.createElement('select');
-            selectInteres.classList.add('form-select');
-            selectInteres.setAttribute('data-decidir', 'tipo_interes');
-            selectInteres.setAttribute('id', 'tipo_interes');
-            selectInteres.setAttribute('name', 'tipo_interes');
-            selectInteres.setAttribute('required', '');
-            // Opción predeterminada
-            let optionDefault = document.createElement('option');
-            optionDefault.value = '';
-            optionDefault.textContent = 'Seleccione cantidad de cuotas';
-            optionDefault.disabled = true;
-            optionDefault.selected = true;
-            selectInteres.appendChild(optionDefault);
-            // Agregar cuotas activas como opciones
-            dataDecidirHead.config.public_card_type_configurations.forEach((cuota) => {
-                if (cuota.active) {
-                    let option = document.createElement('option');
-                    option.value = cuota.dues;
-                    option.setAttribute('data-interest-rate', cuota.interestRate);
-                    option.textContent = `${cuota.dues} cuotas (${cuota.interestRate}% interés)`;
-                    selectInteres.appendChild(option);
-                }
-            });
-            let labelInteres = document.createElement('label');
-            labelInteres.setAttribute('for', 'tipo_interes');
-            labelInteres.textContent = 'Tipo de interés:';
-            contSelect.appendChild(selectInteres);
-            contSelect.appendChild(labelInteres);
-            colInteres.appendChild(contSelect);
-            /*---*/
-            /* Columna Total con interés */
-            let colRate = document.createElement('div');
-            colRate.classList.add('col-md-6', 'col-12');
-            let contInputRate = document.createElement('div');
-            contInputRate.classList.add('form-floating', 'mb-3');
-            let inputRate = document.createElement('input');
-            inputRate.classList.add('form-control');
-            inputRate.setAttribute('type', 'text');
-            inputRate.setAttribute('id', 'total_con_interes');
-            inputRate.setAttribute('name', 'total_con_interes');
-            inputRate.setAttribute('readonly', true);  // Input de solo lectura
-            inputRate.setAttribute('placeholder', 'Total con interés');
-            let labelRate = document.createElement('label');
-            labelRate.setAttribute('for', 'total_con_interes');
-            labelRate.textContent = 'Total con interés:';
-            contInputRate.appendChild(inputRate);
-            contInputRate.appendChild(labelRate);
-            colRate.appendChild(contInputRate);
-            /*---*/
-            // Agregar columnas al row
-            row.appendChild(colInteres);
-            row.appendChild(colRate);
-            // Asegurarse de que el subtotal es un número
-            let subtotal = parseFloat(localStorage.getItem('subtotal'));
-            if (isNaN(subtotal)) {
-                subtotal = 0; // Si no es un número válido, lo dejamos como 0
-            }
-            // Evento para cambiar el valor del input según la opción seleccionada
-            selectInteres.addEventListener('change', function () {
-                let selectedOption = selectInteres.options[selectInteres.selectedIndex];
-                let interestRate = parseFloat(selectedOption.getAttribute('data-interest-rate')) || 0;
-                // Calcular el total con el interés aplicado
-                let totalConInteres = subtotal * (1 + interestRate / 100);
-                // Formatear el total con separadores de miles
-                let totalFormateado = totalConInteres.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-                // Actualizar el input con el valor calculado y formateado
-                if (!isNaN(totalConInteres)) {
-                    inputRate.value = totalFormateado;  // Asignar el valor formateado al input
-                } else {
-                    inputRate.value = ''; // Si el total es NaN, dejamos el campo vacío
-                }
-            });
-            return row;
-        }
-        let my_copy_script = document.createElement('script');
-        my_copy_script.setAttribute('type', 'text/javascript');
-        let infoDecidir = JSON.parse(localStorage.getItem('dataDecidir')) || undefined
-        //console.log(infoDecidir)
-        let urlBase = 'https://h.online-metrix.net/fp/tags.js';
-        let org_id = infoDecidir?.config?.public_environment == 'test' ? '1snn5n9w' : 'k8vif92e'
-        let merchand_id = infoDecidir?.config?.public_merchand_id || 'decidir_agregador'
-        let cybersource = infoDecidir?.config?.public_cybersource || 'deshabilitado'
-        let session_id = makeSessionId(8)
-        my_copy_script.setAttribute('src', urlBase + '?org_id=' + org_id + '&session_id=' + merchand_id + session_id)
-        document.head.appendChild(my_copy_script)
-    </script>
-</head>
-<body>
-    <style>
-        .logo-pago-seguro-img {
-            /* width: 150px;
-            height: 48px; */
-        }
-        .loader {
-            border: 16px solid #f3f3f3;
-            border-top: 16px solid #dc3545;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 2s linear infinite;
-        }
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-        .flex-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 80vh;
-        }
-        .flex-container>div {
-            width: 100px;
-            height: 100px;
-        }
-    </style>
-    <div class="container-fluid">
-        <div class="row mt-3">
-            <div class="col-12">
-                <div class="card">
-                    <div class="container-fluid mt-3">
-                        <div class="row">
-                            <div class="col-md-6 col-12">
-                                <!-- <h5><b>Decidir</b></h5> -->
-                            </div>
-                            <div class="col-md-6 col-12">
-                                <img src="../assets/images/cards-occasional.png" class="card-img-top" alt="...">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <form action="" method="post" id="formulario">
-                            <div>
-                                <div id="contForm">
-                                    <div class="row">
-                                        <div class="col-md-8 col-12">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" type="text" data-decidir="card_number"
-                                                    placeholder="XXXXXXXXXXXXXXXX" maxlength="18" value=""
-                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
-                                                <label for="card_number">Numero de tarjeta:</label>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-4 col-12">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" type="text" data-decidir="security_code"
-                                                    placeholder="XXX" maxlength="4" value=""
-                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
-                                                <label for="security_code">Codigo de seguridad:</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-12">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" type="text"
-                                                    data-decidir="card_expiration_month" placeholder="MM" maxlength="2"
-                                                    value=""
-                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
-                                                <label for="card_expiration_month">Mes de vencimiento:</label>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-12">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" type="text"
-                                                    data-decidir="card_expiration_year" placeholder="AA" maxlength="2"
-                                                    value=""
-                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
-                                                <label for="card_expiration_year">Año de vencimiento:</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-12 col-md-8">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" type="text" data-decidir="card_holder_name"
-                                                    placeholder="TITULAR" value="" />
-                                                <label for="card_holder_name">Nombre del titular:</label>
-                                            </div>
-                                        </div>
-                                        <div class="col-12 col-md-4">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" id="date_of_birth" type="date"
-                                                    data-decidir="date_of_birth" placeholder="" value="" required />
-                                                <label for="date_of_birth">Fecha de nacimiento:</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-12">
-                                            <div class="form-floating mb-3">
-                                                <select class="form-select" data-decidir="card_holder_doc_type">
-                                                    <option value="dni">DNI</option>
-                                                </select>
-                                                <label for="card_holder_doc_type">Tipo de documento:</label>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-12">
-                                            <div class="form-floating mb-3">
-                                                <input class="form-control" data-decidir="card_holder_doc_number"
-                                                    placeholder="XXXXXXXXXX" maxlength="9" value=""
-                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
-                                                <label for="card_holder_doc_type">Numero de documento:</label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="w-100 text-center">
-                                    <div id="loadTokenBtn">
-                                        <div class="d-grid gap-2">
-                                            <input type="submit" value="Pagar" class="btn btn-outline-success mt-3" />
-                                        </div>
-                                    </div>
-                                    <div id="loadToken" class="text-center mt-4">
-                                        <div class="spinner-border" role="status">
-                                            <span class="visually-hidden">Cargando...</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                </fieldset>
-                        </form>
-                    </div>
-                    <div class="w-100 d-flex justify-content-end">
-                        <div class="w-50 d-flex justify-content-end">
-                            <img src="../assets/images/decidir-logo.png" class="card-img-top w-50 logo-pago-seguro-img "
-                                alt="...">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <script defer>
-        if (cybersource != 'deshabilitado') {
-            document.getElementById('contForm').appendChild(addStreetAndNro())
-            document.getElementById('contForm').appendChild(addTipoDeInteres());
-        }
-        let iframe = document.createElement('iframe')
-        iframe.setAttribute('style', 'width: 100px; height: 100px; border: 0; position: absolute; top:-5000px;')
-        iframe.setAttribute('src', 'https://h.online-metrix.net/fp/tags?org_id=' + org_id + '&session_id=' + merchand_id + session_id)
-        document.body.appendChild(iframe)
-        window.onload = function () {
-            let loadToken = document.querySelector('#loadToken');
-            let loadTokenBtn = document.querySelector('#loadTokenBtn');
-            const isLoad = (state) => {
-                loadToken.style.display = !state && 'none' || 'block';
-                loadTokenBtn.style.display = state && 'none' || 'block';
-            }
-            isLoad(false)
-            const urlSandbox = "https://developers.decidir.com/api/v2";
-            const urlProduccion = "https://live.decidir.com/api/v2";
-            const dataRedirect = localStorage.getItem('dataRedirect')
-            const dataDecidir = localStorage.getItem('dataDecidir')
-                && JSON.parse(localStorage.getItem('dataDecidir'))
-            const publicApiKey = dataDecidir?.config?.public_key
-            let cybersource = dataDecidir?.config?.public_cybersource && dataDecidir?.config?.public_cybersource == 'deshabilitado'
-            let modo = dataDecidir?.config?.public_environment || null
-            modo ? (modo == 'prod' ? modo = false : modo = true) : (modo = window.location.host.includes('easycommerce'))
-            const decidir = new Decidir(modo && modo ? urlSandbox : urlProduccion);
-            decidir.setPublishableKey(publicApiKey);
-            decidir.setTimeout(5000);
-            let form = document.querySelector('#formulario');
-            const setMessageInStore = (response) => {
-                if (response.hasOwnProperty('message')) {
-                    localStorage.setItem('message', response.message)
-                }
-                if (response.hasOwnProperty('subMessage')) {
-                    localStorage.setItem('subMessage', response.subMessage)
-                }
-            }
-            const sendToken = (data) => {
-                data['fraud_detection'] = {
-                    "device_unique_identifier": session_id
-                }
-                data['date_of_birth'] = document.getElementById('date_of_birth').value;
-                // console.log('Datos para el envio: ', data)
-                // console.log(dataDecidir)
-                if (dataDecidir?.config?.public_cybersource != 'deshabilitado') {
-                    data['address'] = {
-                        'name': document.getElementById('address').value,
-                        'number': document.getElementById('nro').value
-                    }
-                    data['subtotal'] = document.getElementById('total_con_interes').value
-                    data['dues'] = document.getElementById('tipo_interes').value;
-                }
-                try {
-                    fetch(dataRedirect, {
-                        method: 'POST',
-                        body: JSON.stringify(data),
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    }).then(res => res.json())
-                        .catch(error => {
-                            console.error('Error:', error)
-                            processError(response)
-                        })
-                        .then(response => {
-                            // console.log('Success:', response)
-                            setMessageInStore(response)
-                            if (response.hasOwnProperty('status')) {
-                                if (response.status == 'approved' || response.status == 'partially_authorized') {
-                                    processResponse(response)
-                                } else {
-                                    processError(response)
-                                }
-                            } else {
-                                processError(response)
-                            }
-                        });
-                } catch (error) {
-                    processError(response)
-                }
-                localStorage.removeItem('dataRedirect')
-                localStorage.removeItem('dataDecidir')
-                localStorage.removeItem('subtotal')
-            }
-            const sdkResponseHandler = (status, response) => {
-                // console.log('Respuesta: ', response)
-                if (status != 200 && status != 201) {
-                    //Manejo de error: Ver Respuesta de Error
-                    processError(response)
-                } else {
-                    //Manejo de respuesta donde response = {token: "99ab0740-4ef9-4b38-bdf9-c4c963459b22"}
-                    sendToken(response)
-                }
-            }
-            const sendForm = (event) => {
-                isLoad(true)
-                // console.log('Formulario: ', form)
-                event.preventDefault();
-                decidir.createToken(form, sdkResponseHandler);
-                return false;
-            }
-            const processError = (error) => {
-                // console.log("ERROR ENVIO BACK  ", error);
-                isLoad(false)
-                localStorage.setItem('state', 'failure')
-            }
-            const processResponse = (response) => {
-                // console.log("ENVIO BACK  ", response);
-                isLoad(false)
-                localStorage.setItem('state', response.status == 'approved' ? 'success' : 'partially_authorized')
-            }
-            form.addEventListener('submit', sendForm);
-        };
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <title>Decidir</title>
+    <script defer>
+        const subtotal = localStorage.getItem('subtotal')
+        // console.log(subtotal);
+        const dataDecidirHead = localStorage.getItem('dataDecidir')
+            && JSON.parse(localStorage.getItem('dataDecidir'))
+        let modoHead = dataDecidirHead?.config?.public_environment || null
+        modoHead && (modoHead == 'prod' && (modoHead = false) || modoHead == 'test' && (modoHead = true))
+        //console.log('modo head',modoHead, dataDecidirHead)
+        !modoHead && (modoHead = window.location.host.includes('easycommerce'))
+        let my_awesome_script = document.createElement('script');
+        my_awesome_script.setAttribute('defer', 'defer')
+        my_awesome_script.setAttribute('src',
+            'https://live.decidir.com/static/v2.6.4/decidir.js'
+        );
+        document.head.appendChild(my_awesome_script);
+        //Script para el fingerpoint
+        function makeSessionId(length) {
+            var result = '';
+            var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+            var charactersLength = characters.length;
+            for (var i = 0; i < length; i++) {
+                result += characters.charAt(Math.floor(Math.random() *
+                    charactersLength));
+            }
+            return result;
+        }
+        function addStreetAndNro() {
+            let row = document.createElement('div')
+            row.classList.add('row')
+            /*Columna Calle*/
+            let colAddress = document.createElement('div')
+            colAddress.classList.add('col-md-9', 'col-12')
+            let contInput = document.createElement('div')
+            contInput.classList.add('form-floating', 'mb-3')
+            let inputAddress = document.createElement('input')
+            inputAddress.classList.add('form-control')
+            inputAddress.setAttribute('data-decidir', 'address')
+            inputAddress.setAttribute('type', 'text')
+            inputAddress.setAttribute('id', 'address')
+            inputAddress.setAttribute('name', 'address')
+            inputAddress.setAttribute('required', '')
+            let labelAdress = document.createElement('label')
+            labelAdress.setAttribute('for', 'address')
+            labelAdress.textContent = 'Calle:'
+            contInput.appendChild(inputAddress)
+            contInput.appendChild(labelAdress)
+            colAddress.appendChild(contInput)
+            /*---*/
+            /*Columna Nro*/
+            let colNro = document.createElement('div')
+            colNro.classList.add('col-md-3', 'col-12')
+            let contNro = document.createElement('div')
+            contNro.classList.add('form-floating', 'mb-3')
+            let inputNro = document.createElement('input')
+            inputNro.classList.add('form-control')
+            inputNro.setAttribute('data-decidir', 'nro')
+            inputNro.setAttribute('type', 'number')
+            inputNro.setAttribute('id', 'nro')
+            inputNro.setAttribute('name', 'nro')
+            inputNro.setAttribute('required', '')
+            let labelNro = document.createElement('label')
+            labelNro.setAttribute('for', 'nro')
+            labelNro.textContent = 'Nro:'
+            contNro.appendChild(inputNro)
+            contNro.appendChild(labelNro)
+            colNro.appendChild(contNro)
+            /*---*/
+            row.appendChild(colAddress)
+            row.appendChild(colNro)
+            return row
+        }
+        function addTipoDeInteres() {
+            let row = document.createElement('div');
+            row.classList.add('row');
+            /* Columna Tipo de Interés */
+            let colInteres = document.createElement('div');
+            colInteres.classList.add('col-md-6', 'col-12');
+            let contSelect = document.createElement('div');
+            contSelect.classList.add('form-floating', 'mb-3');
+            let selectInteres = document.createElement('select');
+            selectInteres.classList.add('form-select');
+            selectInteres.setAttribute('data-decidir', 'tipo_interes');
+            selectInteres.setAttribute('id', 'tipo_interes');
+            selectInteres.setAttribute('name', 'tipo_interes');
+            selectInteres.setAttribute('required', '');
+            // Opción predeterminada
+            let optionDefault = document.createElement('option');
+            optionDefault.value = '';
+            optionDefault.textContent = 'Seleccione cantidad de cuotas';
+            optionDefault.disabled = true;
+            optionDefault.selected = true;
+            selectInteres.appendChild(optionDefault);
+            // Agregar cuotas activas como opciones
+            dataDecidirHead.config.public_card_type_configurations.forEach((cuota) => {
+                if (cuota.active) {
+                    let option = document.createElement('option');
+                    option.value = cuota.dues;
+                    option.setAttribute('data-interest-rate', cuota.interestRate);
+                    option.textContent = `${cuota.dues} cuotas (${cuota.interestRate}% interés)`;
+                    selectInteres.appendChild(option);
+                }
+            });
+            let labelInteres = document.createElement('label');
+            labelInteres.setAttribute('for', 'tipo_interes');
+            labelInteres.textContent = 'Tipo de interés:';
+            contSelect.appendChild(selectInteres);
+            contSelect.appendChild(labelInteres);
+            colInteres.appendChild(contSelect);
+            /*---*/
+            /* Columna Total con interés */
+            let colRate = document.createElement('div');
+            colRate.classList.add('col-md-6', 'col-12');
+            let contInputRate = document.createElement('div');
+            contInputRate.classList.add('form-floating', 'mb-3');
+            let inputRate = document.createElement('input');
+            inputRate.classList.add('form-control');
+            inputRate.setAttribute('type', 'text');
+            inputRate.setAttribute('id', 'total_con_interes');
+            inputRate.setAttribute('name', 'total_con_interes');
+            inputRate.setAttribute('readonly', true);  // Input de solo lectura
+            inputRate.setAttribute('placeholder', 'Total con interés');
+            let labelRate = document.createElement('label');
+            labelRate.setAttribute('for', 'total_con_interes');
+            labelRate.textContent = 'Total con interés:';
+            contInputRate.appendChild(inputRate);
+            contInputRate.appendChild(labelRate);
+            colRate.appendChild(contInputRate);
+            /*---*/
+            // Agregar columnas al row
+            row.appendChild(colInteres);
+            row.appendChild(colRate);
+            // Asegurarse de que el subtotal es un número
+            let subtotal = parseFloat(localStorage.getItem('subtotal'));
+            if (isNaN(subtotal)) {
+                subtotal = 0; // Si no es un número válido, lo dejamos como 0
+            }
+            // Evento para cambiar el valor del input según la opción seleccionada
+            selectInteres.addEventListener('change', function () {
+                let selectedOption = selectInteres.options[selectInteres.selectedIndex];
+                let interestRate = parseFloat(selectedOption.getAttribute('data-interest-rate')) || 0;
+                // Calcular el total con el interés aplicado
+                let totalConInteres = subtotal * (1 + interestRate / 100);
+                // Formatear el total con separadores de miles
+                let totalFormateado = totalConInteres.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+                // Actualizar el input con el valor calculado y formateado
+                if (!isNaN(totalConInteres)) {
+                    inputRate.value = totalFormateado;  // Asignar el valor formateado al input
+                } else {
+                    inputRate.value = ''; // Si el total es NaN, dejamos el campo vacío
+                }
+            });
+            return row;
+        }
+        let my_copy_script = document.createElement('script');
+        my_copy_script.setAttribute('type', 'text/javascript');
+        let infoDecidir = JSON.parse(localStorage.getItem('dataDecidir')) || undefined
+        //console.log(infoDecidir)
+        let urlBase = 'https://h.online-metrix.net/fp/tags.js';
+        let org_id = infoDecidir?.config?.public_environment == 'test' ? '1snn5n9w' : 'k8vif92e'
+        let merchand_id = infoDecidir?.config?.public_merchand_id || 'decidir_agregador'
+        let cybersource = infoDecidir?.config?.public_cybersource || 'deshabilitado'
+        let session_id = makeSessionId(8)
+        my_copy_script.setAttribute('src', urlBase + '?org_id=' + org_id + '&session_id=' + merchand_id + session_id)
+        document.head.appendChild(my_copy_script)
+    </script>
+</head>
+<body>
+    <style>
+        .logo-pago-seguro-img {
+            /* width: 150px;
+            height: 48px; */
+        }
+        .loader {
+            border: 16px solid #f3f3f3;
+            border-top: 16px solid #dc3545;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 2s linear infinite;
+        }
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .flex-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80vh;
+        }
+        .flex-container>div {
+            width: 100px;
+            height: 100px;
+        }
+    </style>
+    <div class="container-fluid">
+        <div class="row mt-3">
+            <div class="col-12">
+                <div class="card">
+                    <div class="container-fluid mt-3">
+                        <div class="row">
+                            <div class="col-md-6 col-12">
+                                <!-- <h5><b>Decidir</b></h5> -->
+                            </div>
+                            <div class="col-md-6 col-12">
+                                <img src="../assets/images/cards-occasional.png" class="card-img-top" alt="...">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <form action="" method="post" id="formulario">
+                            <div>
+                                <div id="contForm">
+                                    <div class="row">
+                                        <div class="col-md-8 col-12">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" type="text" data-decidir="card_number"
+                                                    placeholder="XXXXXXXXXXXXXXXX" maxlength="18" value=""
+                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
+                                                <label for="card_number">Numero de tarjeta:</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4 col-12">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" type="text" data-decidir="security_code"
+                                                    placeholder="XXX" maxlength="4" value=""
+                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
+                                                <label for="security_code">Codigo de seguridad:</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 col-12">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" type="text"
+                                                    data-decidir="card_expiration_month" placeholder="MM" maxlength="2"
+                                                    value=""
+                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
+                                                <label for="card_expiration_month">Mes de vencimiento:</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-12">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" type="text"
+                                                    data-decidir="card_expiration_year" placeholder="AA" maxlength="2"
+                                                    value=""
+                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />
+                                                <label for="card_expiration_year">Año de vencimiento:</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-12 col-md-8">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" type="text" data-decidir="card_holder_name"
+                                                    placeholder="TITULAR" value="" />
+                                                <label for="card_holder_name">Nombre del titular:</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md-4">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" id="date_of_birth" type="date"
+                                                    data-decidir="date_of_birth" placeholder="" value="" required />
+                                                <label for="date_of_birth">Fecha de nacimiento:</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-6 col-12">
+                                            <div class="form-floating mb-3">
+                                                <select class="form-select" data-decidir="card_holder_doc_type">
+                                                    <option value="dni">DNI</option>
+                                                </select>
+                                                <label for="card_holder_doc_type">Tipo de documento:</label>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-6 col-12">
+                                            <div class="form-floating mb-3">
+                                                <input class="form-control" data-decidir="card_holder_doc_number"
+                                                    placeholder="XXXXXXXXXX" maxlength="9" value=""
+                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
+                                                <label for="card_holder_doc_type">Numero de documento:</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="w-100 text-center">
+                                    <div id="loadTokenBtn">
+                                        <div class="d-grid gap-2">
+                                            <input type="submit" value="Pagar" class="btn btn-outline-success mt-3" />
+                                        </div>
+                                    </div>
+                                    <div id="loadToken" class="text-center mt-4">
+                                        <div class="spinner-border" role="status">
+                                            <span class="visually-hidden">Cargando...</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                </fieldset>
+                        </form>
+                    </div>
+                    <div class="w-100 d-flex justify-content-end">
+                        <div class="w-50 d-flex justify-content-end">
+                            <img src="../assets/images/decidir-logo.png" class="card-img-top w-50 logo-pago-seguro-img "
+                                alt="...">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <script defer>
+        if (cybersource != 'deshabilitado') {
+            document.getElementById('contForm').appendChild(addStreetAndNro())
+            document.getElementById('contForm').appendChild(addTipoDeInteres());
+        }
+        let iframe = document.createElement('iframe')
+        iframe.setAttribute('style', 'width: 100px; height: 100px; border: 0; position: absolute; top:-5000px;')
+        iframe.setAttribute('src', 'https://h.online-metrix.net/fp/tags?org_id=' + org_id + '&session_id=' + merchand_id + session_id)
+        document.body.appendChild(iframe)
+        window.onload = function () {
+            let loadToken = document.querySelector('#loadToken');
+            let loadTokenBtn = document.querySelector('#loadTokenBtn');
+            const isLoad = (state) => {
+                loadToken.style.display = !state && 'none' || 'block';
+                loadTokenBtn.style.display = state && 'none' || 'block';
+            }
+            isLoad(false)
+            const urlSandbox = "https://developers.decidir.com/api/v2";
+            const urlProduccion = "https://live.decidir.com/api/v2";
+            const dataRedirect = localStorage.getItem('dataRedirect')
+            const dataDecidir = localStorage.getItem('dataDecidir')
+                && JSON.parse(localStorage.getItem('dataDecidir'))
+            const publicApiKey = dataDecidir?.config?.public_key
+            let cybersource = dataDecidir?.config?.public_cybersource && dataDecidir?.config?.public_cybersource == 'deshabilitado'
+            let modo = dataDecidir?.config?.public_environment || null
+            modo ? (modo == 'prod' ? modo = false : modo = true) : (modo = window.location.host.includes('easycommerce'))
+            const decidir = new Decidir(modo && modo ? urlSandbox : urlProduccion);
+            decidir.setPublishableKey(publicApiKey);
+            decidir.setTimeout(5000);
+            let form = document.querySelector('#formulario');
+            const setMessageInStore = (response) => {
+                if (response.hasOwnProperty('message')) {
+                    localStorage.setItem('message', response.message)
+                }
+                if (response.hasOwnProperty('subMessage')) {
+                    localStorage.setItem('subMessage', response.subMessage)
+                }
+            }
+            const sendToken = (data) => {
+                data['fraud_detection'] = {
+                    "device_unique_identifier": session_id
+                }
+                data['date_of_birth'] = document.getElementById('date_of_birth').value;
+                // console.log('Datos para el envio: ', data)
+                // console.log(dataDecidir)
+                if (dataDecidir?.config?.public_cybersource != 'deshabilitado') {
+                    data['address'] = {
+                        'name': document.getElementById('address').value,
+                        'number': document.getElementById('nro').value
+                    }
+                    data['subtotal'] = document.getElementById('total_con_interes').value
+                    data['dues'] = document.getElementById('tipo_interes').value;
+                }
+                try {
+                    fetch(dataRedirect, {
+                        method: 'POST',
+                        body: JSON.stringify(data),
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    }).then(res => res.json())
+                        .catch(error => {
+                            console.error('Error:', error)
+                            processError(response)
+                        })
+                        .then(response => {
+                            // console.log('Success:', response)
+                            setMessageInStore(response)
+                            if (response.hasOwnProperty('status')) {
+                                if (response.status == 'approved' || response.status == 'partially_authorized') {
+                                    processResponse(response)
+                                } else {
+                                    processError(response)
+                                }
+                            } else {
+                                processError(response)
+                            }
+                        });
+                } catch (error) {
+                    processError(response)
+                }
+                localStorage.removeItem('dataRedirect')
+                localStorage.removeItem('dataDecidir')
+                localStorage.removeItem('subtotal')
+            }
+            const sdkResponseHandler = (status, response) => {
+                // console.log('Respuesta: ', response)
+                if (status != 200 && status != 201) {
+                    //Manejo de error: Ver Respuesta de Error
+                    processError(response)
+                } else {
+                    //Manejo de respuesta donde response = {token: "99ab0740-4ef9-4b38-bdf9-c4c963459b22"}
+                    sendToken(response)
+                }
+            }
+            const sendForm = (event) => {
+                isLoad(true)
+                // console.log('Formulario: ', form)
+                event.preventDefault();
+                decidir.createToken(form, sdkResponseHandler);
+                return false;
+            }
+            const processError = (error) => {
+                // console.log("ERROR ENVIO BACK  ", error);
+                isLoad(false)
+                localStorage.setItem('state', 'failure')
+            }
+            const processResponse = (response) => {
+                // console.log("ENVIO BACK  ", response);
+                isLoad(false)
+                localStorage.setItem('state', response.status == 'approved' ? 'success' : 'partially_authorized')
+            }
+            form.addEventListener('submit', sendForm);
+        };
+    </script>
+</body>
+</html>