setting variable from input field

Question

I have a form that contains an input field for an email address. The form doesn't have a submit button. Instead it has the Stripe checkout.js script which provides a button that triggers a roundtrip to Stripe (to process a credit card) before submitting the form. The checkout.js script allows an optional variable data-email which makes it possible to pass a preset email address to the Stripe checkout form. I'd like to set the data-email variable with the value of the email address input field on my own form.

Here's the form and the script:

<form role="form" class="new_user" id="new_user" action="/users" method="post">
    <label for="user_email">Email</label>
    <input class="form-control" type="email" value="" name="user[email]" id="user_email" />
   <script src="https://checkout.stripe.com/v2/checkout.js"
       class="stripe-button"
       data-email=document.getElementById('user_email').value
       data-key="stripe_key"
       data-description="Product"
       data-amount="500">
   </script>
</form>

I know I need to use:

data-email=document.getElementById('user_email').value

But the data-email isn't getting set. Do I need to add an onchange property to the input field? What would that look like? Do I need more than that?

Answer 1

If the user is entering his email on the page, you might as well just update the script as they type:

var stripe = document.getElementById("stripe");
document.getElementById("email").onkeypress = function () {
    stripe.setAttribute("data-email", this.value);
}

<input id="email">
<script id="stripe"></script>

If you run the snippet and inspect the input element, then type, you'll see the data-email attribute update for the given stripe script tag. You should be able to adapt this to your form.