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 ?

Send a http request of some kind. So either submit the form, or ajax, or something else. — James
– James, Commented Apr 16, 2019 at 16:29

Barmar · Accepted Answer · 2019-04-16 16:51:49Z

0

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();
});

edited Apr 16, 2019 at 16:51

answered Apr 16, 2019 at 16:36

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mark Over a year ago

I tried above code, but it removed the stripe button

Barmar Over a year ago

Did you removed the script tag from the HTML? This should be the only checkout.js script.

Barmar Over a year ago

You might have to use the custom functions instead of parameters to the script.

mark Over a year ago

I used the custom function in the link, it straight takes me to the other page where I retrieve the infos to save in database

mark Over a year ago

please check my queston I added what I tried, could you please look at it , is it correct ?

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related