Javascript Fees calculate

Asked by At

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),

Please check the code below what is wrong with it? Please help.

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>

3 Answers

1
AmirBll 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
0
Sven Writes Code 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

priceInput.addEventListener('keyup', (event) => {
  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" />

0
Banzay 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>