# Javascript Fees calculate

I want to make Stripe.com fee calculator by Javascript. Stripe fee: 2.9% + 30¢

I made that: the value we want is (result), Price is (num1), 30 cent is (num2), %2.9 is (num3),

``````function multiplyBy() {
num1 = document.getElementById("firstNumber").value;
num2 = 0.3;
num3 = 0.971;

document.getElementById("result").innerHTML = num1 + num2 / num3
}``````
``````<form>
Value : <input type="text" id="firstNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="GO" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>`````` On

Here `num1` is string and can't adding or dividing with number value, at first you should change type of `num1` to number by this code `parseFloat(num1)`.

try this way:

``````document.getElementById("result").innerHTML = parseFloat(num1) + num2 / num3
`````` On

To make it more clear to yourself and people reading your code, you should consider using variables for the magic numbers. The first problem is the fee should be calculated with `input * 2.9% + \$0.30`. This is because Stripe doesn't charge a percentage on it's static portion of the fee. The other problem is not parsing the input string to a number. Use `parseFloat` to solve the issue. I also check if the value is `NaN` to protect against some invalid inputs.

``````const priceInput = document.getElementById('price');
const output = document.getElementById('output');
const stripeDynamic = 0.029; // stripe takes 2.9% of total txn
const stripeStatic = 0.3; // plus stripe takes 30 cents

const {
value
} = event.target;
const fee = parseFloat(value) * stripeDynamic + stripeStatic;
const roundedFee = (Math.round(fee * Math.pow(10, 2)) / Math.pow(10, 2)).toFixed(2);
const roundedInput = (Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2)).toFixed(2);

if (!isNaN(roundedFee) && !isNaN(roundedInput))
output.innerHTML = `Steve bought a dress on your site that was sold for \$\${roundedInput}. After Stripe takes their cut of \$\${roundedFee} you're left with \$\${roundedInput - roundedFee} to go to web design!`
})``````
``````<input id="price" />
<p id="output" />`````` On

You can try this solution, but this one allows zero or empty input, so you should validate input value.

``````function multiplyBy() {
num1 = document.getElementById("firstNumber").value;
num2 = 0.3;
num3 = 0.029;

document.getElementById("result").innerText = Math.round((num1 * num3 + num2) * 100) / 100;
}``````
``````<form>
Value : <input type="text" id="firstNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="GO" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>``````