Stripe checkout disabled by specific JavaScript statement on page

Question

I have implemented Stripe's Client-Only Dashboard Checkout ( https://stripe.com/docs/payments/checkout/client ) on an html page. I changed the quantity value in the Stripe JS code from the integer, 1, to a variable of my choosing called numb . I made no other changes to Stripe's JS code.

If I use my own JS code to change the value of numb to an integer of my choice then when I click the Checkout button the Stripe Checkout Page has updated the quantity and total price to reflect the value of numb . This is what I want.

The problem comes when, instead of numb = 2; , I use a JS statement which allows the user of the html page to change the value of numb . Here is the section of code:

  <P>How many tickets do you want to buy?</p>
  <input type="number" id="steve-number-tickets">
  <button id="steve-testing">How many?</button>

  <p id="test-for-numb"></p>

  <script>
    // ***MY CODE***
    numb = 7;
    // User Chooses
    var howManyButton = document.getElementById('steve-testing');
    howManyButton.addEventListener('click', function () {
      numb = 2;
      // numb = document.getElementById('steve-number-tickets').value;
      // document.getElementById('test-for-numb').innerHTML = numb;
    });
    // ***END OF MY CODE***
  </script>

With the code above as it is, I get the following behaviour. If the user refreshes the page and just clicks on the Checkout button, Stripe checkout bills them for 7 items. If they refresh the page and click my How Many? button and then the Checkout button, Stripe checkout bills them for 2 items.

If I change the code so numb = 2 is commented out and comments are removed from numb = document.getElementById('steve-number-tickets').value; , then if the user refreshes the page and clicks on the Checkout button, Stripe chekout bills them for 7 items. If they refresh the page and click my How Many? button (whether or not they first enter an integer into the input element) and then click on the Stripe Checkout button, Stripe checkout fails to load.

I thought it must be a problem with the statement: numb = document.getElementById('steve-number-tickets').value; . So, I tested that by uncommenting the statement document.getElementById('test-for-numb').innerHTML = numb; . When I do that, the value the user entered in the input element is displayed in the p element with id="test-for-numb" when they click on the How Many? button. So, that statement does work as expected.

I am unable to understand why Stripe checkout fails to load when I use the statement numb = document.getElementById('steve-number-tickets').value; but does load when I use numb = 2; .

I would really like to know what is going on.

Answer 1

This is because the value of an input is always a string -- the type=number only affects the UI, not the value type. You just need to wrap that in parseInt() to get an actual number, which is what the Checkout API expects.