React-stripe-elements: Is "Name on card" field in the roadmap?

[michael811]

This is a feature request.

Summary

Our client want to collect card holder name as part of the credit card info, but I can't find the element in this project. Will you consider to add it in the future? If so what's the ETA of it? Thanks!

[fred-stripe]

Great question! There's not a Cardholder Name element in Stripe Elements itself, so the recommended approach here is to use a normal text field component in your React application to collect your customer's name, and then pass that information to the Stripe.createToken() call:

https://github.com/stripe/react-stripe-elements#setting-up-your-payment-form-injectstripe

Building on this example you'd pass a dynamic value for name instead of "Jenny Rosen" when creating the card token or source:

class CheckoutForm extends React.Component {
  handleSubmit = (ev) => {
    // We don't want to let default form submission happen here, which would refresh the page.
    ev.preventDefault();

    // Within the context of `Elements`, this call to createToken knows which Element to
    // tokenize, since there's only one in this group.
    this.props.stripe.createToken({name: this.props.name}).then(({token}) => {
      console.log('Received Stripe token:', token);
    });
  };

This is assuming that your text field's value is getting dynamically updated in your application state and passed as a prop to your CheckoutForm component.

You can also pass the customer's address information when creating a token using the same approach:

https://stripe.com/docs/stripe-js/reference#stripe-create-token

Hope that clears things up!

[johnmcdowall]

It's really annoying that given the hoops you make developers jump through to integrate these elements, specifically the horrors of styling them to match the rest of the app UI, that you can't provide a complete set of elements that meet common needs.

Do you realize how annoying it is to implement a form using elements, and have one field have to be handled and styled totally differently from the others?

Can you reconsider the decision not to include a Cardholder name element and at least make the world a slightly better place? :)

[capndesign]

@fred-stripe Thanks providing that explanation, but it looks like there is no way to add a cardholder’s name when you are creating a source (as opposed to a token). Is there any solution to this problem?

[atty-stripe]

@capndesign you can pass in owner.name when calling createSource. This is documented in the API reference: https://stripe.com/docs/api/sources/create#create_source-owner.

Here's what a call might look like if you're using react-stripe-elements:

stripe.createSource({
  type: 'card',
  owner: {
    name: 'Jenny Rosen'
  }
})

[leonardoAlonso]

@fred-stripe Is any way to add the card holder name if I'm using payment_intents instead of tokens, I tried in billing_info[name] but this is not displayed in stripe dashboard