{"id":4658,"date":"2026-04-09T09:19:07","date_gmt":"2026-04-09T09:19:07","guid":{"rendered":"https:\/\/fisdemoprojects.com\/espertamanagement\/?page_id=4658"},"modified":"2026-04-09T09:35:18","modified_gmt":"2026-04-09T09:35:18","slug":"payslip-calculator","status":"publish","type":"page","link":"https:\/\/fisdemoprojects.com\/espertamanagement\/payslip-calculator\/","title":{"rendered":"Payslip Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4658\" class=\"elementor elementor-4658\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7179436 e-flex e-con-boxed e-con e-parent\" data-id=\"7179436\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8507b7 elementor-widget elementor-widget-html\" data-id=\"d8507b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"uk-payslip-wrapper\">\r\n    <style>\r\n        .uk-payslip-wrapper {\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n        \r\n        .payslip-card {\r\n            background: #ffffff;\r\n            border-radius: 12px;\r\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);\r\n            overflow: hidden;\r\n            margin-bottom: 24px;\r\n        }\r\n        \r\n        .payslip-header {\r\n            background: #003da6;\r\n            padding: 20px 24px;\r\n            color: white;\r\n        }\r\n        \r\n        .payslip-header h2 {\r\n            margin: 0;\r\n            font-size: 24px;\r\n            font-weight: 600;\r\n            color: white;\r\n        }\r\n        \r\n        .payslip-header p {\r\n            margin: 8px 0 0;\r\n            opacity: 0.85;\r\n            font-size: 14px;\r\n            color:#fff;\r\n        }\r\n        \r\n        .form-section {\r\n            padding: 24px;\r\n            background: #f8fafc;\r\n            border-bottom: 1px solid #e2e8f0;\r\n        }\r\n        \r\n        .form-row {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .form-field {\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .form-field label {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: #334155;\r\n            margin-bottom: 6px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.3px;\r\n        }\r\n        \r\n        .form-field input,\r\n        .form-field select {\r\n            padding: 10px 14px;\r\n            border: 1px solid #cbd5e1;\r\n            border-radius: 8px;\r\n            font-size: 15px;\r\n            font-family: monospace;\r\n            font-weight: 500;\r\n            background: white;\r\n        }\r\n        \r\n        .form-field input:focus,\r\n        .form-field select:focus {\r\n            outline: none;\r\n            border-color: #003da6;\r\n            box-shadow: 0 0 0 3px rgba(26,58,82,0.1);\r\n        }\r\n        \r\n        .radio-group {\r\n            display: flex;\r\n            gap: 24px;\r\n            align-items: center;\r\n            background: white;\r\n            padding: 8px 16px;\r\n            border-radius: 8px;\r\n            border: 1px solid #cbd5e1;\r\n            height: 42px;\r\n        }\r\n        \r\n        .radio-group label {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            font-weight: 500;\r\n            font-size: 14px;\r\n            text-transform: none;\r\n            margin-bottom: 0;\r\n        }\r\n        \r\n        .radio-group input {\r\n            width: 16px;\r\n            height: 16px;\r\n            margin: 0;\r\n        }\r\n        \r\n        .btn-group {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 8px;\r\n        }\r\n        \r\n        .btn {\r\n            padding: 10px 24px;\r\n            border-radius: 40px;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            border: none;\r\n            cursor: pointer;\r\n            transition: all 0.2s;\r\n        }\r\n        \r\n        .btn-primary {\r\n            background: #003da6;\r\n            color: white;\r\n        }\r\n        \r\n        .btn-primary:hover {\r\n            background: #0f2a3c;\r\n        }\r\n        \r\n        .btn-secondary {\r\n            background: #e2e8f0;\r\n            color: #334155;\r\n        }\r\n        \r\n        .btn-secondary:hover {\r\n            background: #cbd5e1;\r\n        }\r\n        \r\n        \/* Results Tables *\/\r\n        .results-section {\r\n            padding: 24px;\r\n        }\r\n        \r\n        .tables-wrapper {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 24px;\r\n            margin-bottom: 24px;\r\n        }\r\n        \r\n        .table-box {\r\n            border: 1px solid #e2e8f0;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            background: white;\r\n        }\r\n        \r\n        .table-header {\r\n            background: #003da6;\r\n            color: white;\r\n            padding: 12px 20px;\r\n            font-weight: 700;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .pay-table {\r\n            width: 100%;\r\n        }\r\n        \r\n        .pay-table td {\r\n            padding: 14px 20px;\r\n            border-bottom: 1px solid #f1f5f9;\r\n        }\r\n        \r\n        .pay-table td:first-child {\r\n            font-weight: 600;\r\n            color: #334155;\r\n        }\r\n        \r\n        .pay-table td:last-child {\r\n            text-align: right;\r\n            font-family: monospace;\r\n            font-weight: 700;\r\n            font-size: 16px;\r\n            color: #003da6;\r\n        }\r\n        \r\n        .net-row td {\r\n            background: #f0fdf4;\r\n            font-weight: 800;\r\n        }\r\n        \r\n        .net-row td:last-child {\r\n            color: #166534;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        .employer-row td:last-child {\r\n            color: #1e3a8a;\r\n        }\r\n        \r\n        .info-note {\r\n            background: #f1f5f9;\r\n            padding: 16px 20px;\r\n            border-radius: 12px;\r\n            font-size: 13px;\r\n            line-height: 1.6;\r\n            color: #475569;\r\n        }\r\n        \r\n        .info-note h4 {\r\n            margin: 0 0 8px;\r\n            font-size: 14px;\r\n            color: #003da6;\r\n        }\r\n        \r\n        .info-note p {\r\n            margin: 5px 0;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .tables-wrapper {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .form-section {\r\n                padding: 20px;\r\n            }\r\n            .results-section {\r\n                padding: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- Payslip Calculator -->\r\n    <div class=\"payslip-card\">\r\n        <div class=\"payslip-header\">\r\n            <h2>\ud83d\udcc4 UK Payslip Calculator<\/h2>\r\n            <p>Income Tax \u2022 National Insurance \u2022 Net Pay \u2022 Employer Costs<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"form-section\">\r\n            <div class=\"form-row\">\r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcb0 Gross Pay (\u00a3)<\/label>\r\n                    <input type=\"number\" id=\"grossAmount\" value=\"3200\" step=\"0.01\" placeholder=\"Enter gross pay\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcc5 Pay Period<\/label>\r\n                    <div class=\"radio-group\">\r\n                        <label>\r\n                            <input type=\"radio\" name=\"payPeriod\" value=\"monthly\" checked> Monthly\r\n                        <\/label>\r\n                        <label>\r\n                            <input type=\"radio\" name=\"payPeriod\" value=\"weekly\"> Weekly\r\n                        <\/label>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-row\">\r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udd22 Tax Code (numeric part only)<\/label>\r\n                    <input type=\"number\" id=\"taxCodeNum\" value=\"1257\" placeholder=\"e.g., 1257\">\r\n                    <small style=\"font-size: 11px; color: #64748b;\">1257L \u2192 1257 | BR\/D0 codes select below<\/small>\r\n                <\/div>\r\n                \r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udccc Special Tax Code (optional)<\/label>\r\n                    <select id=\"specialCode\">\r\n                        <option value=\"none\">\u2014 None \/ Standard \u2014<\/option>\r\n                        <option value=\"BR\">BR - Basic Rate (20% on all)<\/option>\r\n                        <option value=\"D0\">D0 - Higher Rate (40% on all)<\/option>\r\n                        <option value=\"D1\">D1 - Additional Rate (45% on all)<\/option>\r\n                        <option value=\"NT\">NT - No Tax<\/option>\r\n                        <option value=\"K\">K Code (Negative allowance)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"btn-group\">\r\n                <button class=\"btn btn-primary\" id=\"calculateBtn\">\u27f3 Calculate<\/button>\r\n                <button class=\"btn btn-secondary\" id=\"resetBtn\">Reset<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"results-section\">\r\n            <div class=\"tables-wrapper\">\r\n                <!-- Employee Table -->\r\n                <div class=\"table-box\">\r\n                    <div class=\"table-header\">\ud83d\udc64 EMPLOYEE<\/div>\r\n                    <table class=\"pay-table\">\r\n                        <tr>\r\n                            <td>Gross pay<\/td>\r\n                            <td id=\"grossDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>PAYE tax deduction<\/td>\r\n                            <td id=\"taxDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>NI deduction<\/td>\r\n                            <td id=\"niDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr class=\"net-row\">\r\n                            <td>Net pay (take home)<\/td>\r\n                            <td id=\"netDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n                \r\n                <!-- Employer Table -->\r\n                <div class=\"table-box\">\r\n                    <div class=\"table-header\">\ud83c\udfe2 EMPLOYER<\/div>\r\n                    <table class=\"pay-table\">\r\n                        <tr>\r\n                            <td>Employer's NI contribution<\/td>\r\n                            <td id=\"employerNiDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr class=\"employer-row\">\r\n                            <td>Cost to employer<\/td>\r\n                            <td id=\"costDisplay\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>Employer NI rate<\/td>\r\n                            <td>15.0%<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"info-note\">\r\n                <h4>\ud83d\udccb Tax Year 2025-2026 Rates<\/h4>\r\n                <p><strong>Income Tax:<\/strong> Personal Allowance \u00a312,570 | 20% (\u00a312,571\u2013\u00a350,270) | 40% (\u00a350,271\u2013\u00a3125,140) | 45% (above \u00a3125,140)<\/p>\r\n                <p><strong>National Insurance (Employee):<\/strong> 8% on \u00a31,048\u2013\u00a34,189\/month | 2% above \u00a34,189<\/p>\r\n                <p><strong>Employer NI:<\/strong> 15% on earnings above \u00a3758\/month (or \u00a3175\/week)<\/p>\r\n                <p id=\"taxCodeInfo\" style=\"background: #e6f0fa; padding: 8px 12px; border-radius: 8px; margin-top: 10px;\">\u2699\ufe0f Tax code: 1257 \u2192 Personal allowance \u00a312,570\/year<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/\/ Constants 2025-2026\r\n            const TAX_FREE = 12570;\r\n            const BASIC_RATE_MAX = 50270;\r\n            const HIGHER_RATE_MAX = 125140;\r\n            const BASIC_RATE = 0.20;\r\n            const HIGHER_RATE = 0.40;\r\n            const ADDITIONAL_RATE = 0.45;\r\n            \r\n            \/\/ NI thresholds (monthly)\r\n            const NI_MONTHLY_LOWER = 1048;\r\n            const NI_MONTHLY_UPPER = 4189;\r\n            const NI_MAIN_RATE = 0.08;\r\n            const NI_HIGH_RATE = 0.02;\r\n            \r\n            \/\/ Weekly NI\r\n            const NI_WEEKLY_LOWER = 242;\r\n            const NI_WEEKLY_UPPER = 967;\r\n            \r\n            \/\/ Employer NI\r\n            const EMPLOYER_MONTHLY_THRESHOLD = 758;\r\n            const EMPLOYER_WEEKLY_THRESHOLD = 175;\r\n            const EMPLOYER_RATE = 0.15;\r\n            \r\n            function calculateTax(annualIncome, taxCodeNum, special) {\r\n                if (special === 'NT') return 0;\r\n                if (special === 'BR') return annualIncome * 0.20;\r\n                if (special === 'D0') return annualIncome * 0.40;\r\n                if (special === 'D1') return annualIncome * 0.45;\r\n                \r\n                let personalAllowance = taxCodeNum * 10;\r\n                if (special === 'K') {\r\n                    personalAllowance = -(taxCodeNum * 10);\r\n                }\r\n                if (personalAllowance < 0) personalAllowance = 0;\r\n                if (personalAllowance > TAX_FREE) personalAllowance = TAX_FREE;\r\n                \r\n                let taxable = Math.max(0, annualIncome - personalAllowance);\r\n                let tax = 0;\r\n                if (taxable <= 0) return 0;\r\n                \r\n                if (taxable <= BASIC_RATE_MAX - TAX_FREE) {\r\n                    tax = taxable * BASIC_RATE;\r\n                } else if (taxable <= HIGHER_RATE_MAX - TAX_FREE) {\r\n                    tax = (BASIC_RATE_MAX - TAX_FREE) * BASIC_RATE;\r\n                    tax += (taxable - (BASIC_RATE_MAX - TAX_FREE)) * HIGHER_RATE;\r\n                } else {\r\n                    tax = (BASIC_RATE_MAX - TAX_FREE) * BASIC_RATE;\r\n                    tax += (HIGHER_RATE_MAX - BASIC_RATE_MAX) * HIGHER_RATE;\r\n                    tax += (taxable - (HIGHER_RATE_MAX - TAX_FREE)) * ADDITIONAL_RATE;\r\n                }\r\n                return tax;\r\n            }\r\n            \r\n            function calculateEmployeeNI(grossPeriod, isMonthly) {\r\n                if (grossPeriod <= 0) return 0;\r\n                if (isMonthly) {\r\n                    if (grossPeriod <= NI_MONTHLY_LOWER) return 0;\r\n                    let mainBand = Math.min(grossPeriod, NI_MONTHLY_UPPER) - NI_MONTHLY_LOWER;\r\n                    let ni = mainBand > 0 ? mainBand * NI_MAIN_RATE : 0;\r\n                    if (grossPeriod > NI_MONTHLY_UPPER) {\r\n                        ni += (grossPeriod - NI_MONTHLY_UPPER) * NI_HIGH_RATE;\r\n                    }\r\n                    return ni;\r\n                } else {\r\n                    if (grossPeriod <= NI_WEEKLY_LOWER) return 0;\r\n                    let mainBand = Math.min(grossPeriod, NI_WEEKLY_UPPER) - NI_WEEKLY_LOWER;\r\n                    let ni = mainBand > 0 ? mainBand * NI_MAIN_RATE : 0;\r\n                    if (grossPeriod > NI_WEEKLY_UPPER) {\r\n                        ni += (grossPeriod - NI_WEEKLY_UPPER) * NI_HIGH_RATE;\r\n                    }\r\n                    return ni;\r\n                }\r\n            }\r\n            \r\n            function calculateEmployerNI(grossPeriod, isMonthly) {\r\n                let threshold = isMonthly ? EMPLOYER_MONTHLY_THRESHOLD : EMPLOYER_WEEKLY_THRESHOLD;\r\n                let excess = Math.max(0, grossPeriod - threshold);\r\n                return excess * EMPLOYER_RATE;\r\n            }\r\n            \r\n            function updateCalculator() {\r\n                let gross = parseFloat(document.getElementById('grossAmount').value) || 0;\r\n                let isMonthly = document.querySelector('input[name=\"payPeriod\"]:checked').value === 'monthly';\r\n                let taxCodeNum = parseInt(document.getElementById('taxCodeNum').value) || 1257;\r\n                let specialCode = document.getElementById('specialCode').value;\r\n                \r\n                \/\/ Calculate annual income\r\n                let annualGross = isMonthly ? gross * 12 : gross * 52;\r\n                let annualTax = calculateTax(annualGross, taxCodeNum, specialCode);\r\n                \r\n                let periodTax = isMonthly ? annualTax \/ 12 : annualTax \/ 52;\r\n                let periodNI = calculateEmployeeNI(gross, isMonthly);\r\n                let netPay = gross - periodTax - periodNI;\r\n                if (netPay < 0) netPay = 0;\r\n                \r\n                let employerNI = calculateEmployerNI(gross, isMonthly);\r\n                let costToEmployer = gross + employerNI;\r\n                \r\n                \/\/ Update displays\r\n                document.getElementById('grossDisplay').innerText = '\u00a3' + gross.toFixed(2);\r\n                document.getElementById('taxDisplay').innerText = '\u00a3' + periodTax.toFixed(2);\r\n                document.getElementById('niDisplay').innerText = '\u00a3' + periodNI.toFixed(2);\r\n                document.getElementById('netDisplay').innerText = '\u00a3' + netPay.toFixed(2);\r\n                document.getElementById('employerNiDisplay').innerText = '\u00a3' + employerNI.toFixed(2);\r\n                document.getElementById('costDisplay').innerText = '\u00a3' + costToEmployer.toFixed(2);\r\n                \r\n                \/\/ Tax code info\r\n                let allowanceMsg = '';\r\n                if (specialCode === 'BR') allowanceMsg = 'BR code \u2192 Flat 20% on all income';\r\n                else if (specialCode === 'D0') allowanceMsg = 'D0 code \u2192 Flat 40% on all income';\r\n                else if (specialCode === 'D1') allowanceMsg = 'D1 code \u2192 Flat 45% on all income';\r\n                else if (specialCode === 'NT') allowanceMsg = 'NT code \u2192 No income tax deducted';\r\n                else if (specialCode === 'K') allowanceMsg = `K${taxCodeNum} \u2192 Negative allowance`;\r\n                else {\r\n                    let pa = Math.min(taxCodeNum * 10, TAX_FREE);\r\n                    allowanceMsg = `Tax code ${taxCodeNum} \u2192 Personal allowance \u00a3${pa.toFixed(0)}\/year`;\r\n                }\r\n                document.getElementById('taxCodeInfo').innerHTML = `\u2699\ufe0f ${allowanceMsg} | ${isMonthly ? 'Monthly' : 'Weekly'} gross: \u00a3${gross.toFixed(2)} \u2192 Annualised: \u00a3${annualGross.toFixed(2)}`;\r\n            }\r\n            \r\n            function resetForm() {\r\n                document.getElementById('grossAmount').value = '3200';\r\n                document.querySelector('input[name=\"payPeriod\"][value=\"monthly\"]').checked = true;\r\n                document.getElementById('taxCodeNum').value = '1257';\r\n                document.getElementById('specialCode').value = 'none';\r\n                updateCalculator();\r\n            }\r\n            \r\n            \/\/ Event listeners\r\n            document.getElementById('calculateBtn').addEventListener('click', updateCalculator);\r\n            document.getElementById('resetBtn').addEventListener('click', resetForm);\r\n            document.getElementById('grossAmount').addEventListener('input', updateCalculator);\r\n            document.getElementById('taxCodeNum').addEventListener('input', updateCalculator);\r\n            document.getElementById('specialCode').addEventListener('change', updateCalculator);\r\n            document.querySelectorAll('input[name=\"payPeriod\"]').forEach(radio => {\r\n                radio.addEventListener('change', updateCalculator);\r\n            });\r\n            \r\n            updateCalculator();\r\n        })();\r\n    <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcc4 UK Payslip Calculator Income Tax \u2022 National Insurance \u2022 Net Pay \u2022 Employer Costs \ud83d\udcb0 Gross Pay (\u00a3) \ud83d\udcc5 Pay Period Monthly Weekly \ud83d\udd22 Tax Code (numeric part only) 1257L \u2192 1257 | BR\/D0 codes select below \ud83d\udccc Special Tax Code (optional) \u2014 None \/ Standard \u2014BR &#8211; Basic Rate (20% on all)D0 &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4658","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/comments?post=4658"}],"version-history":[{"count":10,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4658\/revisions"}],"predecessor-version":[{"id":4668,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4658\/revisions\/4668"}],"wp:attachment":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/media?parent=4658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}