How to pre-populate email in the Stripe payments dialog popup - stripe-payments

Question

I cannot seem to find a way to pre-populate the email address in the stripe payment popup. However this weekend I signed up for two accounts on websites that use stripe payments and I realized those websites had my email pre-populated in the stripe dialog iframe box. So I know there must be a way but I am unsure of how to do that. The docs don't define that property.
Can someone explain how this is done using the javascript API and the basic Stripe dialog?

Answer 1

If you're using Simple Checkout you pass the email in data-email like this:
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-image="/img/documentation/checkout/marketplace.png"
data-name="Stripe.com"
data-description="2 widgets"
data-amount="2000"
data-email="customer#email.com"
data-locale="auto">
</script>
</form>
If you're using Custom Checkout you pass the email in the email parameter to handler.open():
handler.open({
name: 'Stripe.com',
description: '2 widgets',
amount: 2000,
email: "customer#email.com"
});

Answer 2

If you want to dynamically set the email (for Simple Checkout ) using js you must dynamically create the whole script element to make sure it loads properly. This can be done like this:
//create our stipe script element
var stripescript = document.createElement('script'); //create script element
//dynamicaly load stripe checkout attributes
stripescript.setAttribute('src','https://checkout.stripe.com/checkout.js');
stripescript.setAttribute("data-key","[YOUR STRIPE TOKEN]" )
stripescript.setAttribute("data-amount","90" )
stripescript.setAttribute("data-locale","auto")
stripescript.setAttribute("class","stripe-button")
stripescript.setAttribute("data-billing-address",true)
stripescript.setAttribute("data-panel-label","Update")
stripescript.setAttribute("data-currency","gbp")
// any other attributes you want to add stripescript.setAttribute("[name]","[value]")
//insert script element inside of div or an other element
document.getElementById('[ID OF ELEMENT YOU WANT TO PUT THE FORM INTO]').appendChild(stripescript);