How to pass email to stripe when using stripe elements?
Question
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="jane.doe@example.com" />
</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);
});
2 answers
solution1
1 ACCPTED 2019-02-17 02:30:57
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
solution2
0 2019-02-18 12:37:08
Add a hidden field in you form for email
<input name="email" type="hidden" value="<?php echo "your_email";?>"/>
Get it in post function in php code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.