How to calculate value of installments with interest?

Question

How to calculate value of installments with interest?

I need help to calculate amounts with interest for simulation of billet payment via PicPay

According to the PicPay Page,

What fee to pay for tickets? Check out the fees for paying bills like PicPay:

To pay tickets with credit card: 2.99% on the amount of card payment;

To parcel tickets: 2.99% on the ticket value + 3.49% on each plot;

But when doing the calculations I am not being able to find the value that it gives me in the app

var jurosPorBoleto = 2.99;
var calculado = false;
var jurosPorParcela = 0.0349;

function gerarParcelas(){
if (calculado) {
    window.location.reload(true);
}
    calculado = true;
    
    let valor = parseFloat(document.getElementById("valor-total").value);
    if(valor == null){
        return 0;
    }
    console.log(valor);
    
    valor += valor*(jurosPorBoleto/100) ;
    console.log(valor);
    

    for (let parcela = 1.00; parcela <= 12; parcela++) {

        if (parcela == 1) {
           var  valorParceladoComJuros = valor;
           var valorTotalComJuros = valor;
        } else {
            var montante = valor * Math.pow((1 + jurosPorParcela), parcela);
            var valorParceladoComJuros = montante / parcela;
            var valorTotalComJuros = montante;
        }
        
                
        
        var node = document.createElement("li");
        node.setAttribute("class",  "list-group-item ")
        var textnode = document.createTextNode(parcela + "\tx \t" + parseFloat(valorParceladoComJuros).toFixed(2) +"\tTotal de R$" + parseFloat(valorTotalComJuros).toFixed(2));
            
        node.appendChild(textnode);
        document.getElementById("parcelas").appendChild(node);        
    }  
    
}

<!doctype html>
<html lang="en">
  <head>
    <title>Calculadora de boletos - PicPay</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
</head>
  <body>
    <div class="formulario">
      
        <img class="mb-4" src="./assets/Camada 2.png" alt="" width="90" height="90">
        <div class="input form-group">
            <input class="form-control" type="number" id="valor-total" placeholder="Valor" value="1000" required>

        </div>
        <div class="form-group">
          <button class="btn btn-success" type="submit" onclick="gerarParcelas()">Gerar Parcelas</button>
        </div>
      <div class="form-group">
          <ul id="parcelas" class="list-group list-group-flush">

            </ul>
      </div>

    </div>

 
    <!-- Optional JavaScript -->
    <script src="./bundle.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

1

javascript cálculo

Author: Luiz Claudio, 2019-05-22

Source

1 answers

score 2 · Answer 1

The formula for calculating interest is by the fixed-interest financing methodology .

In your case, the calculation looks like this:

var calculado = false;
var jurosPorBoleto = 0.0299;
var jurosPorParcela = 0.0349;

function gerarParcelas() {
  if (calculado) {
    window.location.reload(true);
  }

  calculado = true;

  let valor = parseFloat(document.getElementById("valor-total").value);

  if (valor == null) {
    return 0;
  }

  console.log(valor);
  valor += valor * jurosPorBoleto;
  console.log(valor);

  for (let parcela = 1; parcela <= 12; parcela++) {
    if (parcela == 1) {
      var valorParceladoComJuros = valor;
      var valorTotalComJuros = valor;
    } else {
      var valorParceladoComJuros = valor * jurosPorParcela / (1 - Math.pow(1 + jurosPorParcela, -parcela));
      var valorTotalComJuros = valorParceladoComJuros * parcela;
    }

    var node = document.createElement("li");
    node.setAttribute("class", "list-group-item ");

    var textnode = document.createTextNode(
      parcela +
        "\tx \t" +
        parseFloat(valorParceladoComJuros).toFixed(2) +
        "\tTotal de R$" +
        parseFloat(valorTotalComJuros).toFixed(2)
    );

    node.appendChild(textnode);
    document.getElementById("parcelas").appendChild(node);
  }
}

<!doctype html>
<html lang="en">

<head>
  <title>Calculadora de boletos - PicPay</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="main.css" rel="stylesheet">
</head>

<body>
  <div class="formulario">

    <img class="mb-4" src="./assets/Camada 2.png" alt="" width="90" height="90">
    <div class="input form-group">
      <input class="form-control" type="number" id="valor-total" placeholder="Valor" value="1000" required>

    </div>
    <div class="form-group">
      <button class="btn btn-success" type="submit" onclick="gerarParcelas()">Gerar Parcelas</button>
    </div>
    <div class="form-group">
      <ul id="parcelas" class="list-group list-group-flush">

      </ul>
    </div>

  </div>


  <!-- Optional JavaScript -->
  <script src="./bundle.js"></script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>

</html>