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 8 months 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 8 months ago
@Titus I just noticed that, great! Thank you.
sharper 8 months ago