how to assign js variable to php variable without submitting the form

Question

I am trying to integrate Stripe's checkout. I am using https://checkout.stripe.com/checkout.js .
I have a amount's input box on the form and I want to pass that input box's value to Stripe's script. <input id="amount" name="amount" type="text" class="form-control" placeholder="Enter amount" onKeyUp="calculate()" pattern="^[0-9]*$">

Heres my stripes script

        <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="<?php echo $stripedetails['publishable_key']; ?>"
        data-amount="1000"//<-Amount here 
        data-name="KAEM Technologies USA, Inc"
        data-email="<?php echo $email;?>"
        data-currency="<?php echo $curr_code; ?>"
        data-description="Widget"
        data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                            data-locale="auto">
                          </script>

I tried using COOKIES , I tried to assign js function's var to php using

  var x = document.getElementById('amount').value;
  <?php $amount = "<script>document.write(x)</script>";?>

So how can I pass input box's value to stripe's script without submitting the form. Thanks
@barmar heres the code I tried:

 <button type="submit" id="custombutton" class="btn btn-primary" ><i class="fa fa-cc-stripe"></i>&nbsp;Pay Via Card&nbsp;&nbsp;</button>
                         <script src="https://checkout.stripe.com/checkout.js"></script>
                          <script>
                            var handler = StripeCheckout.configure({
                              key: 'pk_test_DzL83GJnn9U4lMBuk311P1hK0026zJJrLW',
                              image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
                              locale: 'auto',
                              token: function(token) {
                                // You can access the token ID with `token.id`.
                                // Get the token ID to your server-side code for use.
                              }
                            });

                            document.getElementById('customButton').addEventListener('click', function(e) {
                              // Open Checkout with further options:
                              handler.open({
                                name: 'KAEM Technologies (USA), Inc.',
                                description: '2 widgets',
                                amount: 2000
                              });
                              e.preventDefault();
                            });

                            // Close Checkout on page navigation:
                            window.addEventListener('popstate', function() {
                              handler.close();
                            });
                            </script>

Is this right ?

Answer 1

Use the "custom" integration described here , where you call Stripe checkout methods from JavaScript instead of putting everything into the <script> tag.

You can then fill in the amount: parameter from the form.

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'KAEM Technologies USA, Inc',
    description: 'Widget',
    amount: document.getElementById('amount').value,
    email: "<?php echo $email;?>"
  });
  e.preventDefault();
});