Drop-in UI: allow an optional cardholder name field

[ntamas]

Is it possible to add an optional cardholder name field to the drop-in UI? I was searching high and low in the documentation but couldn't find anything related to this (I even tried hosted fields to no avail). I would like to have this field in the drop-in UI for two reasons:

1. In the country we are primarily targeting, users are used to having a cardholder name field in payment forms and in fact expect this to some extent. (Even as a computer savvy user, I was quite surprised when I saw the payment form for the first time and realized that all I need is a card number, an expiry date and a CVV).
2. Allowing the cardholder name to be submitted with the drop-in UI would make it possible to see the associated cardholder name in the list of transactions in the Braintree Dashboard, making it easier to identify transactions corresponding to a specific person.

I know that this is possible with a custom UI, but (as far as I understand) that would require our organization to fill a PCI SAQ A-EP questionnaire instead of a PCI SAQ A.

If this is not possible with the drop-in UI, are there any plans to add such a field in the near future?

[kyledetella]

@ntamas thanks for bringing this up. As of right now there aren't any plans to add this to Drop-in or Hosted Fields. Both of these products are intended to provide inputs for only number, cvc, expiration date and postal code.

You can however add as many fields as you need around Drop-in or Hosted Fields and pass those values to your server when you create a transaction.

Using Drop-in you could do something like this with your form:

<form id="checkout" method="post" action="/pay">
  <label>First Name</label>
  <input name="first_name" />

  <label>Last Name</label>
  <input name="last_name" />

  <div id="dropin-container"></div>

  <input type="submit" value="Pay" />
</form>

When that form is posted, you can use the values of first and last name include it when creating the transaction:

// This is an example using the node client library in an Express application

gateway.transaction.sale({
  amount: "10.00",
  paymentMethodNonce: "nonce-from-the-client",
  billingAddress: {
    firstName: req.body.first_name,
    lastName: req.body.last_name
  }
}, function (err, result) {
});

This same pattern applies to Hosted Fields as well, so if you wish to maintain visual parity between your credit card inputs and your customer information inputs I recommend taking a look at that.

I hope this helps. Let me know if you have any further questions.

[ntamas]

Thanks @kyledetella, this is helpful - but won't this mean that our integration will not be PCI SAQ A compliant any more? After all, some credit card related data (the cardholder name) ends up in our servers instead of being sent directly to Braintree's servers. Or is the cardholder name exempt from PCI DSS requirements because it is not strictly required for the transaction?

[kyledetella]

As long as you are using Drop-in or Hosted Fields to capture fields like card number and cvv you will still be eligible for SAQ A.

You can take a look at the PCI Docs (page 7) for more information on this issue.

The primary account number is the defining factor for cardholder data. If cardholder name, service code, and/or expiration date are stored, processed or transmitted with the PAN, or are otherwise present in the cardholder data environment, they must be protected in accordance with applicable PCI DSS requirements.

I hope this helps.

[rmdydo]

@kyledetella Are there still no plans to add cardholder name? The solution you provided does not add cardholder inputs to the drop-in generated form when you click change payment method, so users would still be able to enter cards without cardholder name. Braintree support has requested that we provide cardholder name and this not being available in the drop-in ui is a significant fraud issue for us. I don't quite understand why something like this was excluded from the form when cardholder name is collected in the vast majority of credit card forms seen around the web.

[mrak]

There are no plans to include a cardholder name field in Drop-in.

You can collect cardholder information separately from Drop-in and supply it as additional information when creating transactions or payment methods through our server-side SDKs.

As long as you are using Drop-in or Hosted Fields to capture fields like card number and CVV you will still be eligible for SAQ A, even if you are collecting the cardholder information separately from Drop-in and Hosted Fields.

You can see @kyledetella's comment for examples.

[tvdeyen]

@mrak @kyledetella how come that in your web UI you have a field "Cardholder Name" that is empty when submitting a transaction?

Is there a secret way to send the data anyway? I tried cardholderName and just name, but the JS SDK refuses these fields. Any hints on how to supply this data? It doesn't get these from the billingAddress, though.

[crookedneighbor]

@tvdeyen If you are PCI SAQ D compliant and pass the raw credit card details directly on your server, you can pass in card holder name as part of the credit card object.

Drop-in and Hosted Fields tokenize the card details within a Braintree iframe and pass back a payment method nonce. We don't include card holder name because the field is not required for tokenization or running the transaction.

[tvdeyen]

@crookedneighbor am I allowed to store the cardholder name with the nounce?

[crookedneighbor]

You can't provide both a payment_method_nonce and a credit_card object when making your transaction.sale call on the server.

At this time, we don't support card holder name with Drop-in or Hosted Fields, but we'll take note of your feedback for the new version of Drop-in that was recently released. See https://github.com/braintree/braintree-web-drop-in/issues/77 for a related issue.

[tvdeyen]

@crookedneighbor thanks for the clarification. I think I was not very clear with my question.

Am I allowed to store the nonce and the card holder name on the same record in my database? Or does this violate PCI compliance?

Re: #77 this is great news!

[crookedneighbor]

@tvdeyen You are allowed to store cardholder name in your database.

You can store the payment method nonce, but there's no reason to do so, as it is a one use token that is consumed after creating the payment method or transacting.

[crookedneighbor]

@tvdeyen v3.19.0 of Hosted Fields now allows you to pass in cardholder name (from a separate field) when tokenizing. See http://braintree.github.io/braintree-web/current/HostedFields.html#tokenize

This is not yet a part of braintree-web-drop-in, but may be added in the future.

[tvdeyen]

@crookedneighbor this is great news. Thanks 🎊

[mukdam]

Can you help me?

I am using magento 2 and my requirement as change expiry input to drop down. If its possible then tell me how or give me documents link or if not please tell me why

[crookedneighbor]

@mukdam Please contact our support team for help: https://developers.braintreepayments.com/forms/contact