Stripe custom amount field

Question

Stripe has a new pretty easy pay with card button. I want to hack it so I can pass a custom amount to it.

I have a div with a form

 <div>
 <form>
 <select> 
 <option value"1000">$10</option>
 <option value:2000>$20</option>
 </select>

OR an input button

 <input id="amount" />
 <button id="buy">Buy Shirt</button>
 </form> 
 </div> 

when the user clicks the buy shirt button the div to the pay with stripe button is shown and the value selected above is passed to the data-amount stripe field. The amount entered in the input will have to be multiplied by 100 since the stripe data-amount has to be in cents

<div id='form' style="display:none">
<form action="" method="POST">
<script
src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_kgwan(blah blah)"
data-amount="2000"
data-name="Demo Site"
data-description="2 widgets ($20.00)"
data-image="/128x128.png">
</script>
</form>
</div>

No Stripes doc on how to do this.

Answer 1

First replace the script with a normal button:

          <button id="customButton" class="btn btn-primary">Pay</button>

then insert a script like this. In my case, my radio buttons have a name of "deal". I loop through them to find the one that's selected, then insert the right value and description in the stripe open function:

      <script>
        $('#customButton').click(function(){
          var token = function(res){
            var $input = $('<input type=hidden name=stripeToken />').val(res.id);
            $('form').append($input).submit();
          };

            var dealValue;
            var deal = document.getElementsByName('deal');
            for (var i = 0, length = deal.length; i < length; i++) {
                if (deal[i].checked) {
                    dealValue = deal[i].value;
                }
            }

            var description;
            if(dealValue == 1000)
                description = "small t-shirt";
            else if(dealValue == 2000)
                description = "medium t-shirt";
            else if(dealValue == 3000)
                description = "large t-shirt";

          StripeCheckout.open({
            key:         'putyourkeyhere',
            amount:      dealValue,
            currency:    'usd',
            name:        'putyourname',
            description: description,
            panelLabel:  'Checkout',
            token:       token
          });

          return false;
        });
      </script>