Pre-populating data-email from a separate form (Form + Stripe Checkout)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am using Formspree and Stripe Checkout. I'd like to have the email entered into the Formspree form's

<input type="email" name="Customer Email" placeholder="your email here">

field be sent to the data-email="example@mail.com" so that the user only needs to plug in their email once for me to get it in both forms. What am I doing wrong here, is this possible? My code looks like this: https://jsfiddle.net/code4ever/n83d5h2k/t/

Thanks in advance.

awarded to Titus

Crowdsource coding tasks.

1 Solution

Winning solution
Tipped

The problem is the the script's attributes are interpreted as soon as the script is loaded.
It seems that when the script https://checkout.stripe.com/checkout.js is loaded, it creates a iframe element based on the data attributes.

To fix that, what you could do is to add the <script> element to the page only after the form is submitted (after the email address is set).

Here is an example:

https://jsfiddle.net/v262qug0/

Perfect. Cheers, Titus!
sharper 10 days ago
@sharper I've created an update https://jsfiddle.net/v262qug0/2/ The previous approach, doesn't work if you close the popup and change the email, in this one, the iframe is recreated every time the button is pressed.
Titus 10 days ago
@Titus I just noticed that, great! Thank you.
sharper 10 days ago