PayPal Fee Calculator

PayPal Fee Calculator Project (PHP Web Based Application)

In this article, I will show on how to create PayPal Fee Calculator which will be using PHP hypertext pre-processor. This calculator will calculate total amount that has to be paid which involve a small fee. Fees is charged by PayPal based on two criteria which is base fee, and fixed fee. Base fee is rate which depend on monthly sales volume. While fixed fee is amount that are converted from USD to currency you wish to use. This project will be using MYR (Malaysian Ringgit Malaysia) as base currency.

PayPal Fee Calculator – Getting Start

First of all, make sure your webserver is supporting PHP. Recommended PHP version is 5.4 or newer. This project will consist 4 different files.

  1. calculation.php
  2. index.php
  3. paypal.svg
  4. style.css

The only file that you can’t create yourself is paypal.svg. This is a SVG file (Scalable Vector Graphics), which are well optimize in file size (quicker to load) and scalable with any device screen resolution. Unless you want to trouble yourself with Adobe Illustrator, you can get this file from this website;-

https://worldvectorlogo.com/logo/paypal

PayPal SVG logo download

PayPal Fee Calculator – Code

The first file that we going to create is index.php. Using any code editor such as Brackets, we will write head content with a few meta information.

<head>
    <title>Paypal Fee Calculator</title>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="XGEA TECH" name="author">
    <meta content="PayPal Fee Calculator (MYR)" name="description">
</head>

We will using library such as jQuery and Bootstrap 4.0. Instead of hosting the script ourselves, we will simply use CDN (Content Delivery Network) from cdnjs. Simply paste the code in the head section of index.php.

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" >
</head>

On body section of index.php, we will create 3 DIV class called outer, middle and container.

<body>
    <div class="outer">
        <div class="middle">
            <div class="container">
            </div>
        </div>
    </div>
</body>

To ensure DIV’s properties has correct style, we will create a file called style.css. To make focus content appear at the center, a table-cell display will be written on CSS.

body {
    margin: 0px;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #121212;
}

.middle {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    font-family: monospace;
    color: #FFF;
}

.content {
    background-color: #FAFAFA;
    padding: 30px;
    color: #000;
}

Back to index.php, we will add one line at head section to load style.css file that we just created.

<link href="style.css" rel='stylesheet' type='text/css'>

Inside DIV called container, we will load PayPal logo that we had. We use 100% width to make it responsive in any device viewport. Height will be auto as image will keep the height proportion corresponding to it’s width.

<div class="outer">
    <div class="middle">
        <div class="container">
            <img src="paypal.svg" width="100%" height="auto">
        </div>
    </div>
</div>

PayPal Logo Element

Use H1 tag for title. To make user able to do amount input, we will create input box with “amount” as id. Input type will be number to prevent user writing character beside numbers. Calculate button will be at the bottom of input box, with “calculator-button” as id. Since we use Bootstrap 4.0, there is no need for use to style this button on CSS. Simply write “btn btn-primary btn-lg btn-block” as button class. Both input box and calculate button should be inside DIV with “input” as id so that we can hide both content after calculation is perform.

<div class="container">
    <img src="paypal.svg" width="100%" height="auto">
    <div class="content">
        <h1>PayPal Fee Calculator (MYR)</h1>
        <br>
        <div id="input">
            <input id="amount" class="form-control" type="number" placeholder="Enter Amount (MYR)">
            <br>
            <button type="button" id="calculate-button" class="btn btn-primary btn-lg btn-block">Calculate</button>
        </div>
    </div>
</div>

PayPal Calculator Input

Below DIV with input as id, we will create another DIV called result and reset. Result DIV will have no content inside, since content will be retrieved via JavaScript. Once calculation is finish, we need to show reset button so that user can write another input to perform calculation again. Both result and reset DIV will need to be hidden by default and only shown after calculation is finish. To do this, we will add style=”display: none;” on DIV as inline element.

<div id="result" style="display: none;"></div>
<div id="reset" style="display: none;">
    <button type="button" id="reset-button" class="btn btn-primary btn-lg btn-block">Calculate Another</button>
</div>

Before closing body tag, we will write a JavaScript to load calculation into result DIV. Based on input box value, it will be use as variable for GET calculation. This script will also hide input DIV and unhide both result and reset DIV. Alert box will appear if no value is written on input box.

<script>
$("#calculate-button").click(function calculation(){
var amount = $('#amount').val();
if($.trim($('#amount').val()) == ''){
alert('Amount cannot be empty!');
}
else {
$('#result').load('calculation.php?amount=' +amount);
}
})
$(document).ajaxComplete(function(calculation) {
$('#input').hide();
$("#result").show();
$("#reset").show();
});
</script>

Using GET URL parameter, amount value is passed to script for calculation. To get total fees that are charged by PayPal, we will be using amount from GET multiply flexible rate. In this case, flexible rate that are charged is 3.9%. Dividing 3.9 to 100, we will get 0.039. This value will be added with fixed rates. Therefore, we will get total fees. The final value that we want is total amount, which adding both total fees and base amount.

<?php
// GET URL value. Example: http://localhost/calculation.php?amount=50
$AMOUNT = $_GET["amount"];
// Flexible rate charged by PayPal
$FLEXIBLE_RATE = '0.039';
$FLAT_RATE = '2';
// Calculate flexible value from amount
$PERCENT_FEE = $AMOUNT * $FLEXIBLE_RATE;
// Calculate total fee charged (flexible + fixed)
$TOTAL_FEE = $PERCENT_FEE + $FLAT_RATE;
// Calculate total amount
$TOTAL_PAY = $AMOUNT + $TOTAL_FEE;
?>

At the bottom of calculation.php script, we will write a table format to show all result. To make sure it follows Bootstrap 4 style, we will add class=”table table-bordered” into table tag when requested by index.php. Amount are rounded to 2 decimal point using PHP ROUND functions.

<table class="table table-bordered">
<tr>
    <th>Description</th>
    <th>Value (RM)</th>
</tr>
<tr>
    <td>Amount that seller need</td>
    <td><?php echo $AMOUNT; ?></td>
</tr>
<tr>
    <td>PayPal Fee (3.9% + RM 2)<br>Note: Rate for monthly sales volume less than 12K MYR</td>
    <td><?php echo round($TOTAL_FEE, 2); ?></td>
</tr>
<tr>
    <td>Total amount buyer need to pay</td>
    <td><b><?php echo round($TOTAL_PAY, 2); ?></b></td>
</tr>

After result page is display, reset button will appear and calculate button will disappear. This actually is done by JavaScript that hide DIV with correct ID. To show back input box and calculate button, we will simply need to unhide input DIV and hide both result and reset DIV.

<script>
$("#reset-button").click(function reset(){
$('#input').show();
$("#result").hide();
$("#reset").hide();
});
</script>

PayPal Calculation Results

PayPal Fee Calculator – Online Demo

Online demonstration of this project is available at;-
https://xgea.info/apps/paypal-calculator/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.