setting up stripe with custom amount

Question

I have a problem with setting custom amount, I would like to set data-amount to whatever user will choose in input id="custom-donation-amount", how should I do that. my attempt doesn't work.

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-image="images/button.png"
  data-key="pk_test_FTZOOu9FL0iYJXXXXXX"
  data-name="Fund"
  data-label= "DONATE"
  data-description="ysysys"
  data-amount = 
  >

    $('.donate-button').click(function(event){
    var self = $(this);
    var amount = 0;
     amount = $('#custom-donation-amount').val();
      if (amount === "") {
        amount = 50;
      }

    amount = self.attr('data-amount');
    amount = Math.abs(amount * 100);
  });

</script>
 <input type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00"/>

Answer 1

The particular method (simple, embedded form) being used won't work towards the sought end. You must instead use the more flexible custom integration, as seen in the docs. The only thing not included in the provided example is how to hook up the amount input, which is not at all difficult.

<input class="form-control"
       type="number"
       id="custom-donation-amount"
       placeholder="50.00"
       min="0"
       step="10.00"/>
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton ">Purchase</button>
<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_ppailxxxxxxxxxxxxxxxxxxx',
    image: '/square-image.png',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // This line is the only real modification...
    var amount = $("#custom-donation-amount").val() * 100;
    handler.open({
      name: 'Demo Site',
      description: 'Some donation',
      // ... aside from this line where we use the value.
      amount: amount
    });
    e.preventDefault();
  });
</script>

Note that you'll actually have to fill out the token: function passed to the StripeCheckout.configure call. In particular, you'll need to either submit a form or an ajax request and handle that accordingly on your server. You will then use this information on the server, together with the secrete key, to send a payment creation request to Stripe. The Stripe documentation has details on what information will need to be sent to their API call, and thus, what information you'll need to pass along to the API call on your server. In particular, note that you'll probably have to do some additional grabbing of prices etc in your token function.