.ps-section { margin-bottom: 25px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background: #fff; }
.ps-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; color: #2c3e50; border-bottom: 2px solid #3498db; display: inline-block; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ps-field { display: flex; flex-direction: column; }
.ps-field label { font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; color: #555; }
.ps-field input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.ps-btn { background-color: #27ae60; color: white; padding: 15px 30px; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; width: 100%; margin-top: 20px; font-weight: bold; transition: background 0.3s; }
.ps-btn:hover { background-color: #219150; }
#paystub-output { margin-top: 30px; display: none; border: 2px solid #333; padding: 0; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.stub-header { background: #333; color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.stub-body { padding: 20px; }
.stub-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.stub-table th { background: #f4f4f4; text-align: left; padding: 10px; border-bottom: 2px solid #ddd; }
.stub-table td { padding: 10px; border-bottom: 1px solid #eee; }
.stub-footer { background: #f9f9f9; padding: 20px; border-top: 2px dashed #ccc; display: flex; justify-content: space-between; }
.net-pay-box { text-align: right; }
.net-pay-amount { font-size: 2rem; font-weight: bold; color: #2c3e50; }
@media (max-width: 600px) { .ps-grid { grid-template-columns: 1fr; } .stub-header { flex-direction: column; text-align: center; } }
function calculatePayStub() {
// Get inputs
var employeeName = document.getElementById("employeeName").value || "Employee Name";
var companyName = document.getElementById("companyName").value || "Company Name";
var periodEnd = document.getElementById("periodEnd").value || new Date().toLocaleDateString();
var hourlyRate = parseFloat(document.getElementById("hourlyRate").value) || 0;
var regHours = parseFloat(document.getElementById("regularHours").value) || 0;
var otHours = parseFloat(document.getElementById("otHours").value) || 0;
var otMultiplier = parseFloat(document.getElementById("otRate").value) || 1.5;
var fedRate = parseFloat(document.getElementById("fedTax").value) || 0;
var stateRate = parseFloat(document.getElementById("stateTax").value) || 0;
var ssRate = parseFloat(document.getElementById("ssTax").value) || 0;
var medRate = parseFloat(document.getElementById("medTax").value) || 0;
var otherFixed = parseFloat(document.getElementById("otherDeductions").value) || 0;
// Earnings Logic
var regTotal = hourlyRate * regHours;
var otRate = hourlyRate * otMultiplier;
var otTotal = otRate * otHours;
var grossPay = regTotal + otTotal;
// Tax Logic
var fedAmt = grossPay * (fedRate / 100);
var stateAmt = grossPay * (stateRate / 100);
var ssAmt = grossPay * (ssRate / 100);
var medAmt = grossPay * (medRate / 100);
var totalDeductions = fedAmt + stateAmt + ssAmt + medAmt + otherFixed;
var netPay = grossPay – totalDeductions;
// Update UI
document.getElementById("outEmployee").innerText = employeeName;
document.getElementById("outCompany").innerText = companyName;
document.getElementById("outPayDate").innerText = periodEnd;
document.getElementById("rowRegRate").innerText = hourlyRate.toFixed(2);
document.getElementById("rowRegHours").innerText = regHours;
document.getElementById("rowRegTotal").innerText = regTotal.toFixed(2);
document.getElementById("rowOtRate").innerText = otRate.toFixed(2);
document.getElementById("rowOtHours").innerText = otHours;
document.getElementById("rowOtTotal").innerText = otTotal.toFixed(2);
document.getElementById("outGross").innerText = grossPay.toFixed(2);
document.getElementById("outFedRate").innerText = fedRate;
document.getElementById("outFedAmt").innerText = fedAmt.toFixed(2);
document.getElementById("outStateRate").innerText = stateRate;
document.getElementById("outStateAmt").innerText = stateAmt.toFixed(2);
document.getElementById("outSSRate").innerText = ssRate;
document.getElementById("outSSAmt").innerText = ssAmt.toFixed(2);
document.getElementById("outMedRate").innerText = medRate;
document.getElementById("outMedAmt").innerText = medAmt.toFixed(2);
document.getElementById("outOtherAmt").innerText = otherFixed.toFixed(2);
document.getElementById("outTotalDeduct").innerText = totalDeductions.toFixed(2);
document.getElementById("outNet").innerText = netPay.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
// Show result
document.getElementById("paystub-output").style.display = "block";
// Scroll to result
document.getElementById("paystub-output").scrollIntoView({ behavior: 'smooth' });
}
Free Pay Stub Template & Calculator
Generate a professional earnings statement instantly. This tool calculates gross pay, taxes, and deductions to provide an accurate net pay estimate for your records.
1. Basic Information
2. Earnings
3. Deductions & Taxes (%)
COMPANY NAME
Earnings Statement
Pay Date: —
EMPLOYEE: —
| Earnings | Rate | Hours | Total |
|---|---|---|---|
| Regular Pay | $0.00 | 0 | $0.00 |
| Overtime | $0.00 | 0 | $0.00 |
| GROSS EARNINGS | $0.00 | ||
| Deductions & Taxes | Rate/Info | Amount |
|---|---|---|
| Federal Income Tax | 0% | -$0.00 |
| State Income Tax | 0% | -$0.00 |
| Social Security | 0% | -$0.00 |
| Medicare | 0% | -$0.00 |
| Other Deductions | Fixed | -$0.00 |
| TOTAL DEDUCTIONS | -$0.00 | |
Understanding Your Pay Stub
A pay stub is a document that outlines the details of an employee's pay for a specific period. Whether you are a small business owner, a freelancer, or an employee looking to verify your income, understanding how to calculate these figures is crucial for financial planning.
Key Components of a Pay Stub
- Gross Pay: This is the total amount earned before any taxes or deductions are removed. It includes regular wages and overtime pay.
- Federal Income Tax: The amount withheld for the IRS based on current tax brackets.
- FICA Taxes: This includes Social Security (currently 6.2% for most employees) and Medicare (1.45%). Employers typically match these amounts.
- State Tax: Depending on where you live, the state may withhold a percentage of your income for state-level programs and services.
- Net Pay: Often referred to as "Take-Home Pay," this is the final amount you receive after all deductions have been subtracted from your gross pay.
How to Calculate Your Net Pay
To calculate your net pay manually, follow these steps:
- Calculate Regular Pay: Multiply your hourly rate by the number of hours worked (up to 40).
- Calculate Overtime: Multiply your overtime hours by (Hourly Rate × Multiplier).
- Sum Gross Pay: Add Regular + Overtime.
- Calculate Deductions: Apply tax percentages to the Gross Pay.
- Subtract: Subtract the total deductions from the Gross Pay.
Example Calculation
If an employee earns $20 per hour and works 45 hours in a week:
- Regular Pay: 40 hours × $20 = $800
- Overtime Pay: 5 hours × ($20 × 1.5) = $150
- Gross Pay: $950
- If total taxes are 20%: $950 × 0.20 = $190
- Net Pay: $950 – $190 = $760