Menu
By default, when using stripe in popup (stripe-checkout) the Email field is sent as card[name].
But when I'm using stripe elements (stripe fields as inline fields, without popup) there is no email field and if I add my own email field it seems to be ignored by stripe. It results in customer being added on stripe without email which makes it tedious to identify one customer from another.
How can I modify this code to pass email to stripe? demo: https://jsfiddle.net/ywain/foc0L56q/
<script src="https://js.stripe.com/v3/"></script>
<body>
<form action="//httpbin.org/post" method="POST">
<input type="hidden" name="token" />
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
<div class="group">
<label>
<span>Email</span>
<input id="email" name="email" class="field" placeholder="[email protected]" />
</label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
<div class="error"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
</body>
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card');
card.mount('#card-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// In this example, we're simply displaying the token
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
// In a real integration, you'd submit the form with the token to your backend server
var form = document.querySelector('form');
form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
form.submit();
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
stripe.createToken(card).then(setOutcome);
});
488
You would do this in backend code, not in frontend Javascript. When your backend receives the payment token and email address from the POST data the form sends, you'd use that to set the email property when creating a customer. [0] It would be similar to this(in PHP as an example)
$token = $_POST['token'];
$email = $_POST['email'];
$customer = \Stripe\Customer::create([
'email' => $email,
'source' => $token,
]);
$charge = \Stripe\Charge::create([
'customer' => $customer->id,
'amount' => 5000,
'currency' => 'usd',
]);
[0] - https://stripe.com/docs/api/customers/create#create_customer-email
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
