Open Source Code for PayPal Fee Calculator https://gauravtiwari.org/apps/paypal-fee-calculator/

PayPal Fee Calculator.html

<form id="paypalFeeCalculator">
        <div class="form-group">
            <label class="form-label">Enter An Amount (USD)</label>
            <div class="input-group box-lr">
                <span class="input-group-text">$</span>
                <input type="number" step="any" id="amount" class="form-control" required>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Fee Rate</label>
            <div>
                <select class="form-control" id="fee">
                    <optgroup label="Domestic">
                        <option value="2.9||.30">2.9% + $.30 (via online transaction)</option>
                        <option value="2.7||.30">2.7% + $.30 (via store location)</option>
                        <option value="2.2||.30">2.2% + $.30 (Nonprofit)</option>
                        <option value="5||.05">5% + $.05 (Micropayment)</option>
                        </optgroup>
                        <optgroup label="International">
                        <option value="4.4||.30">4.4% + $.30 (via online transaction)</option>
                        <option value="4.2||.30">4.2% + $.30 (via store location)</option>
                        <option value="3.7||.30">3.7% + $.30 (Nonprofit)</option>
                        <option value="6.5||.05">6.5% + $.05 (Micropayment)</option>
                        </optgroup>
                        <optgroup label="Mobile Card Reader">
                        <option value="2.7||.00">2.7% (swiped &amp; check-in transactions)</option>
                        <option value="3.5||.15">3.5% + $.15 (keyed or scanned transactions)</option>
                        <option value="5.7||.00">4.2% (International +1.5% cross-border fee)</option>
                        </optgroup>
                        <optgroup label="Virtual Terminal">
                        <option value="3.1||.30">3.1% + $.30 (Domestic)</option>
                        <option value="4.6||.30">4.6% + $.30 (Cross-border)</option>
                        </optgroup>
                </select>
            </div>
        </div>
        <div class="form-group text-center">
            <button type="button" class="btn btn-info" onclick="calculateFee()">Calculate</button>
            <button type="button" class="btn btn-lime" onclick="sampleInput()">Sample</button>
            <button type="button" class="btn btn-warning" onclick="resetForm()">Reset</button>
        </div>
        <div class="form-group box-lr">
            <label class="form-label block-half mt-none mb-none">Calculated Fee:</label>
            <div id="calculatedFee" class="mt-none mb-none block-half"></div>
        </div>
    </form>

    <script>
       function calculateFee() {
    var amount = parseFloat(document.getElementById('amount').value);
    var feeDetails = document.getElementById('fee').value.split('||');
    var percentage = parseFloat(feeDetails[0]);
    var fixed = parseFloat(feeDetails[1]);
    var fee = (amount * (percentage / 100)) + fixed;
    document.getElementById('calculatedFee').innerText = '$' + fee.toFixed(2);
}

function sampleInput() {
    document.getElementById('amount').value = '100';
    document.getElementById('fee').value = '2.9||.30';
}

function resetForm() {
    document.getElementById('paypalFeeCalculator').reset();
    document.getElementById('calculatedFee').innerText = '';
}
    </script>
<style>
        /* Add your CSS styling here */
        .form-group {
            margin-bottom: 15px;
        }
        .input-group-text {
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            padding: 0.375rem 0.75rem;
        }
        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .btn {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .btn-info {
            color: #fff;
            background-color: #17a2b8;
            border-color: #17a2b8;
        }
        .btn-lime {
            color: #fff;
            background-color: #22a340;
            border-color: #22a300;
        }
        .btn-warning {
            color: #212529;
            background-color: #ffc107;
            border-color: #ffc107;
        }
    </style>