search

braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 127 forks source link

Why on earth is the cardholder name for "Pay with card" inputmode=numeric? #874

Closed lol768 closed 1 year ago

lol768 commented 1 year ago

General information

Issue description

https://assets.braintreegateway.com/web/3.92.0/html/hosted-fields-frame.min.html
<input autocomplete="cc-name" type="text" autocorrect="off" autocapitalize="none" spellcheck="false" class="cardholderName" data-braintree-name="cardholderName" name="cardholder-name" id="cardholder-name" inputmode="numeric" placeholder="Cardholder Name" maxlength="255" aria-describedby="field-description-cardholderName">

image

Obviously this prevents our customers filling in the cardholder name on mobile. I'd really like to know how something this basic made it into production?

lol768 commented 1 year ago

To add insult to injury, the cardholder name validation rejects numeric cardholder names, so there's no way that our customers on mobile can pay at all.

Not a real card number, obviously

lol768 commented 1 year ago

Caused by https://github.com/braintree/braintree-web/issues/673

ibooker commented 1 year ago

We are working on fix; in the meantime we have identified the following workaround: -- Adding type: 'text' property to the cardHolderName field should override the numeric mode

 braintree.hostedFields.create({
    ...
    fields: {
      cardholderName: {
        selector: '#cc-name',
        placeholder: 'Name as it appears on your card',
        type: 'text'
      },
      ...
    }
lol768 commented 1 year ago

What's the workaround for those of us using the Drop-in UI @ibooker

I don't have any braintree.hostedFields invocation in my code.

SancSalix commented 1 year ago 
    authorization: clientToken,
    container: '#drop-in',
    threeDSecure: true,
    card:  {
    overrides: {
      fields: {
        cardholderName: {
          type: 'text'
        }
      }
    } 
  }
  })

https://developer.paypal.com/braintree/docs/guides/drop-in/customization#customize-your-ui

This is also fixed in the next patch version of drop in that's going out today