{"id":4146,"date":"2025-09-11T19:38:00","date_gmt":"2025-09-12T02:38:00","guid":{"rendered":"https:\/\/ievolutionclub.com\/?page_id=4146"},"modified":"2026-04-10T19:01:53","modified_gmt":"2026-04-11T02:01:53","slug":"zelle-waiting","status":"publish","type":"page","link":"https:\/\/stage.ievolutionclub.com\/es\/zelle-waiting\/","title":{"rendered":"Pago con Zelle"},"content":{"rendered":"    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <style>\n        \/* iEvolution Brand \u2013 Zelle Waiting Page *\/\n        .zelle-container {\n            \/* iEvolution Brand Tokens *\/\n            --ie-navy: #1B2A4A;\n            --ie-navy-light: #2D3E5F;\n            --ie-navy-dark: #111D35;\n            --ie-teal: #2AAFD3;\n            --ie-teal-light: #5DC4E0;\n            --ie-teal-dark: #1E8FAD;\n            --ie-teal-bg: rgba(42, 175, 211, 0.08);\n            --ie-teal-border: rgba(42, 175, 211, 0.15);\n            --ie-white: #FFFFFF;\n            --ie-grey-bg: #F8FAFB;\n            --ie-grey-text: #6B7B8D;\n            --ie-grey-muted: #94A3B8;\n            --ie-border: #E8EDF2;\n            --ie-warning: #D97706;\n            --ie-warning-bg: #FFFBEB;\n            --ie-shadow-sm: 0 1px 3px 0 rgba(27, 42, 74, 0.06);\n            --ie-shadow-md: 0 16px 40px -12px rgba(27, 42, 74, 0.1);\n\n            max-width: 600px;\n            margin: 40px auto;\n            background: var(--ie-white);\n            border-radius: 16px;\n            border: 1px solid var(--ie-border);\n            box-shadow: var(--ie-shadow-sm);\n            padding: 40px;\n            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n            line-height: 1.65;\n            color: var(--ie-grey-text);\n            -webkit-font-smoothing: antialiased;\n            position: relative;\n            overflow: hidden;\n        }\n\n        \/* Top gradient accent line *\/\n        .zelle-container::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0;\n            height: 3px;\n            background: linear-gradient(90deg, var(--ie-teal), var(--ie-navy));\n        }\n\n        .zelle-header {\n            text-align: center;\n            padding-bottom: 24px;\n            border-bottom: 1px solid var(--ie-border);\n            margin-bottom: 28px;\n        }\n\n        .zelle-header h1 {\n            display: inline-flex;\n            align-items: center;\n            font-size: 1.75rem;\n            font-weight: 800;\n            color: var(--ie-navy);\n            margin: 0;\n            line-height: 1;\n            letter-spacing: -1px;\n        }\n\n        .zelle-header .zelle-title-text {\n            display: inline-block;\n        }\n\n        .zelle-header img {\n            height: 1.75em;\n            margin-left: 0.75em;\n            vertical-align: middle;\n            animation: zeIn 0.6s ease-out;\n        }\n        @keyframes zeIn {\n            from { opacity: 0; transform: translateY(-4px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .zelle-content h2 {\n            font-size: 14px;\n            font-weight: 400;\n            font-style: italic;\n            color: var(--ie-grey-text);\n            text-align: center;\n            margin-bottom: 32px;\n            letter-spacing: 0;\n        }\n\n        .zelle-steps {\n            list-style: none;\n            counter-reset: step;\n            padding: 0;\n            margin: 0;\n        }\n\n        .zelle-steps li {\n            counter-increment: step;\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 20px;\n            position: relative;\n            background-color: var(--ie-white);\n            border-radius: 16px;\n            border: 1px solid var(--ie-border);\n            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n            padding: 24px 24px 24px 76px;\n        }\n        .zelle-steps li:hover {\n            transform: translateY(-4px);\n            box-shadow: var(--ie-shadow-md);\n            border-color: var(--ie-teal-border);\n        }\n        \/* Bottom accent line on hover *\/\n        .zelle-steps li::after {\n            content: '';\n            position: absolute;\n            bottom: 0; left: 0; right: 0;\n            height: 3px;\n            background: linear-gradient(90deg, var(--ie-teal), var(--ie-navy));\n            border-radius: 0 0 16px 16px;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        .zelle-steps li:hover::after {\n            opacity: 1;\n        }\n\n        .zelle-steps li::before {\n            content: counter(step);\n            position: absolute;\n            left: 22px;\n            top: 24px;\n            width: 36px;\n            height: 36px;\n            background: var(--ie-navy);\n            color: var(--ie-teal);\n            font-size: 14px;\n            font-weight: 800;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            line-height: 1;\n        }\n\n        .zelle-step-content {\n            flex: 1;\n        }\n\n        .zelle-title {\n            font-size: 18px;\n            font-weight: 700;\n            margin-bottom: 6px;\n            color: var(--ie-navy);\n            letter-spacing: -0.3px;\n        }\n\n        .zelle-text {\n            font-size: 14px;\n            margin-bottom: 6px;\n            color: var(--ie-grey-text);\n            line-height: 1.65;\n        }\n\n        .zelle-label {\n            font-weight: 700;\n            color: var(--ie-navy);\n        }\n\n        #zelle-number, #order-amount {\n            font-size: 1.35rem;\n            font-weight: 800;\n            margin: 10px 0;\n            display: block;\n            color: var(--ie-teal);\n            word-break: break-all;\n            letter-spacing: -0.5px;\n        }\n\n        .zelle-btn-copy {\n            padding: 12px 28px;\n            font-size: 13px;\n            font-weight: 700;\n            color: var(--ie-white);\n            background: var(--ie-navy);\n            border: none;\n            border-radius: 50px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            margin-top: 12px;\n            position: relative;\n            outline: none;\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            letter-spacing: 0.5px;\n        }\n        .zelle-btn-copy:hover {\n            background: var(--ie-teal);\n            transform: translateY(-2px);\n            box-shadow: 0 10px 28px -6px rgba(42, 175, 211, 0.35);\n        }\n        .zelle-btn-copy.copied {\n            background: var(--ie-teal);\n        }\n        .zelle-btn-copy.copied::before {\n            content: '\u2713';\n            display: inline-block;\n        }\n        .zelle-btn-copy.copied .btn-text {\n            display: none;\n        }\n\n        .zelle-important-step {\n            background: var(--ie-warning-bg) !important;\n            border: 1px solid #FDE68A !important;\n            border-left: 4px solid var(--ie-warning) !important;\n            animation: none;\n        }\n        .zelle-important-step::after {\n            display: none !important;\n        }\n        .zelle-important-step::before {\n            background: var(--ie-warning) !important;\n            color: var(--ie-white) !important;\n        }\n        .zelle-important-step .zelle-title {\n            color: var(--ie-warning);\n        }\n\n        #zelle-waiting {\n            text-align: center;\n            padding: 32px 0;\n            font-size: 14px;\n            color: var(--ie-grey-muted);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 16px;\n            font-weight: 500;\n        }\n\n        .zelle-spinner {\n            margin: 0;\n            border: 3px solid var(--ie-border);\n            border-top: 3px solid var(--ie-teal);\n            border-radius: 50%;\n            width: 28px;\n            height: 28px;\n            animation: spin 1s linear infinite;\n        }\n        @keyframes spin {\n            to { transform: rotate(360deg); }\n        }\n\n        .zelle-note {\n            font-size: 14px;\n            color: var(--ie-grey-text);\n            text-align: center;\n            margin-top: 28px;\n            padding: 20px 24px;\n            background: var(--ie-grey-bg);\n            border-radius: 16px;\n            border: 1px solid var(--ie-border);\n            line-height: 1.65;\n        }\n        .zelle-note strong {\n            color: var(--ie-navy);\n            font-weight: 700;\n        }\n        .zelle-note em {\n            display: block;\n            margin-top: 10px;\n            font-style: italic;\n            color: var(--ie-grey-muted);\n        }\n\n        #zelle-note-input {\n            width: 100%;\n            padding: 14px;\n            font-size: 1.1rem;\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            border: 1px solid var(--ie-border);\n            border-radius: 12px;\n            background: var(--ie-grey-bg);\n            margin-bottom: 10px;\n            font-weight: 700;\n            color: var(--ie-teal);\n            box-sizing: border-box;\n            text-align: center;\n            letter-spacing: -0.3px;\n            transition: border-color 0.2s ease;\n        }\n        #zelle-note-input:focus {\n            border-color: var(--ie-teal-border);\n            outline: none;\n        }\n\n        #zelle-notification {\n            position: fixed;\n            top: 25px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: var(--ie-navy);\n            color: var(--ie-white);\n            padding: 14px 28px;\n            border-radius: 50px;\n            font-size: 14px;\n            font-weight: 600;\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            display: none;\n            z-index: 9999;\n            box-shadow: 0 10px 28px -6px rgba(27, 42, 74, 0.3);\n            animation: slideIn 0.4s ease-out;\n            letter-spacing: 0.3px;\n        }\n        @keyframes slideIn {\n            from {\n                transform: translate(-50%, -50px);\n                opacity: 0;\n            }\n            to {\n                transform: translate(-50%, 0);\n                opacity: 1;\n            }\n        }\n        #zelle-notification.visible {\n            display: block;\n        }\n        #zelle-notification.error {\n            background: var(--ie-warning);\n        }\n\n        .copy-feedback {\n            display: inline-block;\n            margin-left: 10px;\n            color: var(--ie-teal);\n            font-size: 13px;\n            font-weight: 600;\n            opacity: 0;\n            transition: opacity 0.3s ease-out;\n        }\n        .copy-feedback.show {\n            opacity: 1;\n        }\n\n        \/* TranslatePress specific compatibility *\/\n        .trp-ls-shortcode-disabled-language img,\n        .trp-language-switcher img,\n        .trp-flag-image {\n            display: inline !important;\n            vertical-align: middle !important;\n        }\n\n        \/* Ensure TranslatePress doesn't break our layout *\/\n        .zelle-container [data-trp-translate-id],\n        .zelle-container .trp-wrap {\n            display: inline !important;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 640px) {\n            .zelle-container {\n                margin: 16px;\n                padding: 24px 20px;\n            }\n            .zelle-steps li {\n                padding: 20px 16px 20px 64px;\n            }\n            .zelle-steps li::before {\n                left: 16px;\n                top: 20px;\n                width: 32px;\n                height: 32px;\n                font-size: 13px;\n            }\n            .zelle-header h1 {\n                font-size: 1.4rem;\n            }\n        }\n    <\/style>\n\n    <div class=\"zelle-container\">\n        <div class=\"zelle-header\">\n            <h1>\n                <span class=\"zelle-title-text\">Pagar con<\/span>\n                <img decoding=\"async\" src=\"https:\/\/ievolutionclub.com\/wp-content\/uploads\/2025\/11\/Result-93.webp\" alt=\"Zelle Logo\">\n            <\/h1>\n        <\/div>\n        \n        <div class=\"zelle-content\">\n            <h2>Siga estos pasos para completar su pedido:<\/h2>\n            \n            <ol class=\"zelle-steps\">\n                <li>\n                    <div class=\"zelle-step-content\">\n                        <div class=\"zelle-title\">A\u00f1adir destinatario Zelle<\/div>\n                        <div class=\"zelle-text\">En tu aplicaci\u00f3n bancaria, a\u00f1\u00e1denos como contacto Zelle:<\/div>\n                        <div class=\"zelle-text\">\n                            <span class=\"zelle-label\">Nombre:<\/span> <span class=\"zelle-recipient-name\">iEvolution Pro LLC<\/span><br>\n                            <span class=\"zelle-label\">N\u00famero\/Email:<\/span>\n                            <span id=\"zelle-number\">626-407-6529<\/span>\n                            <button id=\"copy-number\" class=\"zelle-btn-copy\" aria-label=\"Copia el n\u00famero\/email de Zelle\">\n                                <span class=\"btn-text\">Copiar<\/span>\n                            <\/button>\n                            <span id=\"feedback-number\" class=\"copy-feedback\" aria-live=\"polite\">\u2713 <span class=\"feedback-text\">\u00a1Copiado!<\/span><\/span>\n                        <\/div>\n                    <\/div>\n                <\/li>\n                \n                <li>\n                    <div class=\"zelle-step-content\">\n                        <div class=\"zelle-title\">Introduzca el importe del pago<\/div>\n                        <div class=\"zelle-text\">Env\u00ede el importe exacto de su pedido:<\/div>\n                        <div class=\"zelle-text\" id=\"order-amount\">$0.00<\/div>\n                        <button id=\"copy-amount\" class=\"zelle-btn-copy\" aria-label=\"Importe del pedido de copia\">\n                            <span class=\"btn-text\">Importe de la copia<\/span>\n                        <\/button>\n                        <span id=\"feedback-amount\" class=\"copy-feedback\" aria-live=\"polite\">\u2713 <span class=\"feedback-text\">\u00a1Copiado!<\/span><\/span>\n                    <\/div>\n                <\/li>\n                \n                <li class=\"zelle-important-step\">\n                    <div class=\"zelle-step-content\">\n                        <div class=\"zelle-title\" id=\"step3-title\">\n                            Paso 3 - Crucial: A\u00f1adir ID de pedido                        <\/div>\n                        <div class=\"zelle-text\">\n                            En el campo de referencia o memo de su pago Zelle, DEBE incluir su n\u00famero de pedido exactamente como se muestra a continuaci\u00f3n. Esto nos permite vincular su pago a su pedido.                        <\/div>\n                        <input id=\"zelle-note-input\" readonly aria-label=\"ID de pedido\">\n                        <button id=\"copy-order\" class=\"zelle-btn-copy\" aria-label=\"Copiar ID de pedido\">\n                            <span class=\"btn-text\">Copiar ID de pedido<\/span>\n                        <\/button>\n                        <span id=\"feedback-order\" class=\"copy-feedback\" aria-live=\"polite\">\u2713 <span class=\"feedback-text\">\u00a1Copiado!<\/span><\/span>\n                    <\/div>\n                <\/li>\n            <\/ol>\n            \n            <div id=\"zelle-waiting\">\n                <span class=\"waiting-text\">Esperando su confirmaci\u00f3n de pago...<\/span>\n                <div class=\"zelle-spinner\"><\/div>\n            <\/div>\n            \n            <div class=\"zelle-note\">\n                <strong>Nota Importante:<\/strong><br>\n                <span class=\"note-content\">Los pagos por Zelle suelen procesarse en minutos, pero pueden tardar hasta 30 minutos (o m\u00e1s, dependiendo de su banco). Por favor, no env\u00ede pagos m\u00faltiples.<\/span>\n                <em>Puede cerrar esta p\u00e1gina; le enviaremos una confirmaci\u00f3n por correo electr\u00f3nico una vez que su pago se haya verificado correctamente y su pedido comience a procesarse.<\/em>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"zelle-notification\" role=\"alert\" aria-live=\"assertive\"><\/div>\n\n    <script>\n    \/\/ Localized strings for TranslatePress compatibility\n    var zelleTranslations = {\"payment_confirmed\":\"\\u00a1Pago confirmado! Redirigiendo a los detalles del pedido...\",\"partial_payment_received\":\"Pago parcial recibido. Importe restante: $\",\"send_remaining\":\"Por favor, env\\u00ede el importe restante utilizando el ID de pedido actualizado.\",\"step3_partial\":\"Paso 3 - \\u00a1Crucial! (Pago parcial\",\"copied\":\"\\u00a1Copiado!\",\"copy\":\"Copiar\",\"copy_amount\":\"Importe de la copia\",\"copy_order_id\":\"Copiar ID de pedido\",\"order_not_found\":\"Pedido no encontrado. Puede que se haya cancelado o completado.\",\"polling_error\":\"Error al comprobar el estado del pago. Por favor, actualice la p\\u00e1gina.\",\"confirm_by_email\":\"We will confirm your payment by email as soon as we receive it.\"};\n    \n    document.addEventListener('DOMContentLoaded', function() {\n        const notifyEl = document.getElementById('zelle-notification');\n        \n        const showNotice = function(msg, isError, sticky) {\n            notifyEl.textContent = msg;\n            notifyEl.classList.add('visible');\n            if (isError) {\n                notifyEl.classList.add('error');\n            } else {\n                notifyEl.classList.remove('error');\n            }\n            if (sticky) return;   \/\/ stays on screen\n            setTimeout(function() {\n                notifyEl.classList.remove('visible');\n            }, 4000);\n        };\n\n        const showCopyFeedback = function(buttonId, feedbackId) {\n            const button = document.getElementById(buttonId);\n            const feedback = document.getElementById(feedbackId);\n            const originalTextSpan = button.querySelector('.btn-text');\n            const originalText = originalTextSpan ? originalTextSpan.textContent : '';\n            \n            button.classList.add('copied');\n            if (originalTextSpan) {\n                originalTextSpan.textContent = '';\n            }\n            \n            feedback.classList.add('show');\n            \n            setTimeout(function() {\n                button.classList.remove('copied');\n                if (originalTextSpan) {\n                    originalTextSpan.textContent = originalText;\n                }\n                feedback.classList.remove('show');\n            }, 2000);\n        };\n\n        const params = new URLSearchParams(window.location.search);\n        const baseOrder = params.get('order') || '';\n        const orderKey = params.get('key') || '';\n        const expected = parseFloat(params.get('amount')) || 0;\n\n        const amtEl = document.getElementById('order-amount');\n        const noteEl = document.getElementById('zelle-note-input');\n        \n        let currentAmount = expected;\n\n        function updateUI(amount, orderId) {\n            if (!isNaN(amount)) {\n                currentAmount = amount;\n                amtEl.textContent = '$' + amount.toFixed(2);\n            }\n            if (orderId) {\n                noteEl.value = orderId;\n            }\n        }\n\n        updateUI(expected, baseOrder);\n\n        document.getElementById('copy-number').onclick = function() {\n            const number = document.getElementById('zelle-number').textContent;\n            navigator.clipboard.writeText(number).then(function() {\n                showCopyFeedback('copy-number', 'feedback-number');\n            });\n        };\n        \n        document.getElementById('copy-amount').onclick = function() {\n            const amountToCopy = currentAmount.toFixed(2);\n            navigator.clipboard.writeText(amountToCopy).then(function() {\n                showCopyFeedback('copy-amount', 'feedback-amount');\n            });\n        };\n        \n        document.getElementById('copy-order').onclick = function() {\n            navigator.clipboard.writeText(noteEl.value).then(function() {\n                showCopyFeedback('copy-order', 'feedback-order');\n            });\n        };\n\n        let attempt = 1;\n        let lastReceived = null;\n        let pollingInterval = null;\n        \n        function stopPolling() {\n            if (pollingInterval) {\n                clearTimeout(pollingInterval);\n                pollingInterval = null;\n            }\n        }\n\n        function poll() {\n            const currentOrderIdForPolling = baseOrder + (attempt > 1 && lastReceived !== null ? '-' + attempt : '');\n            fetch('\/wp-json\/zelle\/v1\/status?order=' + encodeURIComponent(currentOrderIdForPolling) + '&key=' + encodeURIComponent(orderKey))\n                .then(function(r) { \n                    if (!r.ok) {\n                        if (r.status === 404) {\n                            console.warn(zelleTranslations.order_not_found);\n                            return Promise.reject('Order not found');\n                        }\n                        throw new Error('Network response was not ok: ' + r.status);\n                    }\n                    return r.json(); \n                })\n                .then(function(json) {\n                    if (json.success) {\n                        stopPolling();\n                        showNotice(zelleTranslations.payment_confirmed);\n                        setTimeout(function() {\n                            window.location = json.redirect;\n                        }, 1500);\n                        return;\n                    }\n\n                    if (json.received != null && (!lastReceived || parseFloat(json.received).toFixed(2) !== parseFloat(lastReceived).toFixed(2))) {\n                        const rec = parseFloat(json.received);\n                        const expectedTotal = parseFloat(json.expected || expected);\n                        const remaining = expectedTotal - rec;\n\n                        if (remaining > 0.01) {\n                            const msg = zelleTranslations.partial_payment_received + \n                                        remaining.toFixed(2) + '. ' + \n                                        zelleTranslations.send_remaining;\n                            showNotice(msg, true);\n                            lastReceived = rec;\n                            attempt++;\n                            updateUI(remaining, baseOrder + '-' + attempt);\n                            \n                            \/\/ Update step 3 title for partial payment\n                            const step3Title = document.getElementById('step3-title');\n                            if (step3Title) {\n                                step3Title.textContent = zelleTranslations.step3_partial + ' ' + attempt + ')';\n                            }\n                        }\n                    }\n\n                    if (pollingInterval) {\n                        pollingInterval = setTimeout(poll, 5000); \n                    }\n                })\n                .catch(function(error) {\n                    console.error('Zelle Polling Error:', error);\n                    \/\/ 404 (e.g. a waiting page opened before its link carried the order key): say how\n                    \/\/ the customer will hear from us instead of silently stopping.\n                    if (error !== 'Order not found') {\n                        showNotice(zelleTranslations.polling_error, true);\n                    } else {\n                        showNotice(zelleTranslations.confirm_by_email, false, true);\n                    }\n                    stopPolling();\n                });\n        };\n\n        pollingInterval = setTimeout(poll, 1000);\n    });\n    <\/script>\n    ","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"spb-canvas.php","meta":{"footnotes":""},"wf_page_folders":[],"class_list":["post-4146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/comments?post=4146"}],"version-history":[{"count":7,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4146\/revisions"}],"predecessor-version":[{"id":6876,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/pages\/4146\/revisions\/6876"}],"wp:attachment":[{"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/media?parent=4146"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/stage.ievolutionclub.com\/es\/wp-json\/wp\/v2\/wf_page_folders?post=4146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}