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

Question

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/

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

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

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