Create Custom Amount in Stripe Button

Question

Stripe has an easy pay with card button. I want to hack it so I can pass a custom amount to it. (It defaults to 20)

The site currently under construction is http://pecosselfstorage.com/testpayments.html

I need the customer to be able to put in however much they want to pay. Whether this is in the pop-up after they click the button, or on the page next to the button doesn't matter much. I'd prefer it to be in the pop-up however.

Please don't just post links to Stripe's site, I've been through all of that and can't find any help there.

Any thoughts are welcome. Thanks!

Answer 1

No hacking needed. Checkout doesn't have a "default"—whatever you pass in as amount (or via the data-amount attribute, for the basic version) is what it bills.

If you want to let customers set their own price, you only need a text field and some JavaScript to inject the contents of that field into your Checkout call (in integer cents, remember).

Probably the easiest way to do this is to put a text field on the main page, then add your own button and call Checkout via its API . It'd be doable with the default button, but you don't have to touch the DOM or monitor the text field for changes this way.

Quick and dirty jQuery- ish pseudocode, assuming a button #payButton :

$('#payButton').click(function() {
  // prep goes here

    StripeCheckout.open({
      // data goes here
      amount: $('#payAmount').val * 100,
      // rest of data goes here
    });

  // etc
});