title: How to set amount to be charged on stripe button based on number of checkboxes selected
body: <p>Updated/Edited:</p>
  
  <p>I am trying to set the $ amount for the Stripe payment button based on number of checkboxes checked. Each being a cost of $3. i.e.; If one is checked the pay now button will reflect Pay Now $3. If two are checked the pay now button will reflect Pay Now $6, and so on.  I have zero experience with rails. The documentation for Stripe to accomplish this is foreign to me. I just do not know where to begin.  Here is what I have so far:</p>
  
  <pre><code>&lt;dl&gt;
   &lt;dt&gt;&lt;div label id="mustcheck"&gt;&lt;label for="cat1"&gt;1&lt;/label&gt;&lt;input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" /&gt;&lt;/dt&gt;
  
      &lt;dt&gt;&lt;label for="cat2"&gt;2&lt;/label&gt;&lt;input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /&gt;&lt;/dt&gt;
  
      &lt;dt&gt;&lt;label for="cat3"&gt;3&lt;/label&gt;&lt;input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /&gt;&lt;/dt&gt;
  
      &lt;dt&gt;&lt;label for="cat4"&gt;4&lt;/label&gt;&lt;input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /&gt;&lt;/dt&gt;
  
      &lt;dt&gt;&lt;label for="cat5"&gt;5&lt;input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /&gt;&lt;/div&gt;&lt;/dt&gt;  
  
      Price: &lt;strong&gt;$&lt;span name="total-price-view" id="total-price-view" value=""&gt;0&lt;/strong&gt;&lt;/span&gt;
  
      &lt;input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/&gt;
  </code></pre>
  
  <p>UPDATE: 
  I am going to use standard button on a review page. So I have taken the code from @korben's example and incorporated it into my signup page as follows (and also adding the class and the <code>&lt;span name="total-price-view&gt;</code> in the html form):</p>
  
  <pre><code>&lt;script src="https://checkout.stripe.com/checkout.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var pacs = document.getElementsByClassName("categories");
  
  function attachEventListeners() {
  for (var i = 0; i &lt; pacs.length; i++) {
  console.log('looping');
  pacs[i].addEventListener('change', function (e) {
          var totalPrice = calculatePrice();
    document.getElementById('total-price-view').innerHTML = totalPrice;
      });
    }
  }
  
  function calculatePrice() {
  var pricePerCheckbox = 3.00;  // $3.00
  var totalChecked = 0;
  for (var i = 0; i &lt; pacs.length; i++) {
      if (pacs[i].checked) {
      totalChecked++;
       }
   }
  var Totals = totalChecked * pricePerCheckbox;
  return Totals;
  }
  
   attachEventListeners();
  
    &lt;/script&gt;
  </code></pre>
  
  <p>What I need to do now is send the value of that <code>&lt;span&gt;</code> to the review page.</p>
  
  <p>I have tried:</p>
  
  <pre><code>&lt;body onload="calculatePrice()"&gt;
  Price: &lt;strong&gt;$&lt;span name="total-price-view" id="total-price-view" value="return calculatePrice()"&gt;0&lt;/strong&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I have also tried:</p>
  
  <pre><code>  document.getElementById('total-price-view').value = Totals;
  </code></pre>