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 = eleme         


        

Answer 1

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

Answer 2

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

Answer 3

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/

Answer 4

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