CODEWITHSUNDEEP
javascriptstripe-payments
van_folmert
van_folmert

Reputation: 4507

How to pass email to stripe when using stripe elements?

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

Upvotes: 4

Views: 3549

Answers (2)

Shikha
Shikha

Reputation: 108

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

Upvotes: 1

Karl Reid
Karl Reid

Reputation: 2217

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

Upvotes: 1

Related Questions