How to add card holder's name to Stripe checkout using Elements?

Question

I need to add an additional field to my custom form, I want to add the name of the credit card.

I tried in the following way:

var cardNameElement = elements.create('cardName', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNameElement.mount('#card-name-element');

<div id="card-name-element" class="field"></div>

But this does not work, in its documentation only allows to perform these procedures validating only four elements or data: cardNumber, cardExpiry, cardCvc, postalCode.

How can I add the name of the credit card and validate it using stripe.js

My code:

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var style = {
  base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',

    '::placeholder': {
      color: '#CFD7E0',
    },
  },
};

var cardNumberElement = elements.create('cardNumber', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style
});
cardCvcElement.mount('#card-cvc-element');

/*var postalCodeElement = elements.create('postalCode', {
  style: style
});
postalCodeElement.mount('#postal-code-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');
  }
}
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(cardNumberElement).then(setOutcome);
});

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>

  <form action="" method="POST">
   <input type="hidden" name="token" />
   <div class="group">
    <div class="card-container1">
     <label>
      <span class="title-card">Card number</span>
         <div id="card-number-element" class="field"></div>
         <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
        </label>
       </div>
    <div class="card-details">
     <div class="expiration">
      <label>
       <span class="title-card">Expiry date</span>
       <div id="card-expiry-element" class="field"></div>
      </label>
     </div>
     <div class="cvv">
      <label>
       <span class="title-card">CVC</span>
       <div id="card-cvc-element" class="field"></div>
      </label>
     </div>
    </div>
   </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>

What I want to do:

score 48 · Answer 1 · answered Nov 05 '17 at 14:54

48

Elements does not support collecting the cardholder's name at the moment. It focuses on collecting:

Card number
Expiration date
CVC
ZIP code (in some countries)

If you want to collect the cardholder's name you have to build your own field for the name and submit it to the API during token creation:

var card_name = document.getElementById('card_name').value;
stripe.createToken(card, {name: card_name}).then(setOutcome);

You can see a live example on jsfiddle here: https://jsfiddle.net/7w2vnyb5/

answered Nov 05 '17 at 14:54

koopajah

23,792
9
78
104

1

When filling in all the data, except the name, the form is sent without showing error of the the field name, how can I validate it with a stripe or with a javascript code of jQuery simple – Nov 05 '17 at 20:51
@StaOne just add some logic in your code to see if the field is empty or not and only create a token if it's not empty – koopajah Nov 05 '17 at 20:54
2

If only I had found this post earlier, it would have saved me hours of looking through the poor (albeit, extensive) stripe documentation. It seems elements is lacking in what it can do, and they don't hint at the fact that the extra UI components simply aren't there. Thank you for this information koopajah. – Neil Watson Jan 27 '19 at 13:34
I haven't used this in production yet, it works in the test environment. Will the charge be able to go through if Stripe does not know the cardholder's name? – Adam Oct 31 '19 at 04:36
1

@Adam: yes the cardholder is not required for a transaction. – koopajah Oct 31 '19 at 20:35
The fiddle requires manual input of name, whereas ideally one click would auto-fill both name and CC data ; https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill – patrick Apr 29 '21 at 20:43
Here are 2 jsfiddle examples that capture and validate the card holder name: [Stripe - Elements w/ separate fields & card holder name](https://jsfiddle.net/randyburden/o8y5L297/) and [Stripe - Elements w/ card holder name](https://jsfiddle.net/randyburden/95kvu6ne/7/) – Randy Burden Jul 22 '22 at 18:04

score 12 · Answer 2 · answered Dec 03 '19 at 16:46

If you're using "PaymentIntents", which you probably should be if you're EU based / SCA compliant, then the format for this has changed again slightly...

stripe.confirmCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  {
    payment_method: {
      card: cardElement,
      billing_details: {
        name: 'Jenny Rosen'
      }
    }
  }
).then(function(result) {
  // Handle result.error or result.paymentIntent
});

stripe.confirmCardPayment docs:

https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment

billing_details object docs:

https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details

score 10 · Answer 3 · answered Feb 23 '19 at 09:35

As I struggled like an idoit on this for a while. As of Feb 2019 you can add tokenData object with information on the details of the card. For Example:

let custData = {
                          name: 'Firstname Lastname',
                          address_line1: '21 Great Street',
                          address_line2: 'Shilloong',
                          address_city: 'Chicago',
                          address_state: 'Illinois',
                          address_zip: '12345',
                          address_country: 'US'
              };

              stripe.createToken(card, custData).then(function(result) {
                if (result.error) {
                  // Inform the user if there was an error.
                  var errorElement = document.getElementById('card-errors');
                  errorElement.textContent = result.error.message;
                } else {
                  // Send the token to your server.
                  stripeTokenHandler(result.token);
                }
              });
            });

now I would like to know how to transmit an email? do you perhaps know? — outline4, Sep 11 '19 at 10:52

whatbox · Answer 4 · 2020-01-13T23:59:15.500

I use Meta-Data for custom fields such as cardholder name:

... create({
              amount: myAmount,
              currency: 'USD,
              description: "Put your full discription here",
              source: tokenid,
              metedata: {any: "set of", key: "values", that: "you want", cardholder: "name"}
           },
             idempotency_key "my_idempotency_key"
           )}

resource: https://stripe.com/docs/payments/charges-api#storing-information-in-metadata

How to add card holder's name to Stripe checkout using Elements?

4 Answers4

Linked