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:

What I want to do:

Answer 1

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/