John Higgins John Higgins - 5 months ago 17
HTML Question

Pre populate email in Stripe Checkout from form

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

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