CODEWITHSUNDEEP
stripe-payments
Subtubes
Subtubes

Reputation: 16873

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

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?

Upvotes: 34

Views: 15820

Answers (3)

ihaveonesun
ihaveonesun

Reputation: 51

In addition to Simple Checkout: If you chose to use the stripe-buy-button element, you can add the customer-email property. Getting for example:

<stripe-buy-button
  buy-button-id={{STRIPE_BUY_ID}}
  publishable-key={{STRIPE_PUBLISHABLE_KEY}}
  customer-email={{email}}
>
</stripe-buy-button>

In my case, I had used the email for checking in python, so I took the opportunity to pass it on as a context.

If the publishable-key is hardcoded in the HTML, I suggest putting the customer-email before it (for me it didn't recognize the property) But when I passed the publishable-key through Python, the order of the properties doesn't matter.

Buy button properties: https://stripe.com/docs/payment-links/buy-button#attributes-to-customize-checkout

Upvotes: 1

K Kreid
K Kreid

Reputation: 103

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

Upvotes: 1

koopajah
koopajah

Reputation: 25552

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="[email protected]"
    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: "[email protected]"
});

Upvotes: 53

Related Questions