Pre populate email in Stripe Checkout from form

Question

I have a form and one of the form fields is as follows:

<input type="email" id="email" name="email" required>

I have a submit button at the bottom of the form that calls javascript and loads the Stripe Checkout.

<input type="button" id="charge-button" class="button radius member_button" value="Continue">

Javascript to call Stripe.

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  var handler = StripeCheckout.configure({
    key: '<?php echo $stripe['publishable_key']; ?>',
    image: '/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.
    $.post("", {token: token, type: 'charge'}, function(res){
        if(res.status){
            $('form').submit();
        }
    },"json");
      console.log(token);
    }
  });

$('#charge-button').on('click', function(e) {
    handler.open({
      image: '/logo.png',
      name: 'Shop.com',
      description: 'Product',
      email: 'example@email.com',
      currency: 'gbp',
      amount: 2000
    });
    e.preventDefault();
  });
 $(window).on('popstate', function() {
    handler.close();
  }); 

</script>

I want to be able to grab the value from the form field and pass it to where I currently have example@email.com.

I am a coding newbie so appreciate your patience.

Many thanks,

John

Answer 1

You can do this by storing email address when user submit form. So your code will look like this -

 <input type="email" id="email" name="email" required>

    $('#charge-button').on('click', function(e) {

       var userEmail = $('#email').val();

        handler.open({
          image: '/logo.png',
          name: 'Shop.com',
          description: 'Product',
          email: userEmail,
          currency: 'gbp',
          amount: 2000
        });
        e.preventDefault();
      });
     $(window).on('popstate', function() {
        handler.close();
      });

Answer 2

I did it in this way

<form action="YOUR_URL" method="POST">
    <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_123eqweqweqweqwe12g"
        data-amount="AMOUNT_YOU_EXPECTED_TO_CHARGE"
        data-email="ECHO_EMAIL_ADDESS_HERE"
        data-name="Hey Title"
        data-description="DESCRIPTION_FOR_FORM"
        data-image="/profilePics/default.jpg"
        data-locale="auto">
    </script>
</form>